INP (Interaction to Next Paint) Optimizasyonu: Ölçüm ve Uygulama Rehberi

INP (Interaction to Next Paint) Optimizasyonu, kullanıcı tıklama, dokunma veya klavye girdisi verdikten sonra tarayıcının görsel geri bildirim üretmesine kadar geçen süreyi azaltmayı amaçlar. En doğru yaklaşım; gerçek kullanıcı verisiyle sorunlu etkileşimi bulmak, ana iş parçacığını rahatlatmak ve değişiklikleri yeniden ölçmektir. 20.10.2026 itibarıyla iyi INP hedefi, mobil ve masaüstü kullanıcılar ayrı değerlendirilerek 75. yüzdelik dilimde 200 ms veya daha düşük değerdir.

Önemli noktalar

• INP, yalnızca ilk girdiyi değil, sayfa oturumu boyunca gerçekleşen tıklama, dokunma ve klavye etkileşimlerini değerlendirir.
• 200 ms veya altı iyi, 200 ms üzeri ve 500 ms dahil değerler geliştirme gerektiren, 500 ms üzeri değerler zayıf yanıt verebilirlik olarak sınıflandırılır.
• Saha verisi kullanıcı deneyimini değerlendirmek için, laboratuvar verisi ise teknik teşhis için kullanılır.
• Uzun JavaScript görevleri, ağır olay işleyicileri, DOM güncellemeleri ve üçüncü taraf betikler yaygın nedenlerdir.
• İyi INP tek başına sıralama veya dönüşüm garantisi vermez; içerik uygunluğu, erişilebilirlik ve iş hedefleri birlikte ele alınmalıdır.

INP (Interaction to Next Paint) nedir?

INP, kullanıcının bir etkileşimi başlatması ile tarayıcının sonraki görüntü karesini gösterebilmesi arasındaki gecikmeyi ölçer. Etkileşim gecikmesi; tarayıcının girdiyi işlemeye başlamasını bekleme, ilgili olay işleyicilerini çalıştırma ve sonraki karenin sunulması için geçen süreyi kapsar. Bu nedenle yalnızca JavaScript’in çalışma süresini değil, görsel geri bildirimin ne zaman görüldüğünü de değerlendirir.

INP kapsamında tıklama, dokunma ve klavye etkileşimleri izlenir; kaydırma ve üzerine gelme doğrudan ölçülen etkileşim türleri değildir. Sayfa değeri, oturum boyunca gözlenen etkileşimlerden oluşturulur. Çok sayıda etkileşim bulunan sayfalarda olağan dışı en yüksek değerlerin bazıları göz ardı edilebilir; nihai saha değerlendirmesi kullanıcı sayfalarının 75. yüzdelik dilimi üzerinden yapılır.

INP eşikleri diğer Core Web Vitals metriklerinden nasıl ayrılır?

Google, Core Web Vitals değerlerini gerçek kullanıcı deneyimini anlamak için kullanır ve iyi sonuçları önerir; ancak iyi bir skor, arama sonuçlarında ilk sırayı garanti etmez. Sayfanın içeriği, arama niyetine uygunluğu, güvenilirliği, erişilebilirliği ve teknik kalitesi birlikte değerlendirilmelidir.

INP nasıl ölçülür?

1. Saha verisini inceleyin

İlk adım PageSpeed Insights, CrUX ve Search Console gibi kaynaklarda gerçek kullanıcı verisini kontrol etmektir. PageSpeed Insights, uygun veri bulunduğunda CrUX saha sonuçlarını Lighthouse laboratuvar teşhisleriyle birlikte sunar. Search Console ise benzer deneyime sahip URL gruplarını ve cihaz segmentlerini izlemeye yardımcı olur. URL, şablon, ülke veya cihaz farklarını gözden kaçırmadan veri dönemini ve örneklem kapsamını not edin.

RUM uygulaması kullanıyorsanız yalnızca toplam INP değerini saklamayın. Sorunlu etkileşimin türünü, hedef öğeyi, sayfa şablonunu, cihaz sınıfını ve gecikmenin giriş, işleme veya sunum bölümünde yoğunlaşıp yoğunlaşmadığını kaydedin. Bu ayrıntılar, “sayfa yavaş” gibi genel bir gözlemi belirli bir filtre, menü, form veya sepet akışına dönüştürür.

2. Kritik etkileşimleri listeleyin

Arama kutusu, mobil menü, filtre, ürün varyantı, sepet, ödeme, modal, sekme ve form gönderimi gibi kullanıcı yolculuğunun kritik noktalarını belirleyin. Mobil ve masaüstü testlerini ayırın; düşük güçlü cihazlar, yavaş ağlar ve uzun süre açık kalan sayfalar ana iş parçacığı rekabetini daha görünür kılabilir.

