Web Sitelerinde INP (Interaction to Next Paint) Skoru Nasıl Düzeltilir?

Web sitelerinde INP skoru nasıl düzeltilir? Kısa cevap: Kullanıcının tıklama, dokunma veya klavye etkileşiminden sonra ekranda görünen bir sonraki boyamayı geciktiren ana iş parçacığı yüklerini azaltmanız gerekir. Bunun için uzun JavaScript görevlerini bölmeli, gereksiz scriptleri kaldırmalı, olay dinleyicilerini hafifletmeli, render engelleyen kaynakları optimize etmeli, üçüncü taraf kodlarını kontrol etmeli ve gerçek kullanıcı verileriyle ölçüm yapmalısınız. İyi bir INP skoru 200 ms veya altıdır; 200-500 ms arası iyileştirme ister, 500 ms üzeri ise zayıf kabul edilir.

INP, yani Interaction to Next Paint, 2026 SEO ve kullanıcı deneyimi çalışmalarında kritik Core Web Vitals metriklerinden biridir. Google artık yalnızca sayfanın hızlı açılmasına değil, sayfa açıldıktan sonra kullanıcının siteyle ne kadar akıcı etkileşim kurabildiğine de bakar. Bir ürün filtresine tıklandığında menünün geç açılması, sepete ekle butonunun donuk kalması, mobil menünün geç tepki vermesi veya form alanının yazarken takılması INP problemlerinin tipik işaretleridir.

Bu rehberde INP değerini ölçmeyi, kötü skora neden olan teknik darboğazları bulmayı ve geliştirici, site sahibi veya WordPress yöneticisi olarak uygulayabileceğiniz net optimizasyon adımlarını öğreneceksiniz. Ayrıca hosting altyapısının, CDN kullanımının ve güvenli bağlantının performansa dolaylı etkilerini de pratik örneklerle ele alacağız. Performans odaklı bir altyapı seçmek istiyorsanız Web hosting paketleri ve WordPress tabanlı projeler için WordPress hosting seçeneklerini değerlendirebilirsiniz.

INP Nedir ve Neden Önemlidir?

INP, bir sayfadaki kullanıcı etkileşimlerinin genel yanıt verme hızını ölçer. Kullanıcı bir butona tıklar, sekme değiştirir, menü açar, form alanına yazar veya mobilde bir öğeye dokunur. Tarayıcı bu etkileşimi işler, JavaScript çalıştırır, stil ve layout hesaplamaları yapar ve ardından ekranda yeni bir görsel durum oluşturur. İşte etkileşimden bu görsel güncellemeye kadar geçen süre INP açısından değerlendirilir.

Önceki yıllarda First Input Delay, yani FID, önemliydi; ancak FID yalnızca ilk etkileşimin gecikmesine odaklanıyordu. INP ise sayfanın tüm yaşam döngüsündeki etkileşimleri daha kapsamlı değerlendirir. Bu nedenle e-ticaret, blog, SaaS paneli, kurumsal site ve üyelik sistemlerinde gerçek kullanıcı deneyimini daha iyi temsil eder.

Google’ın önerdiği eşikler şöyledir:

INP yalnızca SEO için değil, dönüşüm oranı için de önemlidir. Örneğin mobilde filtre butonu 700 ms geç açılan bir kategori sayfasında kullanıcı, işlemin çalışmadığını düşünerek aynı butona tekrar basabilir veya sayfadan çıkabilir. Buna karşılık 150-180 ms seviyesinde tepki veren arayüzler daha güvenilir, hızlı ve profesyonel algılanır.

INP Skoru Nasıl Ölçülür?

INP optimizasyonuna başlamadan önce doğru ölçüm yapmak gerekir. Çünkü laboratuvar araçları size tahmini sorunları gösterirken, gerçek kullanıcı verileri sahadaki cihaz, bağlantı ve tarayıcı koşullarını yansıtır. En sağlıklı yaklaşım iki veri tipini birlikte kullanmaktır.

1. PageSpeed Insights ile hızlı kontrol yapın

