Core Web Vitals 2021'de sıralama sinyali olarak duyurulduğunda sektör bunu bir devrim gibi karşıladı. Beş yıl sonra elimizde çok daha net bir tablo var: bu metrikler önemli, ama önemli oldukları yer çoğu kişinin sandığı yer değil.
Üç metrik ne ölçüyor?
Core Web Vitals birbirinden bağımsız üç deneyim boyutunu ölçer. Bunları tek bir "hız skoru" gibi düşünmek en yaygın hatadır.
| Metrik | Ölçtüğü şey | İyi eşik | Zayıf eşik |
|---|---|---|---|
| LCP | En büyük içerik ögesinin görünme süresi | ≤ 2,5 sn | > 4,0 sn |
| INP | Etkileşime görsel yanıt gecikmesi | ≤ 200 ms | > 500 ms |
| CLS | Beklenmedik düzen kayması | ≤ 0,1 | > 0,25 |
Eşikler, o metriğin sayfa yüklemelerinin %75'inde sağlanmalıdır. Ortalama değil yüzdelik dilim kullanılması önemli: birkaç çok yavaş yükleme, ortalamanın arkasına saklanamaz.
Saha verisi mi, laboratuvar verisi mi?
Bu ayrım, ekiplerin en çok zaman kaybettiği yer. İki veri türü farklı soruları yanıtlar:
- Saha verisi (CrUX): Gerçek Chrome kullanıcılarından son 28 günde toplanan ölçümler. Google'ın sıralamada kullandığı veri budur.
- Laboratuvar verisi (Lighthouse): Sabit bir cihaz ve ağ profilinde yapılan tek seferlik simülasyon. Hata ayıklama için mükemmel, sıralama için ilgisiz.
Lighthouse'ta 98 alıp Search Console'da "zayıf" görmek çelişki değildir. Gerçek kullanıcılarınız sizin test cihazınızdan yavaş donanımlarda ve kötü şebekelerde geziyor demektir.
Pratikte hangi sıralamayla ilerlemeli?
Sınırlı geliştirme kaynağınız varsa etkiyi maksimize eden sıra şudur:
- LCP — En çok siteyi etkileyen ve en görünür kazanç üreten metrik. Genelde sunucu yanıt süresi ve hero görselinden kaynaklanır.
- INP — Etkileşimli arayüzlerde kritik. E-ticaret filtreleri, arama kutuları ve menüler ilk bakılacak yerler.
- CLS — Genelde en kolay çözülen. Görsel ve iframe'lere boyut vermek, reklam alanlarını rezerve etmek çoğu vakayı kapatır.
LCP için ilk üç müdahale
LCP'yi bozan üç şeyi sırayla eleyin:
- Sunucu yanıtı (TTFB) 600 ms üzerindeyse önce burayı düzeltin — diğer optimizasyonlar bunun üstüne biner.
- Hero görselini
fetchpriority="high"ile işaretleyin ve tembel yüklemeden çıkarın. - Render engelleyen CSS ve font dosyalarını kritik yol dışına alın.
INP için en sık suçlu
INP sorunlarının büyük bölümü kendi kodunuzdan değil, üçüncü taraf betiklerinden gelir. Etiket yöneticisi üzerinden eklenen ısı haritası, sohbet ve analitik araçları ana iş parçacığını uzun süre bloke eder. Bunları requestIdleCallback ile veya kullanıcı etkileşiminden sonra yüklemek çoğu zaman tek başına eşiği geçirmeye yeter.
Ne zaman durmalı?
Üç metrik de yeşil bandın içindeyse optimizasyona devam etmenin sıralama açısından getirisi hızla azalır. LCP'yi 2,4 saniyeden 1,9 saniyeye çekmek kullanıcı deneyimi açısından güzeldir ama sıralamada ölçülebilir bir fark üretmez. Kaynağınızı o noktadan sonra içeriğe kaydırın.