Interaction to Next Paint (INP), bir kullanıcının sayfayla etkileşimi (tıklama, dokunma, tuşa basma) ile ekranın buna tepki olarak güncellenmesi arasında geçen süreyi ölçen Core Web Vitals metriğidir. Mart 2024'te FID'in yerini aldı ve o günden beri pek çok sitenin en zayıf metriği oldu. Sebebi basit: Sayfaya eklenen her betik, ana iş parçacığında (main thread) yer kaplar. Bu yazıda INP'yi nasıl ölçeceğinizi ve somut olarak nasıl iyileştireceğinizi anlatıyoruz.
Hedef değerler
- İyi: 200 ms ve altı
- İyileştirilmeli: 200-500 ms
- Zayıf: 500 ms üzeri
INP, ziyaret boyunca yapılan etkileşimlerin en yavaşlarından birini temsil eder. Yani sayfadaki tek bir ağır buton bile tüm sayfanın puanını düşürebilir.
Bir etkileşim neden yavaşlar?
Bir tıklamanın süresi üç parçadan oluşur:
- Girdi gecikmesi: Tarayıcı o anda başka bir işle (örneğin bir betiği çalıştırmakla) meşgulse tıklama sıraya girer.
- İşleme süresi: Tıklamaya bağlı JavaScript kodunun çalışma süresi.
- Sunum gecikmesi: Kod bittikten sonra tarayıcının stil hesaplaması, yerleşim ve çizim yapması.
Adım 1: Ölçün
- Saha verisi: Search Console'daki Core Web Vitals raporu ve PageSpeed Insights gerçek kullanıcı (CrUX) verisini gösterir. Önce hangi sayfa gruplarının sorunlu olduğuna bakın.
- Laboratuvar: Chrome DevTools'un Performance panelinde etkileşimi kaydedin; uzun görevler (50 ms üzeri) kırmızı işaretle görünür.
- Gerçek kullanıcı izleme:
web-vitalskütüphanesiyle INP değerini ve hangi öğeye tıklandığını kendi analitiğinize gönderebilirsiniz.
Adım 2: Ana iş parçacığını boşaltın
- Gereksiz betikleri kaldırın: Kullanılmayan eklentiler, eski izleme kodları, birden fazla analitik aracı.
- Üçüncü taraf betikleri erteleyin: Sohbet widget'ları, reklam ve analitik betikleri sayfa yüklendikten veya kullanıcı etkileşiminden sonra yüklensin. Bu sitedeki reklam betiği de sayfa yüklendikten sonra, tarayıcı boşta kaldığında yükleniyor.
- Uzun görevleri bölün: Büyük bir döngüyü parçalara ayırıp aralarda tarayıcıya nefes aldırın. Destekleyen tarayıcılarda
scheduler.yield(), diğerlerindesetTimeoutile. - Kod bölme: Sayfada hemen gerekmeyen JavaScript'i ilk yüklemeden çıkarın.
Adım 3: Olay işleyicilerini hafifletin
button.addEventListener('click', async () => {
// 1) Kullanıcıya hemen geri bildirim ver
button.classList.add('is-loading');
// 2) Tarayıcının ekranı çizmesine izin ver
await new Promise(r => setTimeout(r, 0));
// 3) Ağır işi sonra yap
hesaplaVeFiltrele();
});Kullanıcıya önce görsel geri bildirim vermek, ağır işi sonraya bırakmak algılanan hızı ve INP'yi birlikte iyileştirir.
Adım 4: Çizim maliyetini azaltın
- Çok büyük DOM ağaçlarından kaçının; binlerce öğe içeren listelerde sayfalama veya sanal liste kullanın.
- Animasyonlarda
transformveopacitykullanın;width,topgibi yerleşimi değiştiren özellikler pahalıdır. - Görünür olmayan bölümler için
content-visibility: autodüşünün.
Sık görülen INP sorunları
- Mobil menü açılırken tüm sayfanın yeniden hesaplanması.
- Filtre seçildiğinde yüzlerce ürün kartının senkron olarak yeniden oluşturulması.
- Çerez onay bandının ağır bir kütüphane ile yüklenmesi.
- Tag manager içinde birikmiş onlarca etiket.
- Her tuş vuruşunda arama yapan ve debounce kullanmayan arama kutuları.
Sık sorulan sorular
INP sıralamayı ne kadar etkiler?
Core Web Vitals, sayfa deneyimi sinyallerinin bir parçasıdır; içerik kalitesinin önüne geçmez. Ancak benzer kalitede sayfalar arasında fark yaratabilir ve dönüşüm oranını doğrudan etkiler.
Laboratuvarda iyi, sahada kötü çıkıyor. Neden?
Gerçek kullanıcılar daha yavaş telefonlar kullanır ve sayfada daha çok etkileşim yapar. Test ederken DevTools'ta CPU yavaşlatma (4x veya 6x) kullanın.
Reklamlar INP'yi bozar mı?
Ağır reklam betikleri bozabilir. Reklam kodunu geç yüklemek ve reklam alanı sayısını makul tutmak etkiyi azaltır.
Sonuç
INP'yi iyileştirmenin özü, ana iş parçacığını kullanıcıya ayırmaktır: daha az betik, daha kısa görevler, önce geri bildirim. Sitenizin Core Web Vitals değerlerini birlikte iyileştirmek için bize ulaşın.
