Web sitesini hızlandırmak için Core Web Vitals kontrol listesi

Google'ın sayfa deneyimi ölçütleri olan Core Web Vitals, hem kullanıcı deneyimini hem de arama sıralamasını etkiliyor. Üç temel metrik var:

Ölçmek için PageSpeed Insights, Chrome DevTools'taki Lighthouse ve Performance sekmesi yeterli. Search Console'daki rapor ise gerçek kullanıcı verisini gösterir.

LCP'yi iyileştirmek

• En büyük görseli (genelde hero görseli) optimize et: WebP/AVIF kullan, doğru boyutta sun (srcset).
• Bu görsele loading="lazy" verme; tersine fetchpriority="high" ekle.
• Kritik fontları önceden yükle: <link rel="preload" as="font" ... crossorigin>.
• Sunucu yanıt süresini (TTFB) düşür: sayfa önbelleği, OPcache, veritabanı sorgularında indeks.
• Render'ı engelleyen CSS/JS'yi azalt; kullanılmayan kütüphaneleri sayfadan kaldır.

INP'yi iyileştirmek

• Ana iş parçacığını uzun süre meşgul eden JavaScript'i böl. 50 ms'yi aşan görevler DevTools'ta kırmızı işaretlenir.
• Üçüncü taraf betikleri (reklam, analiz, sohbet balonu) gözden geçir; çoğu zaman en büyük suçlu onlardır.
• Ağır işleri requestIdleCallback, Web Worker veya sunucu tarafına taşı.
• Olay dinleyicilerinde (scroll, input) gereksiz yeniden çizimden kaçın; gerekirse debounce kullan.

CLS'i iyileştirmek

• Her görsele ve iframe'e width ve height ver (ya da CSS aspect-ratio).
• Reklam ve gömülü içerik alanlarına önceden yer ayır.
• Web fontlarında font-display: swap kullanırken yedek fontun ölçülerine yakın bir font seç ki metin zıplamasın.
• Sayfa yüklendikten sonra içeriğin üstüne banner/uyarı ekleme; ekleyeceksen sabit konumlu olsun.

Hızlı kazanımlar

1. Gzip/Brotli sıkıştırmayı aç.
2. Statik dosyalara uzun süreli önbellek başlığı ver, dosya adına sürüm ekle (style.css?v=12 veya hash).
3. HTTP/2 veya HTTP/3 kullan.
4. Görselleri lazy-load et (ilk ekrandakiler hariç).

Kendi sitenizde ölçtüğünüz değerleri ve neyin işe yaradığını paylaşırsanız başkalarına da yol gösterir.