Başlamadan önce: ölçüm araçlarını hazırlayın

Optimizasyona başlamadan önce mevcut durumu doğru okumak gerekir. Üç temel araç kullanın:

  • PageSpeed Insights: Hem lab hem saha (gerçek kullanıcı) verisi
  • Google Search Console → Core Web Vitals raporu: URL gruplarına göre hangi sayfaların sorunlu olduÄŸu
  • Chrome DevTools → Lighthouse: Kök neden analizleri ve kod seviyesinde öneriler

Hangi metriğin en düşük skorda olduğunu belirleyin ve o metrikten başlayın. Genellikle LCP → CLS → INP sırasıyla ele almak en verimli yaklaşımdır.

Dikkat: Lab skorları (Lighthouse) ile saha verileri (gerçek kullanıcı) arasında fark olabilir. Google'ın sıralamada kullandığı veri gerçek kullanıcı deneyimidir (CrUX). Her ikisini de takip edin.

LCP optimizasyonu

LCP (Largest Contentful Paint), sayfanın en büyük görsel veya metin öğesinin yüklenme süresidir. Hedef: 2,5 saniyenin altı.

1. LCP öğesini tanımlayın

Chrome DevTools'ta "Performance" sekmesinde LCP öğesinin ne olduğunu görebilirsiniz. Çoğunlukla hero görseli veya ana başlık metnidir.

2. Hero görselini öncelikli yükleyin

Hero görselinde fetchpriority="high" ve loading="eager" kullanın. loading="lazy" LCP görselinde kesinlikle kullanmayın — bu görsel hemen yüklenmelidir.

3. Görseli optimize edin

  • WebP formatına dönüştürün (JPEG'den %25–35 daha küçük)
  • Görselin boyutunu, sayfada görüntüleneceÄŸi boyuta ölçeklendirin
  • width ve height attribute'larını her zaman belirtin

4. Sunucu yanıt süresini kısaltın (TTFB)

TTFB 600 ms'yi aşıyorsa LCP puanınız doğrudan etkilenir. Önlemler:

  • CDN kullanın ve statik dosyaları edge'de sunun
  • Tarayıcı önbelleÄŸini (Cache-Control) düzgün yapılandırın
  • Render-blocking kaynaklarını (kritik olmayan CSS/JS) defer/async ile taşıyın

CLS optimizasyonu

CLS (Cumulative Layout Shift), sayfa yüklenirken öğelerin beklenmedik şekilde kaymasını ölçer. Hedef: 0,1'in altı.

1. Tüm medya öğelerine boyut verin

Görseller, videolar ve iframe'ler için width ve height attribute'larını her zaman HTML'de tanımlayın. Tarayıcı yükleme tamamlanmadan önce alanı ayırır ve kayma olmaz.

2. Dinamik içerik yerleşimini kilitleyin

Banner reklamlar, chat widget'ları ve cookie bildirimleri gibi dinamik öğeler sayfanın altına veya kenarlarına yerleştirilmeli, içeriğin üzerinde açılmamalıdır.

3. Web fontlarını önceden yükleyin

Font geç yüklenince metin kayabilir (FOUT). <link rel="preload"> ile kritik fontları önceden çağırın ve font-display: optional veya swap kullanın.

INP optimizasyonu

INP (Interaction to Next Paint), kullanıcı etkileşiminden sonra sayfanın görsel yanıt süresini ölçer. Hedef: 200 ms'nin altı.

1. Ana iş parçacığını boşaltın

Ağır JavaScript işlemleri ana thread'i bloke eder. Uzun görevleri (50 ms üzeri) setTimeout ile parçalara bölün veya Web Workers'a taşıyın.

2. Gereksiz üçüncü taraf scriptleri kaldırın

Analytics, chat ve reklam scriptleri INP'i doğrudan etkiler. Her üçüncü taraf scriptin katkısını Chrome DevTools'ta "Third-party summary" ile ölçün ve gereksizleri kaldırın.

3. Event listener'ları optimize edin

Scroll ve input gibi sık tetiklenen olaylarda throttle/debounce uygulayın. Her etkileşimde DOM'u baştan yazmaktan kaçının.

Yayın öncesi kontrol listesi

  • Hero görselinde fetchpriority="high" var mı?
  • Tüm görsellerde width ve height attribute'ları tanımlandı mı?
  • Kritik olmayan CSS ve JS defer/async ile yükleniyor mu?
  • Fontlar için font-display: swap tanımlandı mı?
  • Üçüncü taraf scriptleri gerçekten gerekli olanlarla sınırlandırıldı mı?
  • PageSpeed Insights mobil skoru 70 üzerinde mi?
  • Search Console'da Core Web Vitals raporunda kırmızı URL var mı?

Hedef: Mobilde LCP < 2,5 s, CLS < 0,1, INP < 200 ms. Bu değerlerin üçünü de sağlamak "İyi" kategorisine girmek için zorunludur.

Sonuç

Core Web Vitals optimizasyonu tek seferlik bir iş değildir. Site büyüdükçe, yeni içerik ve özellikler eklendikçe metrikler değişir. Aylık Search Console denetimi ve periyodik PageSpeed Insights kontrolü bu sürecin sağlıklı yürümesini sağlar.

Sitenizin durumunu profesyonel gözle değerlendirmek istiyorsanız ücretsiz analiz talep edebilirsiniz. Genel metrik açıklamaları için Core Web Vitals nedir yazısını okuyun.