PageSpeed Insights, Chrome User Experience Report verisi varsa gerçek kullanıcı INP değerini gösterir. Mobil ve masaüstü sonuçlarını ayrı inceleyin. Özellikle mobil veriyi önceliklendirin; çünkü düşük işlemcili telefonlarda ana iş parçacığı daha kolay tıkanır. Sayfanın INP değeri 200 ms üzerindeyse, aşağıdaki fırsat ve tanılama bölümlerini not alın.

2. Search Console Core Web Vitals raporunu izleyin

Google Search Console’daki Core Web Vitals raporu, URL gruplarına göre sorunları listeler. Burada tek bir sayfa yerine benzer şablonların problemli olup olmadığını görebilirsiniz. Örneğin tüm ürün detay sayfaları kötü INP alıyorsa, sorun büyük olasılıkla tema, sepet scripti, yorum eklentisi veya ürün varyasyon kodundadır.

3. Chrome DevTools Performance panelini kullanın

Chrome DevTools Performance paneli, tıklama anında hangi JavaScript fonksiyonlarının çalıştığını ve hangi görevlerin 50 ms üzerinde uzun görev oluşturduğunu gösterir. Bir menü tıklamasını kaydedip ana iş parçacığındaki mor, sarı ve yeşil blokları inceleyin. Uzun script çalışmaları, tekrar eden style recalculation işlemleri ve yoğun layout görevleri INP için kritik sinyallerdir.

4. Gerçek kullanıcı izleme kurun

Yüksek trafikli projelerde RUM, yani Real User Monitoring, kullanmak çok değerlidir. Web Vitals kütüphanesiyle INP verisini toplayabilir, URL, cihaz tipi, tarayıcı, ülke ve etkileşim hedefi bazında analiz edebilirsiniz. Örneğin veriler, yalnızca Android kullanıcılarında mobil menü tıklamasının 620 ms olduğunu gösterebilir. Bu bilgi, genel optimizasyon yerine nokta atışı düzeltme yapmanızı sağlar.

Kötü INP Skorunun En Yaygın Nedenleri

INP sorunlarının büyük bölümü sunucu yanıtından değil, tarayıcının kullanıcı etkileşimi anında fazla iş yapmasından kaynaklanır. Yine de altyapı, dosya teslimi, önbellek ve üçüncü taraf bağımlılıklar dolaylı olarak bu yükü artırabilir.

Ağır JavaScript dosyaları

Modern web sitelerinde tema, slider, canlı sohbet, reklam, analiz, A/B test, harita ve sosyal medya bileşenleri çok sayıda JavaScript dosyası yükler. Dosyalar yalnızca indirilmez; tarayıcı tarafından ayrıştırılır, derlenir ve çalıştırılır. Bu süreç ana iş parçacığını meşgul ederse kullanıcı tıklamasına geç cevap verilir.

Uzun görevler

50 ms’den uzun süren ana iş parçacığı işleri long task olarak değerlendirilir. 300 ms süren tek bir görev, kullanıcının tıklamasını bekletebilir. Örneğin filtreleme butonuna basıldığında 1000 ürünün tamamını istemci tarafında yeniden hesaplayan bir script, INP değerini kolayca 500 ms üzerine çıkarabilir.

Karmaşık DOM ve pahalı layout işlemleri

Çok fazla HTML düğümü, iç içe geçmiş bileşenler, sık stil değişimi ve layout thrashing denilen tekrar tekrar ölçüp yazma hatası INP’yi bozar. Özellikle mega menüler, ürün listeleme sayfaları ve uzun tek sayfa uygulamaları bu riski taşır.

Üçüncü taraf scriptler

Reklam ağları, izleme pikselleri, ısı haritası araçları, canlı destek kodları ve sosyal medya embedleri sitenizin kontrolü dışındaki kodları çalıştırır. Bu kodlar etkileşim anında ana iş parçacığını kullanıyorsa, sizin temiz yazdığınız arayüz bile geç tepki verebilir.

WordPress eklenti ve tema şişkinliği

WordPress sitelerde her eklenti kendi CSS ve JS dosyalarını ekleyebilir. Bir iletişim formu eklentisinin scripti yalnızca iletişim sayfasında gerekirken tüm sitede yükleniyorsa gereksiz yük oluşur. Benzer şekilde görsel editörler, sliderlar ve pop-up eklentileri mobil INP skorunu olumsuz etkileyebilir.

INP Skoru Nasıl Düzeltilir? Adım Adım Uygulama Planı

