INP (Interaction to Next Paint) Nedir? Kapsamlı Optimizasyon Rehberi

Google'ın bir web sitesinin kullanıcı deneyimini ölçme felsefesi, sessiz ama köklü bir devrim yaşadı. Bu devrimi anlamak için basit bir müşteri hizmetleri analojisi kullanalım. Yakın zamana kadar sahnede olan metrik FID (First Input Delay), bir mağazaya girdiğinizde size ne kadar hızlı "Hoş geldiniz!" dendiğini ölçmek gibiydi. Sadece o ilk etkileşimin, o ilk izlenimin hızına odaklanırdı. Önemliydi, evet; ama hikayenin sadece başlangıcıydı.

Mart 2024 itibarıyla Core Web Vitals ailesinin yeni ve kalıcı üyesi olan INP (Interaction to Next Paint) ise, mağazanın içindeki tüm sohbetinizin kalitesini ölçer. INP, bir ürün hakkında soru sorduğunuzda, bir reyonu işaret ettiğinizde, sepetinize bir ürün eklediğinizde veya ödeme yapmaya çalıştığınızda, yani her etkileşiminizde size ne kadar hızlı ve tutarlı bir şekilde yanıt verildiğini analiz eder.

Bu değişim, bir teknoloji lideri olarak bizim için son derece anlamlı bir mesaj taşıyor: Google, artık sadece anlık bir ilk izlenime değil, kullanıcının sayfa üzerindeki tüm yolculuğu boyunca yaşadığı tepkisellik deneyiminin tamamına odaklanıyor. Yavaş bir filtreleme menüsü, gecikmeli bir mobil menü açılışı veya takılan bir "sepete ekle" butonu artık sadece birer kullanıcı şikayeti değil, aynı zamanda sitenizin sıralamasını doğrudan etkileyen temel bir sıralama sinyalidir.

Bu kapsamlı rehberde, "Solviera Teknoloji" olarak INP'nin ne olduğunu, neden bu kadar kritik olduğunu ve en önemlisi, bu yeni metriği optimize ederek sitenizi kullanıcılarınız için nasıl kusursuz derecede akıcı hale getirebileceğinizi en ince teknik detaylarıyla anlatacağız. Bu, sadece bir metriği iyileştirme kılavuzu değil, aynı zamanda daha düşünceli ve kullanıcı odaklı web uygulamaları geliştirme manifestosudur.

INP'nin Anatomisi: Bir Etkileşimin Üç Kritik Aşaması

INP, bir kullanıcının yaptığı bir eylemin (tıklama, dokunma, tuşa basma) sonucunda ekranda bir sonraki görsel değişikliğin (Next Paint) ne kadar sürede gerçekleştiğini ölçer. Google, bir sayfa ziyareti boyunca gerçekleşen tüm etkileşimleri gözlemler ve genellikle en yavaş olan etkileşimlerden birini (tam olarak 98. yüzdelik dilimdeki) sayfanın INP skoru olarak raporlar. Bu da demektir ki, sayfanızdaki tek bir yavaş çalışan fonksiyon bile tüm sayfanın INP skorunu mahvedebilir.

Bir INP skorunu "iyi" olarak kabul etmek için hedeflenmesi gereken süre 200 milisaniyenin altıdır. 500 milisaniyenin üzerindeki değerler ise "zayıf" olarak kabul edilir ve acil müdahale gerektirir.

Peki, bir tıklama anı ile görsel sonuç arasındaki bu süreyi oluşturan nedir? INP, üç kritik fazın toplamıdır:

