Core Web Vitals ve INP: hız artık tek başına yetmiyor

Core Web Vitals, Google’ın kullanıcı deneyimini ölçtüğü üç metrikten oluşur. Mart 2024’te FID metriği emekliye ayrıldı ve yerine INP geldi. Bu değişiklik birçok siteyi "iyi" kategorisinden düşürdü.

Üç metrik ve eşikleri

• LCP (Largest Contentful Paint): en büyük içerik öğesinin görünme süresi. İyi: 2,5 saniyenin altı.
• INP (Interaction to Next Paint): kullanıcı etkileşiminden sonra ekranın güncellenme süresi. İyi: 200 ms’nin altı.
• CLS (Cumulative Layout Shift): sayfa yüklenirken içeriğin kayma miktarı. İyi: 0,1’in altı.

Değerlendirme, gerçek kullanıcı verisinin 75. yüzdelik dilimine göre yapılır. Yani kullanıcılarınızın dörtte biri kötü deneyim yaşıyorsa eşiği geçemezsiniz.

INP neden zor?

Eski metrik FID yalnızca ilk etkileşimin gecikmesini ölçüyordu ve sayfanın işlem yapma süresini hiç saymıyordu. INP ise sayfadaki tüm etkileşimlere bakar ve en kötüsünü raporlar. Ayrıca tıklamadan ekrana yansımaya kadar geçen sürenin tamamını sayar.

Sonuç: JavaScript ağırlıklı siteler, özellikle her etkileşimde yeniden çizim yapan arayüzler, INP’de zorlanır.

INP iyileştirme yöntemleri

1. Uzun görevleri bölün. 50 ms’den uzun süren JavaScript görevlerini parçalara ayırın; aralarda tarayıcıya nefes aldırın.
2. Üçüncü taraf betikleri erteleyin. Sohbet aracı, ısı haritası, A/B test kütüphanesi — hepsi ana iş parçacığını tıkar. defer kullanın veya kullanıcı etkileşiminden sonra yükleyin.
3. Olay dinleyicilerini hafifletin. Her tuş vuruşunda arama yapan bir alan, INP’yi tek başına bozar. Geciktirme (debounce) uygulayın.
4. Gereksiz yeniden çizimi kesin. Bir düğmeye basınca tüm listeyi yeniden oluşturuyorsanız, sadece değişen öğeyi güncelleyin.

LCP için en etkili üç müdahale

• Hero görselini fetchpriority="high" ile önceliklendirin, o görsele lazy loading uygulamayın
• Font dosyalarını preload edin ve font-display: swap kullanın
• Sunucu yanıt süresini (TTFB) 600 ms altına indirin — önbellek burada en büyük kazancı verir

CLS: en ucuz kazanç

CLS genellikle üç sebepten bozulur ve üçü de kolay düzelir:

• Görsellerde width ve height öznitelikleri eksik
• Reklam veya gömülü içerik için yer ayrılmamış
• Web fontu yüklenince metin boyutu değişiyor

Ölçüm: laboratuvar mı, saha mı?

Lighthouse gibi araçlar laboratuvar verisi üretir: tek bir simüle edilmiş cihaz. Google’ın sıralamada kullandığı ise saha verisidir (CrUX). İkisi sık sık çelişir.

Kural: Lighthouse’u sorunu bulmak için, Search Console’un Core Web Vitals raporunu ise başarıyı doğrulamak için kullanın. Saha verisi 28 günlük pencereyle çalıştığı için düzeltmelerinizin etkisini görmek haftalar alır.

Ne kadar önemli?

Core Web Vitals bir sıralama faktörüdür ama zayıf bir faktördür. İçeriği kötü olan hızlı bir sayfa, içeriği iyi olan yavaş bir sayfayı geçmez. Asıl kazanç dönüşümdedir: sayfa hızındaki iyileşme, sepet terk oranını ve form tamamlama oranını doğrudan etkiler.