INP skoru nasıl düzeltilir sorusunun pratik yanıtı, ölç, izole et, azalt, böl ve tekrar ölç yaklaşımıdır. Aşağıdaki adımlar, teknik ekiplerin gerçek projelerde uyguladığı öncelik sırasına göre hazırlanmıştır.

1. En problemli etkileşimi bulun

Önce hangi etkileşimin kötü INP ürettiğini belirleyin. Mobil menü mü, sepete ekle butonu mu, filtre paneli mi, arama kutusu mu, yoksa form gönderimi mi? DevTools Performance kaydı alırken ilgili işlemi birkaç kez tekrarlayın. Kaydın içinde Event Timing veya Interaction bölümünde tıklama hedefini ve süreyi inceleyin.

Somut örnek: Bir e-ticaret sitesinde kategori filtre butonu 740 ms INP üretiyordu. İnceleme sonucunda butona basıldığında tüm ürün kartlarının yeniden render edildiği ve 1800 DOM düğümünün aynı anda güncellendiği görüldü. Filtre paneli ayrı bir bileşene taşınıp liste güncellemesi ertelenince INP 190 ms seviyesine indi.

2. JavaScript paket boyutunu azaltın

Kullanılmayan kodları kaldırmak INP için en etkili adımlardan biridir. Bundle analyzer kullanarak hangi kütüphanelerin dosyayı büyüttüğünü görün. Tüm bir kütüphaneyi almak yerine yalnızca gereken modülü içe aktarın. Örneğin büyük bir tarih kütüphanesi yerine daha hafif alternatifler veya yerel Intl API kullanılabilir.

• Kullanılmayan tema özelliklerini kapatın.
• Sayfada gerekmeyen slider, galeri ve animasyon scriptlerini yüklemeyin.
• Tree shaking destekleyen modern build araçları kullanın.
• Admin paneli kodlarını ziyaretçi tarafına göndermeyin.
• Eski polyfill dosyalarını yalnızca gerçekten ihtiyaç duyan tarayıcılara servis edin.

3. Uzun görevleri küçük parçalara bölün

Tarayıcının kullanıcı etkileşimlerine cevap verebilmesi için ana iş parçacığının düzenli aralıklarla boşalması gerekir. Büyük hesaplamaları tek seferde yapmak yerine parçalara ayırın. setTimeout, scheduler.postTask, requestIdleCallback veya frameworklerin zamanlama özellikleri bu amaçla kullanılabilir. Amaç, 300 ms süren tek bir iş yerine 20-40 ms’lik daha küçük işler oluşturmaktır.

Örneğin 5000 satırlık bir tabloyu filtrelemek ve yeniden çizmek gerekiyorsa, önce kullanıcının gördüğü ilk 50 satırı güncelleyin, kalanları sanallaştırma veya arka plan görevleriyle işleyin. Böylece kullanıcı tıklamasının sonucu hızlı görünür, kalan işlem deneyimi bloklamaz.

4. Olay dinleyicilerini sadeleştirin

Her click, input, scroll ve keydown olayında ağır fonksiyonlar çalıştırmak INP’yi bozar. Özellikle input alanlarında her tuş vuruşunda API isteği göndermek veya tüm listeyi yeniden hesaplamak hatalıdır. Debounce ve throttle tekniklerini kullanarak işlem sıklığını azaltın.

• Arama kutusunda 300 ms debounce uygulayın.
• Scroll olaylarında passive listener tercih edin.
• Tek tek yüzlerce öğeye listener eklemek yerine event delegation kullanın.
• Tıklama sonrası önce görsel geri bildirim verin, ağır işi sonra başlatın.

5. Kullanıcıya anında görsel geri bildirim verin

INP, bir sonraki paint ile ilişkili olduğu için kullanıcı etkileşiminden hemen sonra küçük de olsa bir görsel değişiklik oluşturmak önemlidir. Butonun aktif duruma geçmesi, yükleniyor göstergesi, skeleton alanı veya panel açılışının ilk karesi kullanıcıya sistemin çalıştığını hissettirir. Ağır API yanıtını bekleyip tüm arayüzü bir anda değiştirmek yerine, hızlı geri bildirim ve kademeli güncelleme tasarlayın.

6. Render ve layout maliyetini azaltın