1. Girdi Gecikmesi (Input Delay): Bu, kullanıcının ekrana dokunması veya tıklaması ile bu etkileşimi yönetecek olan JavaScript kodunun (event handler) çalışmaya başlaması arasında geçen süredir. Bu gecikmenin neredeyse tek bir sebebi vardır: Ana İş Parçacığı'nın (Main Thread) meşgul olması. Tarayıcının ana iş parçacığı, JavaScript'i çalıştıran, stilleri hesaplayan, düzeni (layout) oluşturan ve sayfayı boyayan (paint) yerdir. Eğer bu iş parçacığı o anda başka bir uzun JavaScript göreviyle (örneğin, büyük bir veri setini işlemek veya karmaşık bir bileşeni render etmek) meşgulse, kullanıcının yeni girdisine hemen yanıt veremez. Kullanıcı tıklar, ancak tarayıcı "bir saniye, şu an başka bir işle meşgulüm" der. İşte bu bekleme süresi, Girdi Gecikmesi'dir ve genellikle INP sorunlarının en büyük kaynağıdır.
2. İşlem Süresi (Processing Time): Ana iş parçacığı nihayet kullanıcı girdisini ele almaya hazır olduğunda, bu etkileşime bağlı olan JavaScript kodunun (event handler'lar) çalışıp bitmesi için geçen süredir. Örneğin, bir "Filtrele" butonuna tıklandığında, yüzlerce ürünü daraltan, sıralayan ve yeni bir liste oluşturan kodun çalışma süresi bu faza aittir. Verimsiz yazılmış, optimize edilmemiş algoritmalar veya gereksiz yere karmaşık işlemler bu süreyi uzatabilir.
3. Sunum Gecikmesi (Presentation Delay): Etkileşimi yöneten JavaScript kodu çalışmasını bitirdikten sonra, tarayıcının bu değişiklikleri ekranda görsel olarak yansıtması için gereken süredir. Bu faz, yeni DOM (Document Object Model) yapısını hesaplamayı, stilleri uygulamayı (style calculation), düzeni yeniden oluşturmayı (layout) ve nihayet pikselleri ekrana çizmeyi (paint) içerir. Çok büyük ve karmaşık bir DOM ağacı, bu sürenin uzamasına neden olabilir. Örneğin, bir filtreleme işlemi sonucunda binlerce DOM elementini aynı anda değiştirmek, sunum gecikmesini artırır.

INP = Girdi Gecikmesi + İşlem Süresi + Sunum Gecikmesi. Bu denklemi anlamak, sorunun kaynağını doğru teşhis etmek ve doğru çözümü uygulamak için mutlak bir ön koşuldur.

INP Sorunlarını Teşhis Etme: Alan ve Laboratuvar Araçları

INP optimizasyonu, bir doktorun hastasını tedavi etmesine benzer: Önce semptomları dinler (Saha Verisi), sonra teşhis için testler yapar (Laboratuvar Verisi).

1. Saha Verisi (Gerçek Kullanıcı Verisi - "Field Data"): Nerede Ağrı Var?

Saha verisi, gerçek kullanıcılarınızın sitenizde gezinirken deneyimlediği performansı yansıtan veridir. Bu, mutlak gerçektir ve optimizasyon çabalarınız için kuzey yıldızınız olmalıdır.

• Google Search Console: İlk durağınız burası olmalı. Search Console'daki "Önemli Web Verileri" (Core Web Vitals) raporu, Google'ın sitenizdeki URL'leri INP performansına göre "İyi", "İyileştirme Gerekiyor" ve "Zayıf" olarak nasıl gruplandırdığını size net bir şekilde gösterir. Bu rapor, hangi sayfa şablonlarının (örneğin, ürün detay sayfaları, kategori sayfaları) en çok sorun yaşadığını belirlemenizi sağlar. Size "Nerede?" sorusunun cevabını verir ama "Neden?" sorusunu cevaplamaz.
• PageSpeed Insights: Bir URL'yi PageSpeed Insights'ta test ettiğinizde, sayfanın en üstünde "Gerçek kullanıcılarınızın deneyimlediği veriler" başlığı altında o sayfanın INP skorunu (eğer yeterli veri varsa) görebilirsiniz. Bu, belirli bir sayfanın performansını doğrulamak için harikadır.

2. Laboratuvar Verisi (Hata Ayıklama - "Lab Data"): Ağrının Sebebi Ne?

Hangi sayfaların yavaş olduğunu öğrendikten sonra, şimdi bu yavaşlığa neyin sebep olduğunu bulma zamanı. Laboratuvar araçları, kontrollü bir ortamda performansı simüle ederek sorunun kökenine inmemizi sağlar.

• PageSpeed Insights (Teşhis Bölümü): Saha verisinin altında yer alan laboratuvar testi sonuçları, özellikle "Ana iş parçacığı çalışmasını en aza indir" ve "JavaScript yürütme süresini azalt" gibi önerilerle potansiyel sorun kaynaklarına işaret eder. Genellikle en uzun süre çalışan JavaScript dosyalarını ve görevlerini listeler.
• Chrome DevTools (Performans Paneli): Bu, INP optimizasyonunun ameliyathanesidir. Bir geliştiricinin en güçlü müttefikidir. Sorunlu bir etkileşimi analiz etmek için izlemeniz gereken adımlar şunlardır:

1. INP sorunu yaşadığınız sayfayı Chrome'da açın ve Geliştirici Araçları'nı (F12 veya Ctrl+Shift+I) açın.
2. "Performance" (Performans) paneline gidin.
3. Panelin sol üst köşesindeki kayıt düğmesine (⚫) basın.
4. Sayfada yavaş olduğunu bildiğiniz etkileşimi gerçekleştirin (örneğin, mobil menüye tıklayın, bir filtreyi seçin).
5. Kaydı durdurun.
6. Karşınıza çıkan zaman çizelgesinde (timeline), "Main" (Ana) etiketli satıra odaklanın. Bu, ana iş parçacığının aktivitesini gösterir.
7. Bu satırda, sağ üst köşesinde kırmızı bir üçgen olan görevleri arayın. Bunlar "Uzun Görevler"dir (Long Tasks). Bir Long Task, 50 milisaniyeden daha uzun süren herhangi bir görevdir ve ana iş parçacığını bloke ederek INP'ye neden olan en yaygın suçludur.
8. Bir Uzun Görevin üzerine tıkladığınızda, alttaki "Bottom-Up" veya "Call Tree" sekmeleri, o görev sırasında en çok zaman harcayan JavaScript fonksiyonlarını size gösterecektir. Bu analiz, sizi doğrudan yavaşlığa neden olan kod bloğuna götürür.

Bu teşhis araçlarını ustaca kullanmak, karanlıkta ateş etmek yerine, sorunu bir cerrah hassasiyetiyle tespit edip ortadan kaldırmanızı sağlar.

INP Optimizasyon Oyun Kitabı: Sorunları Kökünden Çözme

Teşhisi koyduktan sonra tedaviye geçebiliriz. Optimizasyon stratejilerimizi, INP'nin üç fazına göre kategorize ederek ele alacağız.

1. Girdi Gecikmesini Azaltma (Ana İş Parçacığına Nefes Aldırma)

Bu, INP optimizasyonunun en kritik ve en etkili adımıdır. Girdi gecikmesini azaltmanın tek bir yolu vardır: Ana iş parçacığını bloke eden Uzun Görevlerden (Long Tasks) kaçınmak. Eğer kaçınamıyorsanız, onları daha küçük parçalara bölerek ana iş parçacığının diğer görevlere (kullanıcı etkileşimleri gibi) yanıt verebilmesi için "nefes alma" aralıkları yaratmalısınız.

Teknik: Uzun Görevleri Bölme (Task Splitting)

Bir fonksiyonun 500ms boyunca çalıştığını hayal edin. Bu süre boyunca kullanıcı bir butona tıklarsa, tarayıcı bu tıklamaya en az 500ms sonra yanıt verebilir, bu da felaket bir INP skoru demektir. Çözüm, bu 500ms'lik görevi, her biri 30-40ms süren 10'dan fazla küçük göreve bölmektir. Her küçük görevden sonra, ana iş parçacığı serbest kalır ve bekleyen kullanıcı etkileşimlerine yanıt verebilir.

Örnek Senaryo (Önce): Binlerce ürünü filtreleyen tek bir monolitik fonksiyon.

JavaScript

function filterProducts() {
  // Bu döngü çok uzun sürüyor ve ana iş parçacığını 500ms boyunca kilitliyor.
  const allProducts = getThousandsOfProducts(); 
  const filtered = allProducts.filter(product => meetsCriteria(product));
  renderProducts(filtered); // DOM güncellemesi de zaman alıyor.
}document.getElementById('filter-button').addEventListener('click', filterProducts);

Çözüm Yöntemi 1: setTimeout ile Manuel Erteleme (Klasik Yöntem)

En temel yöntem, görevin bir kısmını setTimeout ile sıranın sonuna ertelemektir. setTimeout(fn, 0) çağırmak, görevi hemen çalıştırmaz; bunun yerine tarayıcıya "bu fonksiyonu, şu anki işin bittikten ve bekleyen diğer önemli görevlerden (kullanıcı girdileri gibi) sonra çalıştır" der.

JavaScript

function processChunk(products, index = 0) {
  const chunkSize = 100; // Her seferinde 100 ürünü işle
  const chunk = products.slice(index, index + chunkSize);

  const filteredChunk = chunk.filter(product => meetsCriteria(product));
  renderProducts(filteredChunk, true); // (append=true) ile ekleyerek render et

  if (index + chunkSize < products.length) {
    // Ana iş parçacığına nefes alması için bir sonraki parçayı ertele
    setTimeout(() => processChunk(products, index + chunkSize), 0);
  }
}document.getElementById('filter-button').addEventListener('click', () => {
  const allProducts = getThousandsOfProducts();
  clearPreviousResults();
  processChunk(allProducts);
});

Bu yöntem işe yarar, ancak görev önceliklendirmesi üzerinde hiçbir kontrol sunmaz.

Çözüm Yöntemi 2: scheduler.postTask() ile Modern ve Öncelikli Erteleme (Önerilen Yöntem)

scheduler.postTask() API'si, görevleri farklı öncelik seviyeleriyle zamanlamak için tasarlanmış modern bir çözümdür. Bu, tarayıcıya hangi işin daha önemli olduğunu söylememizi sağlar.

• 'user-blocking': En yüksek öncelik. Kullanıcının doğrudan etkileşimde olduğu görevler (örneğin, bir metin kutusuna yazarken anında geri bildirim). INP için kritiktir.
• 'user-visible': Orta öncelik. Kullanıcının görmesi gereken ancak anında olması gerekmeyen işler (örneğin, bir resmin veya veri grafiğinin render edilmesi).
• 'background': Düşük öncelik. Arka planda çalışan, kullanıcının doğrudan görmediği işler (örneğin, log gönderme, veri senkronizasyonu).

Örnek Senaryo (scheduler.postTask ile):

JavaScript

async function filterAndRenderProducts() {
  const allProducts = getThousandsOfProducts();
  clearPreviousResults();
  
  // Önce bir yükleme göstergesi göster (yüksek öncelik)
  await scheduler.postTask(() => {
    showLoadingIndicator();
  }, { priority: 'user-blocking' });

  // Ürünleri işleme görevini daha düşük öncelikli parçalara ayır
  for (let i = 0; i < allProducts.length; i += 100) {
    const chunk = allProducts.slice(i, i + 100);
    
    await scheduler.postTask(() => {
      const filteredChunk = chunk.filter(product => meetsCriteria(product));
      renderProducts(filteredChunk, true);
    }, { priority: 'user-visible' }); // 'user-visible' daha uygun olabilir
  }

  // Son olarak yükleme göstergesini kaldır (yüksek öncelik)
  await scheduler.postTask(() => {
    hideLoadingIndicator();
  }, { priority: 'user-blocking' });
}document.getElementById('filter-button').addEventListener('click', filterAndRenderProducts);

Bu yaklaşım, tarayıcıya görevlerin önemi hakkında net sinyaller vererek çok daha akıllı bir optimizasyon sağlar.

2. İşlem Süresini Azaltma (Verimli Kod Yazma)

Etkileşim kodunuz çalışmaya başladığında, bunu olabildiğince hızlı yapmalıdır.

• Olayları Azaltma (Debounce ve Throttle): scroll, mousemove veya resize gibi saniyede onlarca kez tetiklenebilen olaylar için, olay işleyici fonksiyonunuzu her seferinde çalıştırmak felakettir.
• Throttling: Bir fonksiyonun belirli bir zaman aralığında en fazla bir kez çalışmasını sağlar (örneğin, her 200ms'de bir). Kaydırma sırasında pozisyon hesaplamak için idealdir.
• Debouncing: Bir olay tetiklenmeyi bıraktıktan sonra belirli bir süre bekler ve fonksiyonu yalnızca bir kez çalıştırır. Arama kutusuna yazarken otomatik tamamlama önerileri getirmek için idealdir (kullanıcı yazmayı bitirdikten sonra arama yapılır).
• Olay İşleyicilerini (Event Handlers) Kısa Tutun: Olay işleyici fonksiyonunuz sadece yapması gereken en temel işi yapmalıdır. Karmaşık mantığı, scheduler.postTask veya setTimeout kullanarak erteleyin.
• Layout Thrashing'den Kaçının: Bu, bir döngü içinde DOM'dan sürekli olarak stil/geometri bilgisi okumak (örn. element.offsetHeight) ve hemen ardından DOM'a yazmak (örn. element.style.width = ...) durumunda ortaya çıkan bir performans katilidir. Tarayıcı, her döngü adımında sayfayı yeniden hesaplamak zorunda kalır. Çözüm: Önce tüm okumaları yapın, sonra tüm yazmaları yapın.

3. Sunum Gecikmesini Azaltma (Render'ı Basitleştirme)

JavaScript işini bitirdikten sonra, tarayıcının sonucu ekrana hızlıca çizebilmesi gerekir.

• DOM Ağacını Basit Tutun: Bir sayfada ne kadar az DOM elementi varsa, stil ve düzen hesaplamaları o kadar hızlı olur. Gereksiz <div> sarmalayıcılarından kaçının ve modern CSS düzen tekniklerini (Flexbox, Grid) kullanarak daha düz bir HTML yapısı hedefleyin.
• content-visibility: auto Kullanın: Bu CSS özelliği, bir element ekranın görüntü alanının (viewport) dışındaysa, tarayıcının o elementin içeriğini render etmeyi atlamasını sağlar. Özellikle çok uzun ürün listeleri, yorum bölümleri veya makaleler için inanılmaz derecede etkilidir. Kullanıcı sayfayı aşağı kaydırdıkça, tarayıcı içeriği tam zamanında render eder.

Solviera'dan Bir INP Vaka Analizi (Deneyim Notu)

Yakın zamanda, büyük bir moda perakendecisi olan bir e-ticaret müşterimiz, kategori sayfalarındaki filtreleme panelinin yavaşlığından şikayetçiydi. Kullanıcı bir renk veya beden filtresi seçtiğinde, ürün listesinin güncellenmesi gözle görülür şekilde takılıyordu. Yaptığımız analiz, bu etkileşimlerin ortalama 450ms gibi çok yüksek bir INP skoruna neden olduğunu gösterdi. Bu, Google Search Console'da ilgili URL'lerin "Zayıf" olarak etiketlenmesine yol açmıştı.

Teşhis: Chrome DevTools'un Performans panelini kullanarak sorunun kökenine indik. Analizimiz, her filtre seçiminde tetiklenen tek bir JavaScript fonksiyonunun, tüm ürün verisini yeniden filtreleme, sıralama ve DOM'u yeniden oluşturma işlemlerini tek bir "uzun görev" (long task) olarak yürüttüğünü net bir şekilde gösterdi. Bu görev ana iş parçacığını yaklaşık 400ms boyunca kilitliyor, bu da hem girdi gecikmesine hem de uzun bir işlem süresine neden oluyordu.

Çözümümüz: İşte bu noktada Solviera Teknoloji'nin terzi işi çözümleri devreye girdi. Tek ve büyük görevi parçalamak için modern scheduler.postTask API'sini kullandık. Stratejimiz şuydu:

• Kullanıcı bir filtreye tıkladığı anda, 'user-blocking' önceliğiyle anında bir "Yükleniyor..." göstergesi gösterdik. Bu, anında geri bildirim sağladı.
• Asıl filtreleme ve DOM güncelleme mantığını, 'user-visible' önceliğiyle daha küçük, yönetilebilir parçalara ayırdık. Her bir parça işlendikten sonra ana iş parçacığına nefes alma imkanı tanıdık.
• Tüm işlemler bittiğinde, yine 'user-blocking' önceliğiyle yükleme göstergesini kaldırdık.

Sonuç: Bu stratejik görev bölme optimizasyonu, inanılmaz sonuçlar verdi. Sayfanın ortalama INP skorunu 450ms'den 75ms'ye düşürdük. Kullanıcı deneyimindeki akıcılık ve tepkisellik anında hissedilir hale geldi. En önemlisi, bu iyileştirmeyi yayınladıktan sonra müşterimizin Google Search Console'daki "zayıf URL" uyarısı bir hafta içinde tamamen ortadan kalktı. Bu, doğru teşhis ve modern tekniklerle INP'nin nasıl fethedilebileceğinin canlı bir kanıtıydı.

Sonuç: Tepkisellik Bir An Değil, Bir Yolculuktur

INP'nin Core Web Vitals'a dahil edilmesi, bir metrik değişikliğinden çok daha fazlasıdır; bu, Google'ın web performansına olan bakış açısındaki felsefi bir olgunlaşmanın kanıtıdır. Artık bir sitenin sadece hızlı açılması yeterli değil; ziyaretin her anında, her tıklamada, her etkileşimde hızlı ve tepkisel kalması gerekiyor.

INP'de ustalaşmak, düşünceli ve verimli JavaScript yazmak, tarayıcının en değerli ve tek kaynağı olan ana iş parçacığına her zaman saygı duymak anlamına gelir. Uzun görevleri bölmek, olayları akıllıca yönetmek ve render yükünü hafifletmek, sadece bir metriği iyileştirmekle kalmaz, aynı zamanda kullanıcının sitenizle olan diyaloğunu daha keyifli, akıcı ve verimli hale getirir. Unutmayın, iyi bir ilk izlenim önemlidir, ancak sadakati ve güveni inşa eden, yolculuğun tamamında gösterilen tutarlı performanstır.

Web Performansı Uzmanlığınızı Derinleştirin

Bu rehber, web performansı bulmacasının önemli bir parçasını ele alıyor. Şimdi, bir web sitesini ışık hızına çıkaran diğer tüm kritik alanlara odaklanarak bilginizi tamamlayın:

• Kritik Rendering Yolu (CRP) Optimizasyonu: Tarayıcının sayfanızı nasıl oluşturduğunu anlayın ve FCP ile LCP skorlarınızı iyileştirerek ilk açılışı hızlandırın.
• İleri Düzey Resim Optimizasyonu: Sitenizin en ağır parçaları olan resimleri WebP, AVIF gibi modern formatlar ve "lazy loading" ile optimize edin.
• Web Font Optimizasyonu: Marka kimliğinizin bir parçası olan fontların, CLS, FOUT ve FOIT gibi sorunlara yol açmasını engelleyin.
• Üçüncü Parti Script'ler ve Site Hızı: Performans katili olan dış kaynaklı kodları nasıl teşhis edeceğinizi ve yöneteceğinizi öğrenin.
• JavaScript Optimizasyonu Rehberi: INP ve TBT skorlarınızı doğrudan etkileyen verimsiz JavaScript kodlarını nasıl avlayacağınızı ve düzelteceğinizi öğrenin.
• Algılanan Performans: Sitenizi teknik olarak yavaşken bile kullanıcılarınıza nasıl "ışık hızında" hissettireceğinizin psikolojik sırlarını keşfedin.
• INP (Interaction to Next Paint) Rehberi: Sitenizin etkileşim hızını ölçen bu yeni ve kritik Core Web Vitals metriğinde nasıl ustalaşacağınızı öğrenin.
• Ana WPO Rehberi: Performans optimizasyonunun tüm yönlerini bir arada görmek ve büyük resmi anlamak için ana kılavuzumuza geri dönün.

İşletmenizi Bir Sonraki Seviyeye Taşımaya Hazır Mısınız?

Solviera'nın bütünsel teknoloji çözümleri hakkında daha fazla bilgi almak ve işletmenize özel bir analiz için proje danışmanlarımızla bugün iletişime geçin!

Hemen İletişime Geçin