Core Web Vitals INP (Interaction to Next Paint) Skoru 200ms Altına Nasıl İndirilir?

1. Giriş ve Karşılaşılan Temel Zorluklar

Kullanıcı bir butona bastığında veya menüyü açtığında, ana iş parçacığını (Main Thread) kilitleyen uzun süreli JavaScript kodları (Long Tasks) sayfanın donmasına ve INP puanının kırmızıya düşmesine yol açar.

Modern kurumsal yazılım mimarisinde bu adımı doğru tasarlamak; hem uygulamanın bakım maliyetini (maintainability) düşürür hem de gelecekteki ölçekleme (scaling) süreçlerinde refactor ihtiyacını en aza indirir. Bu rehberde, sektörde kabul görmüş standartlar ışığında adım adım uygulamayı ele alıyoruz.

2. Ortam Hazırlığı ve Gerekli Bağımlılıklar

Geliştirmeye başlamadan önce sistem ortamınızın ve ilgili paketlerin hazır olduğundan emin olmalısınız. Terminalinizde aşağıdaki komutları çalıştırarak ilgili yapılandırmayı tamamlayın:

• Adım: Chrome DevTools Performance sekmesini açın ve 4x CPU Throttling seçin.
• Adım: Etkileşim sırasındaki 'Long Task'ları (50ms üzerindeki görevleri) tespit edin.

3. Uygulama Mimarisi ve Kod Örneği

Aşağıdaki kod bloğunda, temiz kod (Clean Code) prensiplerine ve SOLID standartlarına uygun olarak tasarlanmış örnek implementasyonu inceleyebilirsiniz:

// KÖTÜ YAKLAŞIM: Ana thread'i kilitleyen ağır döngü
function handleHeavyFilter(items) {
  // 50.000 elemanı tek seferde işleyip DOM'u güncellemek ekranı dondurur
  const filtered = items.filter(complexCalculation);
  updateDOM(filtered);
}

// İYİ YAKLAŞIM: Görevleri parçalama (Yield to Main Thread)
async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleHeavyFilterOptimized(items) {
  // 1. Kullanıcıya hemen görsel geri bildirim ver
  showLoadingSpinner();
  await yieldToMain();

  // 2. Ağır hesaplamayı parçalar halinde yürüt
  const chunkSize = 5000;
  let results = [];
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    results.push(...chunk.filter(complexCalculation));
    await yieldToMain(); // Tarayıcının nefes almasına ve arayüzü çizmesine izin ver
  }

  updateDOM(results);
}

4. Kod Analizi ve Çalışma Mantığı

yieldToMain fonksiyonu sayesinde JavaScript motoru uzun görevleri mikro parçalara böler. Tarayıcı kullanıcı girdilerine ve CSS çizimlerine anında yanıt verebilir; INP skoru 200ms'nin altına iner.

Yukarıdaki implementasyonda dikkat edilmesi gereken en kritik husus, işlemlerin bağımsız (decoupled) ve test edilebilir şekilde katmanlara ayrılmış olmasıdır. Bu yaklaşım, birim testlerin (Unit Tests) ve entegrasyon testlerinin hızlıca yazılabilmesine olanak tanır.

5. Performans ve Güvenlik İpuçları

Canlı üretim (production) ortamında sistemin kararlı çalışması için aşağıdaki pratikleri mutlaka dikkate almalısınız:

• Tarayıcıda henüz standartlaşan 'scheduler.yield()' API'sini kontrol edin.
• Gereksiz üçüncü parti analitik ve izleme kodlarını 'requestIdleCallback' ile erteleyin.
• Ağır CSS animasyonlarında 'layout' ve 'paint' tetikleyen özellikler yerine 'transform' ve 'opacity' kullanın.

6. En Sık Yapılan Hatalar ve Hata Ayıklama (Troubleshooting)

Kullanıcı tıklama olayında senkron olarak binlerce DOM düğümü oluşturmak doğrudan 500ms+ INP cezasına sebep olur.

Eğer beklenmedik bir hata ile karşılaşırsanız; öncelikle log dosyalarını incelemeli, ortam değişkenlerinin (.env) doğru tanımlandığını doğrulamalı ve önbellek (cache) mekanizmalarını temizleyerek sistemi yeniden başlatmalısınız.

7. Sonuç ve Mimari Değerlendirme

INP optimizasyonu, Google sıralama sinyallerinde doğrudan yükseliş sağlayan teknik bir zorunluluktur.

Cengiz Bozdemir olarak 18 yılı aşkın kurumsal yazılım mimarlığı deneyimimle tavsiyem; sistem tasarımında her zaman sürdürülebilirlik, güvenlik ve yüksek eşzamanlılık (high concurrency) hedeflerini ön planda tutmanızdır. Kurumsal projelerinizde özel mimari danışmanlık veya uçtan uca yazılım geliştirme desteği için bizimle iletişime geçebilirsiniz.