JavaScript kadar CSS ve layout da INP üzerinde etkilidir. Bir tıklama sonrası çok sayıda öğenin boyutunu, konumunu ve stilini değiştirmek pahalıdır. CSS animasyonlarında width, height, top ve left yerine transform ve opacity kullanmak genellikle daha performanslıdır. Büyük listelerde sanallaştırma kullanın; ekranda görünmeyen yüzlerce kartı DOM’da tutmayın.

Layout thrashing hatasından kaçının. Yani bir döngü içinde önce element genişliğini okuyup sonra stil yazıp sonra tekrar okuma yapmayın. Okuma ve yazma işlemlerini gruplayın. Bu basit düzenleme bile karmaşık sayfalarda onlarca milisaniye kazandırabilir.

7. Üçüncü taraf kodlarını denetleyin

Her harici script için şu soruyu sorun: Bu kod dönüşüme doğrudan katkı sağlıyor mu? Eğer katkısı düşükse kaldırın, geciktirin veya yalnızca gerekli sayfalarda yükleyin. Canlı destek kodunu ödeme sayfasında tutmak mantıklı olabilir; ancak tüm blog yazılarında ilk yüklemede çalışması gerekmeyebilir. Reklam ve analiz scriptlerini mümkünse defer veya async ile yükleyin, kritik etkileşimlerin önüne geçmelerini engelleyin.

8. Web Worker kullanarak ağır hesaplamaları taşıyın

Ürün filtreleme, büyük JSON işleme, şifreleme, veri dönüştürme veya karmaşık hesaplama gibi işler ana iş parçacığını kilitliyorsa Web Worker kullanın. Worker, bu işleri arka planda yapar; ana iş parçacığı ise kullanıcı etkileşimlerine cevap vermeye devam eder. Her iş Worker’a taşınmak zorunda değildir, ancak 100 ms üzerinde CPU tüketen işlemler için ciddi fayda sağlayabilir.

9. Framework ve hydration maliyetini optimize edin

React, Vue, Angular, Next.js veya Nuxt gibi yapılarda ilk yükleme sonrası hydration maliyeti INP’yi etkileyebilir. Tüm sayfayı etkileşimli hale getirmek yerine ada mimarisi, partial hydration veya server components gibi yaklaşımları değerlendirin. Etkileşim gerektirmeyen içerikleri statik bırakın. Modal, yorum alanı veya öneri bileşeni gibi parçaları kullanıcı ihtiyaç duyduğunda yüklemek daha iyi sonuç verir.

10. WordPress sitelerde eklenti yükünü azaltın

WordPress kullanıyorsanız, INP optimizasyonu için eklenti envanteri çıkarın. Aynı işi yapan birden fazla eklentiyi kaldırın. Form, galeri, slider ve pop-up eklentilerinin tüm sayfalarda dosya yükleyip yüklemediğini kontrol edin. Asset unload özellikli performans eklentileriyle gereksiz CSS ve JS dosyalarını sayfa bazında kapatabilirsiniz.

Örnek uygulama: Bir kurumsal WordPress sitesinde ana sayfa INP değeri mobilde 560 ms idi. Slider eklentisi kaldırılıp kahraman alanı hafif HTML/CSS ile yeniden yapıldı, pop-up scripti 5 saniye geciktirildi, iletişim formu JS dosyası yalnızca iletişim sayfasında yüklendi. Sonuçta mobil INP 210 ms’ye, sonraki küçük düzenlemelerle 175 ms’ye indi.

Hosting ve Altyapı INP Skorunu Nasıl Etkiler?

INP esas olarak istemci tarafı yanıt verme metriğidir; yani tarayıcıdaki ana iş parçacığı yükü belirleyicidir. Ancak hosting altyapısı tamamen ilgisiz değildir. Hızlı sunucu yanıtı, doğru önbellekleme, modern PHP sürümü, HTTP/2 veya HTTP/3 desteği, CDN ve sıkıştırma; dosyaların daha hızlı ve düzenli iletilmesini sağlar. Bu da özellikle ilk yükleme sırasında ana iş parçacığının daha kontrollü çalışmasına yardımcı olur.

