Bu rehberde neler bulacaksınız?
INP, ziyaret boyunca kullanıcı etkileşimlerine verilen görsel yanıtın sürekliliğini ölçer.
Bu rehber yavaş buton, menü, filtre ve form etkileşimlerini kod, DOM ve gerçek kullanıcı verisi düzeyinde teşhis eder.
INP neyi ölçer?
Interaction to Next Paint, bir sayfa ziyareti boyunca tıklama, dokunma ve klavye etkileşimlerinin ardından tarayıcının bir sonraki görsel güncellemeyi ne kadar sürede sunabildiğini değerlendirir. Genellikle ziyaret içindeki en yavaş etkileşimlerden biri sayfanın INP değerini temsil eder.
İyi deneyim hedefi 200 milisaniye veya altıdır. INP yalnız ilk yüklemeyi değil, sayfa açık kaldığı sürece gerçekleşen etkileşimleri kapsar. Bu nedenle hızlı açılan bir sayfa; ağır menü, filtre, form veya üçüncü taraf kod nedeniyle yine zayıf etkileşim deneyimi sunabilir.
Etkileşim gecikmesinin aşamaları
Bir etkileşim giriş gecikmesi, olay işleyicilerinin çalışma süresi ve tarayıcının bir sonraki kareyi çizme gecikmesinden oluşur. Ana iş parçacığı uzun bir JavaScript göreviyle meşgulse kullanıcı girdisi bekler. Olay işleyici ağırsa uygulama hesaplaması gecikir; büyük stil ve düzen çalışmaları da çizimi erteleyebilir.
Performans kaydıyla yavaş etkileşim yeniden üretilmeli ve toplam süre bu aşamalara ayrılmalıdır. Sadece JavaScript paket boyutunu küçültmek her sorunu çözmez. Asıl darboğazın giriş kuyruğu, uygulama mantığı veya render maliyeti olup olmadığı belirlenmelidir.
Uzun JavaScript görevlerini bölmek
Ana iş parçacığını uzun süre kaplayan işler daha küçük parçalara ayrılabilir ve tarayıcıya arada kullanıcı girdilerini işleme fırsatı verilebilir. Kullanılmayan kod kaldırılmalı, yalnız ihtiyaç duyulan bileşenler yüklenmeli ve ağır hesaplamalar mümkün olduğunda web worker gibi uygun ortamlara taşınmalıdır.
Olay işleyiciler içinde senkron olarak yapılan büyük DOM sorguları, JSON işlemleri veya karmaşık sıralamalar yeniden değerlendirilmelidir. Kullanıcıya hızlı görsel geri bildirim verilip ağır işin sonraki adımda tamamlanması, algılanan tepkiyi iyileştirebilir.
DOM ve render maliyetini azaltmak
Çok büyük DOM ağaçları stil hesaplama ve düzen maliyetini artırır. Ekranda olmayan binlerce satır sanallaştırılabilir, bileşen güncellemeleri daraltılabilir ve değişmeyen alanların gereksiz yeniden çizimi önlenebilir. CSS seçicilerinin karmaşıklığı da büyük sayfalarda ölçülmelidir.
Layout thrashing olarak bilinen ardışık ölçüm ve stil değişikliği döngüleri tarayıcıyı tekrar tekrar düzen hesaplamaya zorlar. Okuma ve yazma işlemlerini gruplamak, animasyonları transform ve opacity gibi daha uygun özelliklerle yürütmek etkileşim sonrası çizimi hızlandırabilir.
Üçüncü taraf scriptleri sınırlamak
Canlı destek, A/B test, reklam ve izleme araçları uzun görevler oluşturabilir. Scriptlerin toplam boyutundan çok ne zaman ve ne kadar süre ana iş parçacığını kapattığı ölçülmelidir.
Kritik olmayan araçlar geciktirilebilir, sağlayıcı seçenekleri sadeleştirilebilir veya işlev yalnız gerekli sayfalarda yüklenebilir. Her kaldırma kararında pazarlama ve ölçüm ihtiyacı değerlendirilir.
Form ve filtre optimizasyonu
Her tuş vuruşunda büyük listeyi yeniden hesaplamak yerine debounce, önbellek ve daha dar veri güncellemesi kullanılabilir. Form doğrulaması kullanıcıya hızlı ve erişilebilir geri bildirim vermelidir.
Filtre sonucu beklenirken düğme durumu ve yüklenme işareti gösterilebilir. Ağ isteği uzun sürse bile ilk görsel yanıtın hızlı olması kullanıcıya işlemin alındığını anlatır.
INP regresyonunu önlemek
Kritik etkileşimler otomatik performans testlerine eklenebilir. Paket açma, mobil menü, arama filtresi ve form gönderme gibi görevler sürümler arasında karşılaştırılır.
Alan verisinde sorunlu cihaz ve sayfa grupları ayrıştırılır. Tek bir genel puan yerine gerçek iş akışlarının gecikmesi izlenirse ekip doğru bileşene müdahale eder.
Gerçek kullanıcı etkileşimlerini izlemek
Laboratuvar testinde hangi düğmeye basılacağı önceden seçildiği için bütün ziyaret senaryoları görülmeyebilir. Gerçek kullanıcı izleme, yavaş etkileşimin hangi sayfa, cihaz ve öğede yaşandığını tanımlamaya yardımcı olur. Kişisel veri toplamadan yalnız teknik olay bilgisi tutulmalıdır.
Öncelik yüksek trafik ve dönüşüm adımlarına verilmelidir. Paket seçimi, WhatsApp CTA’sı, mobil menü ve iletişim formu gibi iş açısından kritik etkileşimler ayrı kontrol edilir. Her yayın sonrasında regresyon takibi yapılması, performansın zamanla yeniden bozulmasını önler.
İlgili kaynaklar ve sonraki adımlar
Konuyu uygulamaya geçirmek için aşağıdaki hizmet ve rehber sayfalarını inceleyebilirsiniz:
Sık sorulan sorular
İyi INP kaç milisaniyedir?＋
75. yüzdelikte 200 ms veya altı iyi hedef kabul edilir.
INP yalnız ilk tıklamayı mı ölçer?＋
Hayır. Sayfa ziyareti boyunca gerçekleşen etkileşimleri değerlendirir.
FID ile INP aynı mı?＋
Hayır. INP etkileşimin görsel yanıtına kadar daha kapsamlı süreyi ele alır.
Büyük JavaScript dosyası her zaman kötü INP midir?＋
Risk oluşturabilir; asıl belirleyici ana iş parçacığındaki görevler ve etkileşim maliyetidir.
INP laboratuvarda ölçülür mü?＋
Etkileşim senaryoları test edilebilir; gerçek kullanıcı alan verisi de gereklidir.
Backlink profiliniz için doğru paketi seçin
Güncel paket kapsamlarını, teslimat sürelerini ve fiyatları karşılaştırın.
Paketleri İncele