Google’ın Yeni Sıralama Kriteri: INP (Interaction to Next Paint) Nedir ve Nasıl İyileştirilir?

Teknik SEO ve kullanıcı deneyimi (UX) dünyasında taşlar bir kez daha yerinden oynadı. Mart 2024 itibarıyla Google, yıllardır hayatımızda olan FID (First Input Delay) metriğini emekliye ayırdı ve yerine çok daha kapsamlı, çok daha acımasız bir metrik olan INP (Interaction to Next Paint)‘yi Core Web Vitals (Önemli Web Verileri) arasına ekledi.

Eğer Search Console panelinizde aniden “INP sorunu: 200 ms değerinden uzun” uyarıları görmeye başladıysanız veya organik trafiğinizde nedensiz dalgalanmalar yaşıyorsanız, doğru yerdesiniz.

Bu rehberde, INP’nin tam olarak ne olduğunu, arka planda nasıl çalıştığını ve sitenizi bu yeni SEO gerçekliğine nasıl hazırlayacağınızı semantik ve teknik derinliğiyle ele alıyoruz.

INP (Interaction to Next Paint) Nedir?

INP (Sonraki Boyamaya Kadar Geçen Etkileşim), bir kullanıcının sayfanızla etkileşime girmesi (örneğin bir butona tıklaması) ile tarayıcının bu etkileşimin sonucunu ekranda göstermesi (render/boyama yapması) arasında geçen toplam süreyi ölçen bir performans metriğidir.

Basit bir senaryo ile anlatalım: E-ticaret sitenizde bir kullanıcı “Sepete Ekle” butonuna tıkladı. Tıkladığı an ile o butonun üzerinde “Sepete Eklendi” yazan yükleme ikonunun çıktığı an arasındaki o milisaniyelik gecikme INP’nin ta kendisidir.

INP’nin 3 Ana Bileşeni (Gecikmenin Anatomisi)

Bir etkileşimin gerçekleşmesi teknik olarak üç aşamadan oluşur ve INP bu üçünün toplamıdır:

1. Giriş Gecikmesi (Input Delay): Kullanıcı tıkladığında tarayıcının (genellikle arka planda çalışan ağır JavaScript’ler yüzünden) bu tıklamayı algılamak için beklediği süredir.
2. İşlem Süresi (Processing Time): Tıklama algılandıktan sonra, bu tıklamanın tetiklediği kodların (JS/CSS) çalıştırılma süresidir.
3. Sunum Gecikmesi (Presentation Delay): Kodlar çalıştıktan sonra tarayıcının yeni durumu hesaplayıp (DOM güncellemesi) ekrana çizme (paint) süresidir.

INP Neden FID’nin (First Input Delay) Yerini Aldı?

FID, Google’ın eski gözdesiydi ancak çok büyük bir kör noktası vardı: Sadece ilk etkileşimi ve sadece giriş gecikmesini (Input Delay) ölçüyordu.

Yani kullanıcı siteye girip ilk butona tıkladığında tarayıcı hızlıysa FID skoru harika çıkıyordu. Ancak aynı kullanıcı sayfada kalıp 5. veya 6. butona tıkladığında sayfa donuyorsa, FID bunu görmezden geliyordu.

INP ise sayfanın tüm yaşam döngüsünü izler. Kullanıcı sayfada kaldığı süre boyunca yaptığı tüm etkileşimleri kaydeder ve genellikle en kötü (en yavaş) etkileşimi baz alarak sayfanın genel skorunu belirler. Bu yüzden FID skorunuz mükemmel olsa bile, INP skorunuz “Kötü” olarak işaretlenebilir.

İyi Bir INP Skoru Ne Olmalıdır?

Google’ın Core Web Vitals algoritmalarına göre INP eşik değerleri oldukça nettir:

• 🟢 İyi (Good): 200 milisaniye veya altı. (Hedeflemeniz gereken alan).
• 🟠 İyileştirme Gerekiyor (Needs Improvement): 200 ms ile 500 ms arası.
• 🔴 Kötü (Poor): 500 milisaniyeden uzun.

Önemli Not: INP, sayfa kaydırma (scrolling) veya üzerine gelme (hover) eylemlerini ölçmez. Sadece fare tıklamaları, dokunmatik ekran dokunuşları ve fiziksel klavye tuş basımları (Enter, Space vb.) INP’ye dahildir.

INP Skorunu Bozan Temel Nedenler Nelerdir?