Kalitesiz altyapıda yüksek TTFB, geç gelen kaynaklar, düzensiz cache davranışı ve yoğun sunucu yükü kullanıcı deneyimini bozar. Önbelleksiz bir WordPress sitesi her istekte ağır PHP ve veritabanı işlemleri yapıyorsa, sayfa daha geç etkileşime hazır hale gelir. Bu nedenle INP çalışmasını LCP ve TTFB optimizasyonlarından tamamen ayrı düşünmemek gerekir.

• Sunucu tarafı önbellekleme kullanın.
• PHP 8.x ve güncel veritabanı sürümlerini tercih edin.
• Statik dosyaları CDN üzerinden servis edin.
• Brotli veya Gzip sıkıştırmasını etkinleştirin.
• SSL/TLS yapılandırmasını güncel tutun; güvenli bağlantı için SSL sertifikası sayfasını inceleyin.
• Yeni proje veya marka sitesi kuruyorsanız doğru alan adı seçimi için Domain sorgulama aracını kullanın.

INP Optimizasyonu İçin Öncelik Tablosu

Aşağıdaki tablo, tipik bir web sitesinde hangi iyileştirmenin ne zaman yapılması gerektiğini özetler. Her projede sonuçlar farklı olabilir; bu yüzden değişiklik sonrası PageSpeed Insights, Search Console ve gerçek kullanıcı verileriyle yeniden ölçüm yapın.

Geliştiriciler İçin Teknik Kontrol Listesi

INP iyileştirmesi ekip içinde takip edilebilir bir kontrol listesine dönüştürülmelidir. Aksi halde tek seferlik hız çalışmaları birkaç ay sonra yeni eklentiler, kampanya kodları ve tasarım değişiklikleriyle bozulabilir.

• Her kritik şablon için mobil INP hedefi 200 ms altı olarak belirlenmeli.
• Pull request süreçlerinde bundle size artışı kontrol edilmeli.
• Yeni üçüncü taraf script eklenmeden önce performans etkisi test edilmeli.
• DevTools Performance kaydıyla en az mobil menü, arama, form ve satın alma etkileşimleri ölçülmeli.
• Uzun görevler 50 ms altına indirilmeye çalışılmalı; mümkün değilse parçalanmalı.
• Animasyonlarda transform ve opacity tercih edilmeli.
• Büyük listeler için pagination, infinite scroll veya virtualization kullanılmalı.
• RUM verileri aylık raporlanmalı ve Search Console uyarıları takip edilmeli.

Sık Yapılan INP Optimizasyon Hataları

Yalnızca cache eklentisi kurmak

Cache önemlidir, ancak kötü INP’nin tek çözümü değildir. Önbellek sayfanın daha hızlı teslim edilmesini sağlayabilir; fakat kullanıcı tıklamasında çalışan ağır JavaScript kodunu otomatik olarak düzeltmez. Bu nedenle cache, kod optimizasyonuyla birlikte düşünülmelidir.

Laboratuvar skoruna bakıp gerçek kullanıcıyı unutmak

Lighthouse testleri faydalıdır, ancak tek başına yeterli değildir. Gerçek kullanıcılar farklı cihazlar, ağlar ve tarayıcılarla gelir. Özellikle düşük segment Android cihazlar, masaüstü testlerde görünmeyen INP sorunlarını ortaya çıkarır.

Tüm scriptleri rastgele ertelemek

Defer ve delay teknikleri dikkatli uygulanmalıdır. Yanlış yapılandırma menü, sepet, form veya ödeme akışını bozabilir. Kritik etkileşim scriptleri korunmalı, gereksiz ve üçüncü taraf kodlar kontrollü şekilde ertelenmelidir.

Görsel performansa odaklanıp etkileşimi ihmal etmek

Görselleri sıkıştırmak LCP için çok değerlidir; ancak INP sorununu her zaman çözmez. Eğer problem tıklama sonrası çalışan koddaysa, görsel optimizasyonu tek başına yeterli olmayacaktır. Core Web Vitals bütüncül ele alınmalıdır.

2026 İçin INP Odaklı SEO Stratejisi

2026 SEO yaklaşımında teknik performans, içerik kalitesi ve güvenilir altyapı birlikte değerlendirilir. Google’ın AI Overviews ve gelişmiş arama deneyimleri, kullanıcıya en hızlı ve en tatmin edici yanıtı sunan sayfaları öne çıkarma eğilimindedir. Bu nedenle INP optimizasyonu yalnızca geliştirici işi değil, SEO, UX, içerik ve altyapı ekiplerinin ortak sorumluluğudur.

