12 Mart 2024 itibarıyla INP (Interaction to Next Paint), Core Web Vitals metrikleri arasında FID'in yerini resmî olarak aldı. Artık sitenizin yalnızca ne kadar hızlı açıldığı değil, tıklamalara ve dokunuşlara ne kadar çabuk yanıt verdiği de sayfa deneyimi değerlendirmesinin merkezinde.
Core Web Vitals, Google'ın gerçek kullanıcı verilerine dayanarak sayfa deneyimini ölçtüğü üç temel metrikten oluşur: yükleme hızını gösteren LCP, görsel kararlılığı gösteren CLS ve bugünden itibaren etkileşim hızını gösteren INP. Bu yazıda INP metriğinin neyi ölçtüğünü, nasıl test edildiğini ve sık karşılaşılan sorunların nasıl giderileceğini anlatıyoruz.
INP neyi ölçer?
FID metriği, ziyaretçinin sayfadaki ilk etkileşiminde tarayıcının tepki vermeye başlamadan önce ne kadar beklediğini ölçüyordu. Bu yaklaşımın iki önemli eksiği vardı: Yalnızca ilk etkileşimi dikkate alıyor ve etkileşimin sonucunun ekranda görünmesine kadar geçen süreyi hesaba katmıyordu.
INP ise ziyaret boyunca yapılan tıklama, dokunma ve klavye etkileşimlerini izler; bunların en yavaşlarından birini sayfanın değeri olarak raporlar. Her etkileşimin süresi üç bölümden oluşur:
- Giriş gecikmesi: Kullanıcının tıklamasından tarayıcının ilgili kodu çalıştırmaya başlamasına kadar geçen süre.
- İşleme süresi: Etkileşime bağlı JavaScript kodlarının çalışma süresi.
- Sunum gecikmesi: Kod tamamlandıktan sonra tarayıcının ekranı yeniden çizip sonucu göstermesine kadar geçen süre.
Google'ın belirlediği eşiklere göre 200 milisaniye ve altı “iyi”, 200 ile 500 milisaniye arası “iyileştirilmesi gerekiyor”, 500 milisaniyenin üzeri ise “kötü” olarak değerlendirilir. Değerlendirme, gerçek ziyaretlerin yüzde 75'lik dilimine göre yapılır; yani ziyaretlerin en az dörtte üçünde iyi bir deneyim sunmanız hedeflenir.
INP değerinizi nasıl ölçersiniz?
INP gerçek kullanıcı etkileşimlerine dayandığı için en güvenilir veri sahadan, yani sitenizi kullanan gerçek ziyaretçilerden gelir:
- Google Search Console: Core Web Vitals raporu, sitenizdeki sorunlu URL gruplarını INP sonuçlarıyla birlikte gösterir.
- PageSpeed Insights: Yeterli trafiği olan sayfalar için Chrome kullanıcılarından toplanan gerçek INP verisini sunar.
- Chrome Geliştirici Araçları: Performans panelinde bir etkileşimi kaydederek hangi kodun ne kadar süre çalıştığını ayrıntılı olarak görebilirsiniz.
- web-vitals JavaScript kitaplığı: INP verisini kendi analiz altyapınıza göndermek isterseniz Google'ın açık kaynak kitaplığını kullanabilirsiniz.
Lighthouse'un standart sayfa yükleme testi gerçek bir kullanıcı etkileşimi içermediği için INP değerini doğrudan ölçmez. Bu testlerdeki Toplam Engelleme Süresi (TBT) ise olası INP sorunları için yararlı bir ön göstergedir.
Yavaş etkileşimlerin en yaygın nedenleri
Kötü INP değerlerinin arkasında genellikle tarayıcının ana iş parçacığını (main thread) uzun süre meşgul eden JavaScript kodları bulunur. Tarayıcı bu sırada kullanıcının tıklamasına yanıt veremez. Sık karşılaşılan nedenler şunlardır:
- 50 milisaniyeden uzun süren ve “uzun görev” olarak adlandırılan JavaScript işlemleri.
- Sohbet eklentileri, reklam ve takip kodları gibi üçüncü taraf betikler.
- Binlerce öğeden oluşan büyük DOM yapıları (sayfanın HTML ağacı) ve her etkileşimde yeniden hesaplanan karmaşık yerleşimler.
- Arama kutusu ya da filtre gibi her tuş vuruşunda ağır bir işlem başlatan bileşenler.
INP için uygulanabilir iyileştirmeler
- Uzun görevleri bölün: Ağır işlemleri küçük parçalara ayırın ve aralarda kontrolü tarayıcıya geri verin; böylece tarayıcı kullanıcı etkileşimlerine öncelik verebilir.
- Önce geri bildirim gösterin: Bir butona tıklandığında önce görsel yanıtı (yükleniyor göstergesi, buton durumu) verin, ağır işlemi ardından çalıştırın.
- Üçüncü taraf kodlarını gözden geçirin: Kullanılmayan etiketleri kaldırın, gerekli olanları sayfa yüklendikten sonra devreye alın.
- Girdi işlemlerini seyreltin: Arama ve filtre alanlarında her tuş vuruşunda değil, kullanıcı yazmayı bıraktıktan kısa bir süre sonra işlem yapın.
- DOM boyutunu küçültün: Görünmeyen içerikleri ihtiyaç duyulduğunda oluşturun; uzun listelerde yalnızca ekranda görünen öğeleri işleyin.
- Ağır hesaplamaları taşıyın: Ekran güncellemesiyle ilgisi olmayan hesaplamaları Web Worker'lara aktararak ana iş parçacığını rahatlatın.
Nereden başlamalı?
İyileştirmeye en çok ziyaret alan sayfalardan ve en sık kullanılan etkileşimlerden başlayın: menü açma, sepete ekleme, form gönderme ve filtreleme. Search Console'daki sorunlu URL gruplarını önceliklendirin ve her düzeltmeden sonra saha verisinin güncellenmesini bekleyin; gerçek kullanıcı verileri 28 günlük dönemler hâlinde değerlendirildiği için iyileşmenin raporlara yansıması birkaç hafta sürebilir. Metriğin teknik ayrıntılarına web.dev üzerindeki INP rehberinden ulaşabilirsiniz.
Sitenizin INP değeri “iyileştirilmesi gerekiyor” ya da “kötü” aralığındaysa sorun çoğu zaman birkaç kritik kodda gizlidir. Performans analizini ve iyileştirme adımlarını birlikte planlamak isterseniz iletişim sayfamızdan ekibimize ulaşabilirsiniz.
