DursunKaptan
Astsubay Kıdemli Başçavuş
- Katılım
- 23 Haz 2025
- Mesajlar
- 273
- Tepkime puanı
- 75
- Puan
- 462
- Konum
- İkizdere/Rize
- Web sitesi
- 53r.com.tr
Interaction to Next Paint (INP), web sayfalarının kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçen bir performans metriğidir. Core Web Vitals'in bir parçası olarak Google tarafından 2024'te resmi olarak duyurulmuş ve First Input Delay (FID)'ın yerini almıştır.
INP Nedir?
INP, bir kullanıcının sayfayla yaptığı etkileşimlerin (örneğin, tıklama, dokunma veya klavye girişi) ardından tarayıcının ekranda görsel bir güncelleme (paint) yapması için geçen süreyi ölçer. Kısaca, etkileşimin başlangıcından ekranın değişimine kadar olan süreyi ifade eder.Nasıl Çalışır?
- Etkileşim: Kullanıcı bir butona tıklar, formu doldurur veya kaydırma yapar.
- İşleme Süreci: Tarayıcı, bu etkileşimi işler (JavaScript çalıştırır, stil hesaplar, layout oluşturur).
- Paint (Boyama): Değişiklikler ekrana yansıtılır.
- Ölçüm: INP, etkileşimle paint arasındaki toplam gecikmeyi kaydeder.
Neden Önemli?
- Kullanıcı Deneyimi: Yavaş INP, sayfanın "donuk" hissetmesine neden olur.
- SEO Etkisi: Google, INP'yi sıralama faktörü olarak kullanır (Core Web Vitals kapsamında).
- Performans Optimizasyonu: Hangi etkileşimlerin sorunlu olduğunu tespit etmeye yardımcı olur.
İyi ve Kötü INP Değerleri
- İyi (Good): 200 ms veya altı.
- Geliştirilmeli (Needs Improvement): 200-500 ms arası.
- Kötü (Poor): 500 ms üzeri.
INP ile FID Arasındaki Fark
- FID, yalnızca ilk etkileşimin gecikmesini ölçerken, INP tüm etkileşimlerin performansını değerlendirir.
- INP, işleme sürecinin tamamını (JavaScript + render) kapsar; FID yalnızca gecikmeyi ölçer.
Nasıl Optimize Edilir?
- Uzun JavaScript Görevlerini Bölme: Büyük JS işlemlerini küçük parçalara ayırın.
- Main Thread Bloklamalarını Azaltma: Ağır hesaplamaları Web Workers'a aktarın.
- Gereksiz JS/Kod Azaltma: Kullanılmayan kodu temizleyin, lazy loading uygulayın.
- CSS Optimizasyonu: Karmaşık CSS seçicilerinden kaçının.
Ölçüm Araçları
- Lighthouse (Lab verisi)
- Chrome DevTools (Performance paneli)
- Web Vitals JavaScript Kütüphanesi (Gerçek kullanıcı verisi)
