Kısa cevap: INP (Interaction to Next Paint), ziyaretçinin tıklama, dokunma veya klavye etkileşimlerine sayfanın ne kadar hızlı görsel yanıt verdiğini değerlendiren Core Web Vitals metriğidir. Tek bir düğmenin yalnızca tıklama olayını yakalama süresi değildir: giriş gecikmesi, olay işleyicilerinin çalışması ve sonraki boyamanın gerçekleşmesi birlikte önem taşır.
INP nasıl yorumlanır?
Google’ın web.dev rehberinde saha verileri için 75. yüzdelik dilim temel alınır. INP değeri 200 milisaniye veya altında iyi; 200–500 ms arasında iyileştirilmeli; 500 ms üzeri zayıf olarak sınıflandırılır. Bu eşikler tek bir kullanıcının her etkileşiminin aynı hızda olacağı anlamına gelmez. Gerçek kullanıcıların cihazı, ağı, sayfanın yükü ve etkileşim tipi sonucu değiştirir.
| Ölçülen | Ne anlama gelir? | Olası sorun |
|---|---|---|
| Giriş gecikmesi | Olay işleyicisi başlamadan önceki bekleme | Uzun ana iş parçacığı görevi |
| İşleme süresi | Olay işleyicilerinin çalışması | Ağır JavaScript hesabı |
| Sunum gecikmesi | Sonraki görsel güncellemenin hazırlanması | Geniş DOM veya karmaşık düzen hesapları |
Örnek: Filtre düğmesi neden geç tepki verir?
Bir ürün listesinde “Filtrele” düğmesine basıldığında sayfanın binlerce satırı tek seferde yeniden oluşturduğunu düşünün. Tıklama olayı hemen başlamış olabilir; ama uzun JavaScript görevi ve ardından gelen geniş yerleşim hesapları yüzünden ekranda sonuç geç görünür. Bu durumda sadece düğmeye animasyon eklemek sorunu çözmez; gereksiz iş azaltılmalı ve görüntüleme adımları bölünmelidir.
Ölçümden iyileştirmeye adımlar
- Search Console Core Web Vitals veya CrUX verileriyle sorunun hangi URL grubunda olduğunu bulun.
- Chrome DevTools Performance kaydıyla yavaş bir etkileşimi tekrar üretin.
- Uzun görevleri, ağır olay işleyicilerini ve gereksiz DOM güncellemelerini işaretleyin.
- Yalnız gerekli elemanları güncelleyin; büyük hesapları küçük görevlere bölmeyi değerlendirin.
- Gerçekten kullanılmayan JavaScript’i azaltın; üçüncü taraf betiklerinin etkisini ölçün.
- Değişiklik sonrasında hem laboratuvar testini hem zamanla biriken saha verisini karşılaştırın.
Teknik örnek: Önce görsel yanıt
Bir düğmeye basıldığında kullanıcı önce yükleniyor durumunu görmeli, ağır veri işleme ise uygun zamanlamayla ele alınmalıdır. Ancak görev bölmek veri tutarlılığını bozmayacak şekilde tasarlanmalı, kod gerçek uygulamanın etkileşim ihtiyaçlarına göre test edilmelidir.
button.addEventListener('click', async () => {
button.disabled = true;
status.textContent = 'İşleniyor…';
await new Promise(resolve => setTimeout(resolve, 0));
await updateVisibleResults();
button.disabled = false;
});Bu yalnızca görev zamanlaması fikrini gösteren şematik JavaScript’tir; mevcut bir projede hata yönetimi, iptal ve erişilebilir durum bildirimi ayrıca ele alınmalıdır. setTimeout tek başına iyi INP garantilemez.
INP ile LCP ve CLS arasındaki fark
LCP büyük içeriğin ne zaman göründüğüyle, CLS beklenmedik yerleşim kaymalarıyla, INP ise kullanıcı etkileşiminden sonra görsel geri bildirimle ilgilidir. Bir sayfa açılışta hızlı ama düğmeye basıldığında yavaş olabilir; üç metriğin birlikte değerlendirilmesi bu nedenle önemlidir.
Gerçek bir etkileşimi adım adım nasıl teşhis edersiniz?
Sayfa açılışını ölçmek ile kullanıcı eylemini ölçmek aynı test değildir. Örneğin ürün listesindeki filtre düğmesi geç tepki veriyorsa önce sayfayı normal kullanım koşullarında açın, ardından filtreyi çalıştırırken tarayıcının Performans kaydını alın. Yavaşlığın olay başlamadan önceki beklemede mi, JavaScript işleyicisinde mi, yoksa sonraki çizimde mi oluştuğunu ayırın.
- Giriş gecikmesi: Uzun başka görevlerin etkileşimi sırada bekletip bekletmediğini araştırın.
- İşleme: Aynı tıklamada gereksiz veri filtreleme veya çok sayıda düğüm güncellemesi olup olmadığını kontrol edin.
- Sunum: Olay işleyicisi bitse bile büyük bir DOM düzenlemesinin yeni kareyi geciktirip geciktirmediğini inceleyin.
İyileştirme sonrası aynı etkileşimi, benzer veri ve cihaz koşullarında yeniden ölçün. Laboratuvar kaydındaki tek deneme ile gerçek kullanıcıların saha verisi farklı soruları yanıtlar. Etkileşimi yalnızca görsel bir yüklenme animasyonuyla saklamak yerine gecikmenin oluştuğu işi azaltmaya odaklanın.
Sık sorulan sorular
INP yalnız mobil cihazlarda mı önemlidir?
Hayır. Masaüstü ve mobil kullanıcı deneyimi ayrı incelenebilir; cihaz performansı önemli fark yaratabilir.
PageSpeed puanı 100 ise INP kesin iyi midir?
Hayır. Laboratuvar puanı gerçek ziyaretçilerin tüm etkileşimlerini temsil etmez. Saha verilerini ayrıca inceleyin.