3. Laboratuvar teşhisi yapın

Chrome DevTools Performance panelinin Live Metrics ekranı, sayfayla etkileşirken Core Web Vitals değerlerini güncelleyebilir. Etkileşim tekrarlanabilir hâle geldiğinde kayıt alın; Interactions izinde 200 ms üzerindeki uyarıları, uzun görevleri, olay işleyicilerini ve boyama gecikmesini inceleyin. Panelde birinci ve üçüncü taraf kodlarını ayırmak, müdahale önceliğini belirlemeyi kolaylaştırır.

Her laboratuvar aracının etkileşim gerçekleştirmediğini unutmayın. Etkileşim yoksa INP raporlanmayabilir. Böyle durumlarda TBT, ana iş parçacığı blokajını anlamak için yararlı bir vekildir; ancak INP’nin yerine geçmez ve saha ölçümünü ikame etmez.

INP neden yükselir?

Yüksek INP çoğu zaman tarayıcının kullanıcı girdisine zamanında yanıt veremediğini gösterir. Büyük JavaScript paketleri, senkron hesaplamalar, 50 ms’den uzun görevler, aynı etkileşimde çalışan çok sayıda geri çağırma ve gereksiz DOM değişikliği ana iş parçacığını meşgul eder. Kullanıcı butona bastığında tarayıcı önce bu işleri tamamlamak zorunda kalırsa görsel geri bildirim gecikir.

• Her tuş vuruşunda ağır arama, filtreleme veya ağ isteği çalıştırmak
• Geniş listeleri tek işlemde yeniden oluşturmak
• Ölçme ve yazma işlemlerini plansız biçimde karıştırarak layout thrashing oluşturmak
• Reklam, analiz, canlı sohbet ve kişiselleştirme betiklerini kritik etkileşimlerle yarıştırmak
• İhtiyaç olmayan sayfalarda tema veya eklenti JavaScript’i çalıştırmak
• Büyük ve sık güncellenen DOM yapısını gereksiz yere yeniden boyamak

INP (Interaction to Next Paint) Optimizasyonu nasıl yapılır?

1. Uzun görevleri bölün

Uzun JavaScript işlerini küçük parçalara ayırın ve uygun noktalarda tarayıcıya kontrolü bırakın. Desteklenen tarayıcılarda scheduler.yield(), görevi bölerek tarayıcının kullanıcı girdisi ve görsel güncelleme gibi öncelikli işleri ele almasına izin verir. API’nin tüm yaygın tarayıcılarda bulunmadığı durumlarda özellik algılama ve uygun bir geri dönüş mekanizması kullanın.

