- Katılım
- 21 May 2023
- Mesajlar
- 470
- Tepki
- 17
- Puan
- 18
INP, sayfanız açıldıktan sonra kullanıcının yaptığı her tıklamanın ne kadar hızlı karşılık bulduğunu ölçer. Bu rehber; INP'yi doğru ölçmeyi, kötü değerin sebeplerini bulmayı ve ana iş parçacığındaki yükü kalıcı biçimde azaltmayı anlatır.
Pratik anlamı şudur: sayfanız hızlı açılıp sonrasında donuyorsa, INP bunu yakalar. Kullanıcının algıladığı "bu site ağır" hissi çoğunlukla açılış hızıyla değil, tıklama sonrası bekleyişle ilgilidir.
En pratik yöntem bir bütçe belirlemektir: sayfa başına yüklenecek JavaScript boyutu ve kabul edilebilir en uzun görev süresi için üst sınır koyun. Yeni bir talep geldiğinde soru "bu özellik eklenebilir mi" değil, "bu özellik bütçeye sığıyor mu" olur. Bütçe aşılıyorsa ya özellik hafifletilir ya da yerine eklenecek başka bir yük çıkarılır.
Neden INP?
Uzun yıllar boyunca tepkisellik ölçütü FID idi ve yalnızca sayfadaki ilk etkileşimin gecikmesini kaydediyordu. Bu, gerçek deneyimin çok küçük bir kısmıydı: kullanıcı sayfada onlarca tıklama yapıyor, ancak yalnızca ilki ölçülüyordu. INP bu boşluğu kapatır ve oturum boyunca gerçekleşen etkileşimlerin tamamını değerlendirerek en kötüye yakın bir temsilci değer bildirir.Pratik anlamı şudur: sayfanız hızlı açılıp sonrasında donuyorsa, INP bunu yakalar. Kullanıcının algıladığı "bu site ağır" hissi çoğunlukla açılış hızıyla değil, tıklama sonrası bekleyişle ilgilidir.
- İyi: 200 ms ve altı
- İyileştirme gerekli: 200–500 ms arası
- Kötü: 500 ms üzeri
Bir Etkileşim Üç Parçadan Oluşur
INP'yi düşürmek için gecikmenin nerede oluştuğunu ayırt etmek gerekir. Her etkileşim üç aşamaya bölünür ve her aşamanın çözümü farklıdır.- Giriş gecikmesi (input delay): Kullanıcı tıklar ancak tarayıcı başka bir işle meşguldür ve olay işleyiciyi hemen çalıştıramaz
- İşleme süresi (processing time): Olay işleyici kodunuz çalışır; ağır hesaplama burada gecikme yaratır
- Sunum gecikmesi (presentation delay): Kod bitmiştir ancak tarayıcı yeni kareyi çizmek için düzen ve boyama işlerini tamamlamalıdır
İpucu' Alıntı:
Doğru Ölçüm Nasıl Yapılır?
INP saha metriğidir; gerçek kullanıcıların gerçek cihazlarında oluşur. Laboratuvar testleri yalnızca yön gösterir.- Saha verisi: Gerçek kullanıcı ölçümü toplayan bir çözümle sayfa tipine göre INP dağılımını izleyin
- Cihaz ayrımı: Mobil ve masaüstünü birleştirmeyin; mobil değerler genellikle iki katı kötüdür
- Sayfa tipi ayrımı: Ana sayfa, liste, detay ve form sayfalarını ayrı ölçün
- Yüzdelik dilim: Ortalama yerine 75. yüzdelik dilimi temel alın
- Laboratuvar doğrulaması: Performans panelinde kısıtlı CPU profiliyle etkileşimi kaydedin ve uzun görevleri görün
Ana İş Parçacığını Boşaltmanın Yolları
INP'nin temel sebebi neredeyse her zaman aynıdır: ana iş parçacığı uzun görevlerle doludur ve tarayıcı kullanıcıya cevap veremez.- Uzun görevleri bölün: 50 ms'yi aşan işleri parçalara ayırın ve aralarda tarayıcıya nefes aldırın
- Gereksiz kodu kaldırın: Kullanılmayan kütüphaneleri ve ölü kodu temizleyin
- Üçüncü taraf scriptleri erteleyin: Sohbet, ısı haritası ve reklam kodlarını ilk etkileşimden sonra yükleyin
- Ağır hesaplamayı taşıyın: Yoğun döngüleri Web Worker'a devredin
- Olay işleyiciyi hafifletin: Tıklama anında yalnızca görsel geri bildirimi verin, ağır işi sonraya bırakın
- Gereksiz yeniden çizimi önleyin: Aynı anda çok sayıda DOM düğümünü güncellemekten kaçının
- Kod bölme: Büyük paketleri sayfa bazında bölerek yalnızca gerekli kodu yükleyin
Sık Yapılan Hatalar
- Her şeyi aynı anda ölçmek: Tek bir site geneli INP değeri sorunun yerini gizler
- Yalnızca laboratuvar testine güvenmek: Güçlü bir bilgisayarda her site hızlı görünür
- Eklenti sayısını azaltmakla yetinmek: Önemli olan sayı değil, ana iş parçacığındaki süredir
- Görsel geri bildirimi atlamak: Kullanıcı tepkisiz buton gördüğünde tekrar tıklar ve yükü artırır
- Tek seferlik iyileştirme: Her yeni özellik yeni script demektir; ölçüm sürekli olmalıdır
Mikro Vaka
Bir içerik sitesinde mobil INP değeri 480 ms ölçüldü. Kayıtlar incelendiğinde gecikmenin büyük bölümünün giriş gecikmesinden geldiği görüldü: sayfa açılışında çalışan üç ayrı analiz scripti ana iş parçacığını yaklaşık 900 ms boyunca meşgul ediyordu. Scriptler kullanıcı ilk kaydırma veya tıklama yapana kadar ertelendi, ayrıca menü açma işleyicisindeki gereksiz DOM taraması kaldırıldı. Sonraki ölçümde INP 210 ms bandına indi. Kod miktarı azalmamıştı; yalnızca çalışma zamanı değişmişti.Öncelik Sırası Nasıl Kurulur?
Elinizde uzun bir iyileştirme listesi olduğunda hepsini aynı anda uygulamak hem riskli hem de sonucu ölçülemez hale getirir. Bunun yerine etkisi büyük, maliyeti düşük işleri öne alın. Üçüncü taraf scriptleri ertelemek genellikle bu tanıma en çok uyan adımdır: kod değişikliği gerektirmez, geri alınması kolaydır ve çoğu sitede giriş gecikmesini belirgin şekilde düşürür. Ardından kendi olay işleyicilerinizdeki ağır işleri bölün. Mimari değişiklik gerektiren adımları ise en sona bırakın; bunlar en yüksek maliyetli ve en yavaş doğrulanan işlerdir.Basit Formül
Kod:
INP ≈ Giriş gecikmesi + İşleme süresi + Sunum gecikmesi
Hedef: her bileşeni 70 ms altında tutmak
Öncelik: en büyük bileşeni önce düşürKazanımı Kalıcı Kılmak
INP iyileştirmesinin en zor kısmı ilk düşüş değil, düşen değeri korumaktır. Her yeni özellik, her yeni pazarlama scripti ve her tema güncellemesi ana iş parçacığına yeni yük ekler. Bu yüzden iyileştirmeyi tek seferlik bir proje değil, süregelen bir bakım kalemi olarak ele almak gerekir.En pratik yöntem bir bütçe belirlemektir: sayfa başına yüklenecek JavaScript boyutu ve kabul edilebilir en uzun görev süresi için üst sınır koyun. Yeni bir talep geldiğinde soru "bu özellik eklenebilir mi" değil, "bu özellik bütçeye sığıyor mu" olur. Bütçe aşılıyorsa ya özellik hafifletilir ya da yerine eklenecek başka bir yük çıkarılır.
- Script envanteri: Sayfada çalışan tüm üçüncü taraf kodları listeleyin ve her biri için sahibini yazın
- Düzenli gözden geçirme: Kullanılmayan piksel ve etiketleri belirli aralıklarla temizleyin
- Sürüm öncesi kontrol: Yeni yayın öncesinde kritik sayfalarda etkileşim ölçümü yapın
- Uyarı eşiği: Saha verisinde INP belirlenen sınırı aştığında bildirim alın
- Sorumluluk: Performans bütçesinin takibini belirli bir kişiye atayın
Hızlı Kontrol Listesi
- Mobil ve masaüstü INP değerleri ayrı ayrı kaydedildi mi?
- En kötü INP üreten sayfa tipi belirlendi mi?
- Üçüncü taraf scriptler erteleniyor mu?
- 50 ms üstü uzun görevler listelendi mi?
- Butonlarda anında görsel geri bildirim var mı?
- Değişiklik sonrası yeniden ölçüm yapıldı mı?
Sık Sorulan Sorular
- INP kaç olmalı? 75. yüzdelik dilimde 200 ms ve altı hedeflenir.
- INP sıralamayı doğrudan etkiler mi? Core Web Vitals sinyalleri sayfa deneyiminin parçasıdır; tek başına belirleyici değildir ancak rekabetin yakın olduğu sorgularda fark yaratır.
- Sunucu hızı INP'yi etkiler mi? Dolaylı olarak evet. Yavaş yanıtlar sayfanın daha uzun süre meşgul kalmasına yol açar.
- Tek sayfa uygulamalarında INP neden yüksek? Yönlendirme ve durum güncellemeleri ana iş parçacığında büyük işler üretir; kod bölme ve öncelik yönetimi gerekir.
- Görselleri optimize etmek INP'yi düşürür mü? Doğrudan değil; görsel optimizasyonu daha çok LCP ve CLS'yi etkiler.
- Ölçüm için mutlaka ücretli araç gerekir mi? Hayır. Tarayıcının performans paneli ve açık kaynak ölçüm kütüphaneleri yeterlidir.
- Değişiklik sonrası sonuç ne zaman görünür? Saha verisi kayan pencereyle toplandığı için genellikle birkaç hafta içinde netleşir.
İç Bağlantılar
- SEO 2025: Core Web Vitals ve İçerik Rehberi
- 2025'te Web Performans Optimizasyonu
- 2025 SEO Checklist: Teknik, İçerik ve Otorite
Dış Kaynak
web.dev — INP nasıl optimize edilir – etkileşim aşamaları ve uygulamalı tekniklerÖzetle
Ölç, parçala, ertele. INP'yi düşürmenin yolu daha az kod yazmaktan çok, kodun ne zaman çalıştığını yönetmekten geçer. Etkileşimi üç aşamaya ayırıp en büyük gecikmeyi hedefleyin; her müdahaleden sonra saha verisiyle doğrulayın.Arama trafiğinize yön verin — pratik SEO içgörüleri
Ekli dosyalar
Son düzenleme:
