Core Web Vitals Nedir ve Nasil Iyilestirilir?

Core Web Vitals Nedir?

Core Web Vitals, Google'in kullanici deneyimini olcmek icin kullandigi, siralamayı etkileyen uc temel performans metrigidir:

• **LCP (Largest Contentful Paint)** — Sayfanin ana icerigi ne kadar surede yukleniyor?
• **INP (Interaction to Next Paint)** — Sayfayla etkilesime ne kadar hizli yanit veriliyor?
• **CLS (Cumulative Layout Shift)** — Sayfa yuklenirken gorsel ogeler ne kadar kayiyor?

LCP: Largest Contentful Paint

Ne Olcuyor?

Sayfanin en buyuk gorsel veya metin blogunun ekranda gorunme suresi.

Hedef: 2,5 saniye ve alti

Iyilestirme Yontemleri

• **Sunucu yanit suresini azaltin** — Kaliteli hosting, CDN kullanimi.
• **Gorsel optimizasyonu** — WebP formati, dogru boyutlandirma, srcset kullanimi.
• **LCP kaynagini onceleyin** — Preload link etiketi ile ana gorseli erken yukletin.
• **Render-blocking kaynaklari kaldirin** — CSS ve JS'i erteleme veya async/defer uygulama.
• **Lazy loading dikkatli kullanin** — Above-the-fold gorsellerini lazy loading'e dahil etmeyin.

INP: Interaction to Next Paint

Ne Olcuyor?

Kullanicinin tiklama, dokunma gibi etkilesimleri ile sayfanin gorsel yaniti arasindaki gecikme.

Hedef: 200ms ve alti

Iyilestirme Yontemleri

• **JavaScript calistirma suresini kisaltin** — Uzun gorevleri parcalayin.
• **Ana is parcacigini (main thread) bosaltin** — Agir hesaplamalari web worker'lara tasiyin.
• **Gereksiz JS kaldirin** — Kullanilmayan kutuphaneler ve kodlar.
• **Input handler'lari optimize edin** — Agir event listener'lardan kacinin.

CLS: Cumulative Layout Shift

Ne Olcuyor?

Sayfa yuklenirken gorunur alanda beklenmedik duzen degisikliklerinin toplam skoru.

Hedef: 0,1 ve alti

Iyilestirme Yontemleri

• **Gorsel ve video icin boyut tanimlayin** — Width ve height attribute'leri HTML'e ekleyin.
• **Reklam alanlari rezerve edin** — Reklam yuklenmeden once alan ayrilsin.
• **Web fontlarini onceden yukleyin** — font-display optional veya swap kullanin, FOUT'u minimize edin.
• **Dinamik icerik enjeksiyonundan kacinin** — Mevcut icerigin ustune/altina eklenen dinamik bloklar layout shift olusturur.

Olcum Araclari

• **Google Search Console** — Alan genelinde field data (gercek kullanici verisi).
• **PageSpeed Insights** — Sayfa bazli lab ve field data.
• **Chrome DevTools Performance** — Derinlemesine debug.
• **Lighthouse** — Otomasyona uygun performans denetimi.
• **Web Vitals Chrome Uzantisi** — Gercek zamanli izleme.

Sonuc

Core Web Vitals iyilestirme teknikleri siteye gore degisir. Once Search Console'dan en cok sorun yasayan sayfalari belirleyin, PageSpeed Insights ile kok nedeni analiz edin ve sistematik sekilde iyilestirmeler uygulayin.