async function processItems(items) {
  for (const item of items) {
    processItem(item);
    if (globalThis.scheduler?.yield) {
      await scheduler.yield();
    } else {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Her işi ertelemek çözüm değildir. Kullanıcıya gerekli görsel geri bildirimi önce verin; ağır veri işleme, ikincil liste güncellemesi veya analiz gönderimini daha sonra planlayın. requestIdleCallback() düşük öncelikli işler için kullanılabilir, ancak gerekli görevlerde zaman aşımı belirlenmelidir; aksi hâlde yoğun cihazlarda çalışma uzun süre ertelenebilir.

2. Olay işleyicilerini sadeleştirin

Bir buton veya form olayı yalnızca gerekli işi yapmalı, aynı etkileşim içinde gereksiz hesaplama başlatmamalıdır. Kullanıcı tıklamasını kabul eden durum değişikliğini hızlıca boyatın; ayrıntılı içerik üretimini sonraki göreve taşıyın. Arama alanlarında debounce, iptal edilebilir istekler ve yalnızca güncel sorgunun sonucunu işleme yaklaşımı kullanılabilir.

3. Hesaplamayı ana iş parçacığından taşıyın

Büyük veri dönüştürme, sıralama veya hesaplama DOM’a ihtiyaç duymuyorsa Web Worker seçeneğini değerlendirin. Worker, JavaScript çalışmasını ayrı bir bağlama taşıyabilir; ancak DOM’a doğrudan erişemez ve ana iş parçacığıyla mesajlaşma maliyeti vardır. Bu nedenle küçük işleri gereksiz yere worker’a taşımak yerine, işlem süresini ölçerek karar verin.

4. DOM ve stilleri kontrollü güncelleyin

Bir etkileşimde yüzlerce öğeyi ayrı ayrı değiştirmek yerine güncellemeleri gruplayın. Önce ölçüm, sonra yazma düzeni kurarak tarayıcının gereksiz stil ve yerleşim hesaplamalarını azaltın. Animasyonlarda uygun olduğunda kompozit edilebilen özellikleri tercih edin; düşük güçlü mobil cihazlarda menü, filtre ve modal akışlarını gerçek dokunuşlarla test edin.

5. Üçüncü taraf betikleri yönetin

Analiz, reklam, sohbet, A/B testi ve kişiselleştirme araçlarını envanterleyin. Her betiğin amacı, yüklenme zamanı, etkileşim sırasında çalışıp çalışmadığı ve ana iş parçacığı maliyeti ölçülmelidir. Kritik olmayan araçları ertelemek yararlı olabilir; ancak gizlilik, güvenlik, erişilebilirlik ve ölçüm gereksinimlerini doğrulamadan kod kaldırmayın.

WordPress sitelerinde uygulanabilir INP kontrol listesi

1. Tema ve eklentilerin ürettiği JavaScript dosyalarını sayfa ve şablon bazında listeleyin.
2. Kullanılmayan özellikleri kaldırın; gerekli kodu kod bölme ve ihtiyaç anında yükleme ile sınırlayın.
3. Önbellek, küçültme ve gecikmeli yükleme seçeneklerini tek tek açıp ölçün; bütün optimizasyonları aynı anda etkinleştirmeyin.
4. Menü, arama, filtre, sepet, varyant ve form akışlarını gerçek mobil cihazlarda test edin.
5. CDN ve sıkıştırmanın aktarımı hızlandırdığını, fakat ana iş parçacığı kaynaklı INP sorununu tek başına çözmeyebileceğini kabul edin.
6. Değişiklikleri sürüm kontrolü, performans bütçesi ve geri alma planıyla yayınlayın.

Performans çalışmasını daha geniş teknik bağlama yerleştirmek için kurumsal teknik SEO danışmanlığı yaklaşımını inceleyebilirsiniz. İçeriğin arama niyetiyle uyumunu değerlendirmek için de kullanıcı arama niyeti analizi rehberinden yararlanılabilir.

INP, SEO ve içerik deneyimiyle nasıl ilişkilidir?

INP, Google’ın gerçek dünya kullanıcı deneyimini değerlendirmede kullandığı Core Web Vitals setinin yanıt verebilirlik metriğidir. Bununla birlikte düşük INP; arama niyetine uygun, güvenilir ve yararlı içeriğin yerine geçmez. Öncelik, organik trafik ve iş sonucu üreten şablonlarda kullanıcıların içerikle veya dönüşüm adımıyla daha az sürtünmeyle etkileşmesini sağlamaktır.

AEO, GEO ve AIO açısından hızlı etkileşim, doğrudan cevapların, erişilebilir HTML’nin ve açık içerik yapısının yerine geçen bir sıralama garantisi değildir. Soru başlıkları, bağımsız cevap blokları, doğru iç bağlantılar ve güvenilir kaynaklar içerik keşfini destekler; INP ise bu içeriği kullanan kişinin sayfayla daha rahat etkileşmesine katkı verir.

Sürdürülebilir INP iyileştirme süreci

1. Ölçün: URL, şablon, cihaz ve kullanıcı yolculuğu bazında saha verisini toplayın.
2. Önceliklendirin: En yüksek INP’ye sahip ve iş sonucu üreten etkileşimleri seçin.
3. Teşhis edin: Uzun görev, olay işleyicisi, sunum gecikmesi ve üçüncü taraf maliyetini ayırın.
4. Uygulayın: Kodu bölün, geri bildirimi erkene alın, DOM güncellemelerini azaltın ve kritik olmayan işleri erteleyin.
5. Doğrulayın: Laboratuvar etkisini hemen, saha etkisini yeterli veri oluştuğunda değerlendirin.
6. Sürdürün: Yeni eklenti, tema sürümü veya üçüncü taraf entegrasyon sonrasında bütçeyi yeniden kontrol edin.

Sonuç olarak INP (Interaction to Next Paint) Optimizasyonu tek seferlik skor artırma çalışması değildir. Gerçek kullanıcı verisiyle sorunlu etkileşimi bulun; JavaScript görevlerini, olay işleyicilerini, DOM güncellemelerini ve üçüncü taraf kodları hedefleyin. Her değişikliği ölçerek teknik performansı kullanıcı memnuniyeti, erişilebilirlik ve iş sonuçlarıyla birlikte yönetin.

Kavramsal arka plan için SEO hakkında genel bilgi açıklamasını inceleyebilirsiniz.