INP (Interaction to Next Paint) Nasıl İyileştirilir?

Okuma süresi: 2 dk

Kısa yanıt: INP, kullanıcının tıklama, dokunma veya tuş basışından sonra sayfanın görsel olarak yanıt verme süresidir; iyi değer 200 ms altıdır. En sık neden ana iş parçacığını meşgul eden JavaScript’tir: kullanmadığınız eklenti betiklerini kaldırın, sohbet, reklam ve analiz betiklerini geciktirin ve aşırı büyük sayfa yapısını (DOM) sadeleştirin.

Bu rehber kimin için: Core Web Vitals’ı iyileştirmek isteyenler · Gereken süre: 30-60 dakika · Seviye: İleri

INP, Core Web Vitals’ta FID’in yerini aldı ve sayfadaki tüm etkileşimlerin en yavaşlarından birini raporlar. FID yalnızca ilk etkileşimin bekleme süresini ölçerken INP, olay işleyicilerin çalışma süresini ve sonraki ekran güncellemesini de içerir. Bu nedenle menüsü, filtresi veya sepeti ağır JavaScript kullanan siteler INP’de zorlanır.

INP iyileştirme adımları

Saha verisine bakın: Search Console › Core Web Vitals raporunda INP sorunlu sayfa gruplarını belirleyin.
Yavaş etkileşimi bulun: Chrome Geliştirici Araçları › Performance’ta kayıt başlatıp menü, filtre ve sepete ekle düğmelerine tıklayın; uzun görevler (50 ms üzeri) kırmızı işaretlenir.
Betikleri azaltın: Kullanılmayan eklentileri ve sayfa oluşturucu modüllerini kapatın.
Üçüncü taraf betikler: Canlı sohbet, ısı haritası ve reklam betiklerini kullanıcı etkileşimine kadar geciktirin.
DOM boyutu: Binlerce öğe içeren mega menüleri ve iç içe sayfa oluşturucu bloklarını sadeleştirin.
Uzun görevleri bölün: Kendi kodunuzda ağır işlemleri parçalara ayırıp aralarda tarayıcıya kontrol verin (ör. await scheduler.yield() veya setTimeout).
Yeniden ölçün: Değişiklikleri laboratuvarda TBT ile, sahada ise birkaç hafta içinde INP ile doğrulayın.

Sunucu INP’yi etkiler mi?

Etkileşim bir AJAX isteği tetikliyor ve ekran ancak yanıt gelince güncelleniyorsa (ör. sepete ekle) sunucu yanıt süresi dolaylı olarak etkilidir. Bu durumda düğmeye tıklanır tıklanmaz bir yükleniyor durumu göstermek INP’yi iyileştirir, çünkü ölçülen şey bir sonraki ekran güncellemesidir.

Hâlâ çözülmediyse

Ölçüm ve öncelik sıralaması için PageSpeed Insights raporu okuma rehberine, betik sadeleştirme için CSS ve JS küçültme rehberine bakın. WooCommerce sitelerinde sepet, filtre ve ödeme adımlarını ayrı ayrı ölçün; bu sayfalar önbellekten sunulmadığı için sunucu yanıtı da etkileşim süresine eklenir. AJAX yanıtları için hızlı altyapı arayanlar e-ticaret hosting paketlerimizi inceleyebilir.

Sık sorulan sorular

TBT ile INP aynı mı?

Hayır; TBT laboratuvarda yükleme sırasındaki engellemeyi, INP sahada gerçek etkileşimleri ölçer. TBT’yi düşürmek genellikle INP’ye de yarar.

JS geciktirme her zaman iyi mi?

Hayır; etkileşim için gereken betikleri geciktirmek ilk tıklamayı yavaşlatabilir. Test ederek karar verin.

Hangi etkileşimin INP’yi uzattığını nasıl görürüm?

Laboratuvar testi gerçek bir etkileşim olmadan INP ölçmez. Chrome Geliştirici Araçları’nın Performance panelinde kaydı başlatıp yavaş düğmeye tıkladığınızda “INP breakdown” öngörüsü süreyi üç parçaya ayırır: girdi gecikmesi, olay işleyicilerin çalışma süresi ve ekrana çizim gecikmesi. En uzun parça nereden başlayacağınızı gösterir.

İlgili rehberler

Bu rehber işinize yaradı mı?