INP, Mart 2024'te FID'in yerini aldığında pek çok site bir gecede "iyi"den "iyileştirme gerekiyor"a düştü. Sebep basitti: FID yalnızca ilk tıklamanın gecikmesini ölçüyordu ve neredeyse her site bunu geçebiliyordu. INP ise oturum boyunca yapılan tüm etkileşimleri değerlendirir.
Ölçülen şey tam olarak ne?
INP bir etkileşimin üç aşamasını toplar:
- Giriş gecikmesi: Tıklamanın işlenmeye başlamasına kadar geçen süre. Ana iş parçacığı meşgulse burada birikir.
- İşleme süresi: Olay işleyicilerinizin çalışma süresi.
- Sunum gecikmesi: Sonucun ekrana boyanmasına kadar geçen süre.
Çoğu ekip yalnızca ortadaki aşamayı optimize eder ve sonuç alamaz. Sorun genelde ilk aşamadadır: kullanıcı tıkladığında tarayıcı zaten başka bir işle meşguldür.
Sorunlu etkileşimi bulma
Kör optimizasyon yapmayın. Şu sırayı izleyin:
- Search Console → Core Web Vitals raporundan INP'si zayıf URL gruplarını çıkarın.
- Temsilci bir URL'i Chrome'da açın, DevTools → Performance → CPU kısıtlamasını 4x yapın.
- Kaydı başlatın, gerçek bir kullanıcı gibi gezinin: menü açın, filtre uygulayın, arama kutusuna yazın.
- Zaman çizelgesinde kırmızı üçgenle işaretli long task bloklarını inceleyin. Her birinin çağrı yığını size sorumlu dosyayı verir.
Üç yaygın düzeltme
1. Uzun görevleri parçalayın
Tek seferde çalışan büyük bir döngüyü await scheduler.yield() veya küçük setTimeout parçalarıyla bölün. Tarayıcı aralarda kullanıcı girdisini işleyebilir hâle gelir.
2. Üçüncü taraf betiklerini erteleyin
Sohbet widget'ı, ısı haritası ve A/B test araçları ilk yüklemede kritik değildir. Bunları ilk kullanıcı etkileşiminden veya üç saniyelik gecikmeden sonra yükleyin. Tek başına bu değişiklik pek çok sitede INP'yi yeşile taşır.
3. Ağır DOM güncellemelerini ayırın
Tıklamaya yanıt olarak yüzlerce düğüm güncelleniyorsa, önce görsel geri bildirimi verin (buton durumu değişsin), ağır güncellemeyi bir sonraki kareye bırakın. Kullanıcı bekliyor olduğunu bilirse gecikme çok daha kısa hissedilir.
Doğrulama
Düzeltmelerden sonra saha verisinin güncellenmesi 28 gün alır. Bu süreyi beklerken web-vitals kütüphanesiyle kendi kullanıcılarınızdan gerçek zamanlı INP toplayın; laboratuvar testine güvenerek yayına almayın.