Search Console’da veya PageSpeed Insights’ta kırmızı INP uyarıları görüyorsanız, sunucunuzun (hosting) değil, doğrudan sayfa içi kod yapınızın (Front-End) günahını çekiyorsunuz demektir. Başlıca suçlular şunlardır:

1. Uzun JavaScript Görevleri (Long Tasks): Tarayıcının Ana İş Parçacığı (Main Thread) tek şeritli bir yol gibidir. Eğer arkada 50ms’den uzun süren ağır bir JavaScript kodu çalışıyorsa, o an tıklayan kullanıcı kodun bitmesini beklemek zorundadır. Ekran “donmuş” hissi verir.
2. Aşırı Büyük DOM Ağacı: Sayfanızda binlerce gereksiz HTML etiketi (<div> içinde <div>) varsa, tarayıcı bir butona tıklandığında tüm bu HTML yapısını yeniden hesaplamak zorunda kalır (Sunum Gecikmesi).
3. Ağır Üçüncü Taraf (Third-Party) Kodları: Sitenize eklediğiniz canlı destek araçları, analiz pikselleri (Facebook Pixel vb.), ısı haritaları (Hotjar vb.) ve reklam scriptleri ana iş parçacığını sürekli meşgul eder.
4. Karmaşık CSS Seçicileri: Tarayıcının, tıkladıktan sonra hangi stile geçeceğini hesaplaması çok uzun sürer.

INP Nasıl İyileştirilir? (Teknik SEO ve Front-End Optimizasyonu)

INP’yi iyileştirmek, bir SEO uzmanı ile Front-End geliştiricinin omuz omuza çalışmasını gerektirir. İşte atılması gereken kesin adımlar:

1. Uzun Görevleri Parçalayın (Yield to Main Thread)

En kritik çözümdür. 50ms’den uzun süren tüm JavaScript görevlerini küçük parçalara ayırmalısınız. Modern web geliştirmede setTimeout fonksiyonu veya yeni nesil scheduler.postTask() API’si kullanılarak büyük kod blokları bölünür. Böylece tarayıcı aralarda nefes alarak kullanıcının tıklamalarına yanıt verebilir.

2. DOM Boyutunu Küçültün ve Optimize Edin

Google’ın tavsiyesi, bir sayfada maksimum 1.500 DOM düğümü (node) bulunmasıdır. Ayrıca iç içe geçme derinliği 32’yi aşmamalıdır.

• Görünmeyen elemanlar için content-visibility: auto; CSS özelliğini kullanın.
• Sonsuz kaydırma (infinite scroll) yerine sayfalandırma yapın veya sanal kaydırma (virtual rendering) teknikleri kullanın.

3. Tıklama Anında Kullanıcıya Anında Görsel Geri Bildirim Verin

İşlemin arka planda bitmesini beklemeyin! Kullanıcı butona tıkladığı an, butonun rengi değişmeli veya bir “yükleniyor (spinner)” ikonu çıkmalıdır. Bu, sunum gecikmesini (Presentation Delay) anında düşürür. İlk boyama ne kadar hızlı olursa, INP o kadar düşük çıkar.

4. “Gereksiz” Event Listener’ları Temizleyin

Her tıklamayı veya her tuş basımını dinleyen gereksiz JavaScript kodları performansı katleder. Özellikle WordPress kullanıyorsanız, sayfa oluşturucuların (Elementor, WPBakery) eklediği gereksiz script yüklerini geciktirin (Defer) veya Async olarak çağırın.

INP Performansınızı Nasıl Ölçersiniz?

Sorunu çözmeden önce onu doğru tespit etmelisiniz. INP ölçümü için kullanmanız gereken araç cephaneliği şöyledir:

• Google Search Console (Önemli Web Verileri Sekmesi): Gerçek kullanıcı verilerini (CrUX) kullanarak hangi URL gruplarınızın INP sorunu yaşadığını kuşbakışı gösterir.
• PageSpeed Insights: Mobil ve Masaüstü için sayfanızın 28 günlük gerçek kullanıcı INP ortalamasını verir.
• Chrome DevTools (Performance Sekmesi): Geliştiriciler için en iyi araçtır. Performans kaydı alarak “Long Tasks” (kırmızı çizgili barlar) tespit edilir ve gecikmenin hangi satırdaki koddan kaynaklandığı bulunur.
• Web Vitals Chrome Eklentisi: Sitenizde gezinirken her tıkladığınızda sağ üst köşede canlı olarak o tıklamanın INP skorunu ölçüp size gösterir. Hatalı butonları bulmak için mükemmeldir.