Bir blog yazısında içindekiler menüsü, kategori filtresi veya yorum formu hızlı çalışmalı; e-ticaret sitesinde beden seçimi, varyasyon değişimi ve sepete ekleme anında tepki vermelidir. Kurumsal sitelerde teklif formu, mobil menü ve iletişim butonları gecikmemelidir. Kullanıcı, siteyi hızlı hissederse daha uzun kalır, daha fazla sayfa gezer ve dönüşüm ihtimali artar.

Hostragons tarafında performans odaklı hosting, güncel sunucu teknolojileri ve güvenli altyapı tercih ederek teknik SEO çalışmalarınız için sağlam bir temel oluşturabilirsiniz. Alan adı, hosting ve güvenlik yapılandırmasını tek merkezden yönetmek operasyonel yükü azaltır; bu da ekibinizin kullanıcı deneyimi ve içerik kalitesine daha fazla odaklanmasını sağlar. İlgili çözümler için Kurumsal hosting, VPS sunucu ve SSL sertifikası sayfalarına göz atabilirsiniz.

Sonuç

INP skorunu düzeltmenin özü, kullanıcının etkileşim anında tarayıcıya gereksiz iş yaptırmamaktır. Önce gerçek verilerle en yavaş etkileşimleri bulun; ardından JavaScript yükünü azaltın, uzun görevleri bölün, olay dinleyicilerini sadeleştirin, render maliyetini düşürün ve üçüncü taraf kodları kontrol altına alın. Hosting, önbellek, CDN ve güncel güvenlik yapılandırmaları da bu süreci destekleyen güçlü bir temel sağlar.

Web sitenizi daha hızlı, güvenilir ve kullanıcı dostu hale getirmek istiyorsanız küçük bir ölçümle başlayın: En kritik sayfanızın mobil INP değerini kontrol edin ve bu rehberdeki ilk üç adımı uygulayın. Altyapı tarafında performanslı bir başlangıç yapmak için Hostragons çözümlerini inceleyebilir, ihtiyaçlarınıza uygun hosting planını sakin ve karşılaştırmalı şekilde değerlendirebilirsiniz.

Sıkça Sorulan Sorular

INP skoru kaç olmalı?

İyi bir INP skoru 200 ms veya altıdır. 200-500 ms arası geliştirilmesi gereken alanı, 500 ms üzeri ise zayıf kullanıcı deneyimini gösterir. Özellikle mobil kullanıcı verileri öncelikli değerlendirilmelidir.

INP ile FID arasındaki fark nedir?

FID yalnızca kullanıcının ilk etkileşimindeki gecikmeyi ölçerken, INP sayfanın yaşam döngüsü boyunca gerçekleşen etkileşimlerin yanıt verme kalitesini değerlendirir. Bu yüzden INP, gerçek kullanıcı deneyimini daha kapsamlı yansıtır.

WordPress sitelerde INP neden kötü çıkar?

Genellikle fazla eklenti, ağır tema, tüm sayfalarda yüklenen gereksiz CSS/JS, sliderlar, pop-up scriptleri ve üçüncü taraf kodlar nedeniyle kötü çıkar. Eklenti temizliği, sayfa bazlı dosya kapatma ve hafif tema kullanımı önemli iyileşme sağlar.

Hosting değiştirmek INP skorunu düzeltir mi?

Hosting tek başına ağır JavaScript veya uzun görevleri düzeltmez; ancak hızlı sunucu, iyi önbellek, CDN, güncel PHP ve kararlı kaynak teslimi INP optimizasyonunu destekler. Yani etkisi dolaylıdır ama özellikle WordPress sitelerde önemlidir.

INP optimizasyonu ne kadar sürede sonuç verir?

Kod ve eklenti düzeltmeleri yapıldıktan sonra laboratuvar testlerinde sonuç hemen görülebilir. Search Console ve Chrome gerçek kullanıcı verilerinde ise değişimin yansıması genellikle birkaç hafta sürebilir; çünkü yeterli kullanıcı verisinin toplanması gerekir.