Bir sayfa lab performans kontrolünden geçtiği halde gerçek kullanıcıya bozuk hissettiriyordu. Hero hızlı geliyor, layout yerinden oynamıyordu. Yavaş an daha sonraydı. Uygulama hydrate olduktan ve third-party script'ler kendi işlerine başladıktan sonra filtre açılınca tıklama yoğun main thread arkasında bekliyordu.
INP'nin cilalı görünen build'leri yakalamasının nedeni budur. Yükleme bitmiş görünebilir, fakat etkileşim kapasitesi çoktan harcanmıştır.
INP görünür cevap için beklemeyi ölçer
Interaction to Next Paint, sayfa ziyareti boyunca click, tap ve keyboard etkileşimlerini izler. Event handler başlamadan önceki gecikmeyi, handler işini ve browser sonucu boyayana kadarki presentation delay'i kapsar. Resmî INP rehberi, raporlanan değerin yüksek etkileşimli sayfalarda outlier düzenlemesiyle en yavaş etkileşimi temsil ettiğini açıklar.
Google'ın güncel optimizasyon rehberi, ilgili field percentile içinde 200 milisaniye veya daha düşük INP değerini iyi sınıfına koyar. Bu rakam, lab içinde tekrar üretilebilen yavaş kontrolü görmezden gelme izni değildir. Tek bir sancılı checkout veya navigation etkileşimi yine düzeltilmelidir.
Long task input delay yaratır
Browser main thread aynı anda tek task çalıştırır. Input geldiğinde JavaScript parse ediliyor, evaluate ediliyor veya çalışıyorsa etkileşim bekler. Büyük state update, senkron veri dönüşümü, pahalı component ağacı ve arka arkaya planlanan küçük işler event handler öncesindeki boşluğu doldurabilir.
Long task optimizasyonu rehberi, interaction dahil yüksek öncelikli işin daha erken çalışabilmesi için yield yaklaşımını anlatır. Pratik çözüm rastgele timer dağıtmak değildir. İşi azaltın, kalanı bölün ve yarım state'in güvenli olduğu sınırlarda yield edin.
Gerçek yavaş etkileşimi profile edin. Timeline'ın başka yerindeki long task ilgisiz olabilir.
Hydration sorunu ilk paint sonrasına taşır
Server rendering hızlı görsel sonuç verirken client büyük component ağacını yüklemek, parse etmek ve hydrate etmek zorunda kalabilir. Kullanıcı kontrolü görür, fakat main thread cevap vermeye hazır değildir. Hydration aynı anda effect, data normalisation veya layout ölçümü başlatıyorsa erken etkileşim startup işiyle yarışır.
Statik bölgeleri gereksiz client boundary dışında tutun. Etkileşimli island'ları bilinçli hydrate edin. İlk input penceresinde browser storage'dan büyük state kurmayın. Click'i yalnızca network idle olduktan sonra değil, yükleme sırasında da test edin.
Küçük bundle faydalıdır, fakat execution şekli de önemlidir. Sıkıştırılmış script yine de yoğun bir main-thread bloğu üretebilir.
Third-party script aynı thread'i paylaşır
Consent manager, analytics, chat widget, experimentation ve reklam kodu ayrı performans bütçesinde yaşamaz. Async yükleme geliş zamanını değiştirir, main-thread işini mutlaka azaltmaz. Field debugging rehberi, field regression'ı çevresindeki işe bağlamak için target element, interaction type ve zaman bilgisinin toplanmasını önerir.
Her third party'nin owner'ı ve ölçülen amacı olsun. Gerekli olmayan kodu geciktirin, duplicate tag'leri kaldırın, vendor update sonrasında yeniden test edin. Profile edilemeyen veya kapatılamayan script operasyon riskidir.
Bu hafta ısıran etkileşimi bulun
Field data ile başlayıp yavaş INP ile ilişkili elementleri belirleyin. Load-time etkileşimleri sonrakilerden, mobil veriyi desktop'tan ayırın. Aynı aksiyonu CPU baskısı altında, production script'leri açıkken tekrar üretin.
Input delay, handler duration ve presentation delay'i ayrı kaydedin. Kontrollü koşuda third party'leri çıkarın, hydration boundary'yi daraltın ve doğrulanan long task'i bölün. Sonra field içinde tekrar ölçün.
Genel skoru kovalamakla başlamayın. Cevap vermeyen click ile başlayın. INP, sayfa yalnızca yüklenmiş göründüğünde değil, main thread gerçek niyeti kabul edecek alan bulduğunda iyileşir.