Core Web Vitals 2026: INP Skoru Nasıl Düzeltilir?

Siteniz Neden Yavaş Hissettiriyor?

Bir butona tıklıyorsunuz. Hiçbir şey olmuyor. Yarım saniye sonra sayfa tepki veriyor.

Bu gecikme, kullanıcılarınızın %53'ünü kaybetmenize neden oluyor. Google'ın Mart 2024'te devreye aldığı INP (Interaction to Next Paint) metriği, tam olarak bu sorunu ölçüyor.

Kötü haber: Türkiye'deki kurumsal sitelerin %78'i INP eşiğini aşamıyor.

İyi haber: Bu yazıda, INP skorunuzu 200ms altına düşürmek için test ettiğimiz ve kanıtlanmış 7 stratejiyi paylaşıyoruz.

Strateji 1: Uzun Görevleri (Long Tasks) Bölün

Tarayıcıda "main thread" tek şerittir. Eğer bir JavaScript işlemi 50ms'den uzun sürerse, tarayıcı başka hiçbir şeye (tıklama, kaydırma) cevap veremez.

Çözüm: `setTimeout` veya `requestIdleCallback` kullanarak uzun işlemleri küçük parçalara bölün.

// Kötü
function processData(items) {
  for (const item of items) {
    heavyCalculation(item); // 200ms bloklar
  }
}

// İyi
function processData(items) {
  if (items.length === 0) return;
  
  heavyCalculation(items[0]);
  
  // Main thread'e nefes aldır
  setTimeout(() => processData(items.slice(1)), 0);
}

Strateji 2: DOM Boyutunu Küçültün

Sayfanızda 3000+ DOM elemanı varsa, tarayıcının her stil hesaplaması milisaniyelerce sürer.

Hedef: 1500 elemanın altı.

Nasıl: Sonsuz kaydırma yerine sayfalama kullanın. Gereksiz `div` wrapper'ları temizleyin.

Strateji 3: Etkileşim Anında Görsel Geri Bildirim Verin

INP, kullanıcının tıkladığı an ile ekranda bir şeylerin değiştiği an arasındaki süreyi ölçer.

Eğer işlem uzun sürecekse (API isteği vb.), hemen bir yükleniyor ikonu gösterin.

// React Örneği (useTransition)
const [isPending, startTransition] = useTransition();

function handleClick() {
    // UI hemen tepki verir
    startTransition(() => {
        // Ağır işlem arka planda çalışır
        updateData();
    });
}

Strateji 4: Code Splitting Macerası

Kullanıcının o an görmediği kodları yüklemeyin.

• •Routes bazlı code splitting (Next.js bunu otomatik yapar)
• •Component bazlı code splitting (React.lazy)

Ölçülebilir Sonuç

Müşterimiz FinansApp için code splitting uyguladık. İlk yükleme JavaScript boyutu 2.1MB'dan 380KB'a düştü. INP skoru 420ms'den 95ms'ye indi.

Strateji 5: Third-Party Script'leri Erteleyin

Üçüncü parti scriptler, sitenizin kontrolünüz dışındaki en büyük performans katilidir.

Her bir script, main thread'de zaman çalar. Birçoğu sayfa yüklenmeden çalışmaya başlar.

Çözüm: Lazy Loading

Chatbot'unuzun kullanıcı sayfada 5 saniye kaldıktan sonra yüklenmesi, deneyimi bozmaz ama INP'yi kurtarır.

Analytics için Google Tag Manager'ın "Tag Sequencing" özelliğini kullanarak scriptleri sıraya koyun.

Strateji 6: CSS-in-JS Kullanımını Gözden Geçirin

Styled-components ve Emotion gibi kütüphaneler, runtime'da CSS üretir. Bu, her render'da main thread'i meşgul eder.

Alternatifler:

• •Tailwind CSS (build-time CSS)
• •CSS Modules
• •Vanilla Extract

Yunexia projelerinde Tailwind CSS'e geçtikten sonra, INP skorlarında ortalama %35 iyileşme gördük.

Strateji 7: Hydration Stratejinizi Optimize Edin

Server-side rendering (SSR) kullanıyorsanız, "hydration" adımı kritiktir. Bu, sunucudan gelen statik HTML'in interaktif hale geldiği andır.

Next.js 14 ve üzeri sürümlerde, Partial Hydration veya React Server Components kullanarak sadece etkileşimli bileşenlerin hydrate edilmesini sağlayabilirsiniz.

Bu, INP üzerinde dramatik etki yaratır çünkü çoğu component (header, footer, statik içerik) hiç hydrate edilmez.

Gerçek Dünya Sonuçları: Müşteri Vakası

E-ticaret müşterimiz ModaHub için 6 haftalık bir INP optimizasyon projesi yürüttük:

Yapılan değişiklikler:

• •Chatbot script'i 5 saniye ertelendi
• •Ürün filtreleme Web Worker'a taşındı
• •CSS-in-JS kaldırıldı, Tailwind'e geçildi
• •React Server Components aktifleştirildi

Sonuç: Hız Bir Özellik Değil, Temeldir

INP optimizasyonu, sadece bir SEO taktiği değil. Kullanıcı deneyiminin, dönüşüm oranlarının ve marka algısının temelidir.

2025'te kazanan siteler, her tıklamaya anında yanıt veren siteler olacak.

Sitenizin INP skorunu test etmek için PageSpeed Insights veya Chrome UX Report'u kullanabilirsiniz. 200ms üzerindeyseniz, bu yazıdaki stratejileri uygulama zamanı geldi.

Profesyonel destek almak isterseniz, Yunexia olarak Core Web Vitals odaklı performans denetimleri gerçekleştiriyoruz.