INP (Interaction to Next Paint) Optimizasyonu: Core Web Vitals 2026 Detaylı Rehber

INP (Interaction to Next Paint), Mart 2024'te FID'in (First Input Delay) yerini alan ve Core Web Vitals ailesinin yeni üyesi olan bir performans metriğidir. Bir kullanıcı sayfanız ile etkileşime girdiğinde (tıklama, tap, klavye tuşu) bir sonraki ekran güncellemesinin ne kadar sürede olduğunu ölçer.

Büyükweb hosting altyapısında LiteSpeed + Redis cache + CDN ile sunulan siteler INP'de avantajlıdır; ancak optimizasyon kullandığınız framework'e göre değişir. Bu rehberde INP'yi tanıyacağız, WordPress / Next.js / Laravel stack'lerinde nasıl optimize edileceğini, ölçüm araçlarını ve 2026 yaygın performans hatalarını detaylıca inceleyeceğiz.

INP Nedir, Neden Önemli?

Metrik	Eski FID	Yeni INP
Ne ölçer?	İlk etkileşim gecikmesini	Tüm etkileşimlerin response süresini
Etkileşim çeşidi	Sadece 1. tıklama	Tüm tıklama / tap / klavye
Hesaplama	Tek nokta	%75-98 percentile (worst-case)
Hangi event	İlk inputDelay	Input processing + rendering

INP Eşikleri (Google)

Skor	Açıklama
<200 ms	İyi (Good)
200-500 ms	İyıleştirilmesi Gerekli (Needs Improvement)
>500 ms	Yetersiz (Poor)

Core Web Vitals Üçlüsü (2024+)

LCP (Largest Contentful Paint)  → İçerik yükleme hızı       (≤2.5s good)
INP (Interaction to Next Paint) → Etkileşim cevap hızı      (≤200ms good)
CLS (Cumulative Layout Shift)   → Görsel kararlılık         (≤0.1  good)

INP, Google ranking signal'ı; yetersiz INP organik sıralamayı düşürür.

INP Nasıl Hesaplanır?

1. Kullanıcı butona tıklar → input event
2. Browser event handler'ı çalıştırır → JavaScript execution
3. Browser layout + paint yapar → screen update

INP = 3. adım'da geçen toplam süre.

Etki Eden Faktörler

• JavaScript execution süresi (handler kodu)
• Main thread blok'lu mu?
• DOM/CSSOM yeniden hesaplama
• Paint maliyeti (görsel karmaşıklık)
• Cross-origin script bloklamaları

Adım 1: Mevcut INP'yi Ölç

Lighthouse (Lab Test)

npm install -g lighthouse
lighthouse https://example.com --view

Lighthouse rapor → Core Web Vitals → INP değerini görün. Lab veri olduğu için gerçek kullanıcıdan farklı olabilir.

Chrome DevTools Performance Panel

1. Chrome → F12 → Performance sekmesi
2. Record → sayfayla etkileşime gir → Stop
3. Timeline'da Long Tasks kırmızı barlar
4. Interactions lane'inde her etkileşim süresi

Web Vitals Library (Real User Monitoring)

<script type="module">
import { onINP } from 'https://unpkg.com/web-vitals@4?module';

onINP(metric => {
  // GA4'e gönder
  gtag('event', metric.name, {
    value: metric.value,
    metric_id: metric.id,
    metric_delta: metric.delta,
  });
}, { reportAllChanges: false });
</script>

Real User Monitoring (RUM) ile gerçek INP gözlemlersiniz — lab'dan daha güvenilir.

PageSpeed Insights

https://pagespeed.web.dev/ → URL gir → INP gerçek kullanıcı + lab değerleri

Search Console Core Web Vitals Report

Search Console → Experience → Core Web Vitals: tüm sayfalarınızın INP durumu (28 gün)

CrUX (Chrome User Experience Report)

https://www.chromeuxreport.com/v2/example.com

Gerçek Chrome kullanıcı verisi; ücretsiz API.

INP Optimizasyon Stratejileri

1. Long Tasks'i Parçala

Main thread'i bloke eden 50+ ms task'ları chunk'lara böl:

// KÖTÜ: Tek seferde 100 ms+ blocking
function heavyWork(items) {
  for (const item of items) {
    processItem(item);
  }
}

// İYİ: scheduler.yield() ile chunk'la
async function heavyWorkChunked(items) {
  for (const item of items) {
    processItem(item);
    if (navigator.scheduler && 'yield' in navigator.scheduler) {
      await navigator.scheduler.yield();
    }
  }
}

2. Event Handler'ı Async Yap

// KÖTÜ: Senkron kullanıcı tıklamasını bloker
button.addEventListener('click', () => {
  const result = expensiveCalculation(); // 200 ms
  updateUI(result);
});

// İYİ: requestIdleCallback ile defer
button.addEventListener('click', () => {
  // İlk feedback (UI hızlı response)
  showLoading();

  requestIdleCallback(() => {
    const result = expensiveCalculation();
    updateUI(result);
    hideLoading();
  });
});

3. Web Worker Kullan

// main.js
const worker = new Worker('worker.js');

button.addEventListener('click', () => {
  worker.postMessage({ data });  // Main thread bloklamaz
});

worker.onmessage = e => {
  updateUI(e.data);
};

// worker.js
self.onmessage = e => {
  const result = expensiveCalculation(e.data);
  self.postMessage(result);
};

4. Debounce / Throttle

import { debounce } from 'lodash';

input.addEventListener('input', debounce(e => {
  fetchSearchResults(e.target.value);
}, 300));

Her keystroke API çağırmak yerine 300 ms gecikme.

5. Virtual List / Pagination

10.000 öğeli listeyi DOM'a basmak yerine react-window veya virtual scrolling:

import { FixedSizeList } from 'react-window';

<FixedSizeList height={500} itemCount={10000} itemSize={50}>
  {({ index, style }) => <div style={style}>Item {index}</div>}
</FixedSizeList>

DOM'da yalnızca görünen 10-20 öğe; geri kalanı RAM'de.

6. Optimistic UI

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);

  const handleClick = async () => {
    // Optimistic: UI'ı hemen güncelle
    setLiked(true);
    try {
      await api.like(postId);
    } catch {
      setLiked(false); // Rollback
    }
  };

  return <button onClick={handleClick}>{liked ? '❤️' : '🤍'}</button>;
}

Kullanıcı anında geri bildirim alır; INP ms cinsinden mükemmel.

7. CSS Containment

.card {
  contain: layout style paint;
}

Browser'a "bu element diğerlerini etkilemez" der → render maliyetini düşürür.

8. Passive Event Listeners

// KÖTÜ
addEventListener('touchstart', handler);

// İYİ
addEventListener('touchstart', handler, { passive: true });

Browser scroll'u handler tamamlanmadan başlatabilir.

9. Lazy Load Heavy Components

const HeavyChart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<Loading />}>
  <HeavyChart />
</Suspense>

Kullanıcı görmeyene kadar yükleme.

10. Third-Party Script Audit

Çoğu sitenin INP'si 3rd party script (analytics, chat widgets, ads) yüzünden bozuk.

<!-- KÖTÜ: Senkron yüklenir -->
<script src="https://3rdparty.com/widget.js"></script>

<!-- İYİ: defer + async -->
<script src="https://3rdparty.com/widget.js" async defer></script>

<!-- DAHA İYİ: kullanıcı etkileşiminden sonra yükle -->
<script>
  document.addEventListener('scroll', () => {
    const s = document.createElement('script');
    s.src = 'https://3rdparty.com/widget.js';
    document.body.appendChild(s);
  }, { once: true, passive: true });
</script>

WordPress INP Optimizasyon

LiteSpeed Cache + Image Optimization

Büyükweb cPanel hosting altyapısında LiteSpeed Cache + QUIC.cloud CDN standart. Plugin ayarları:

LiteSpeed Cache → Page Optimization:
  ✓ JS Combine (concat)
  ✓ JS Minify
  ✓ CSS Combine
  ✓ Load Inline JS Async
  ✓ Defer JS

LiteSpeed Cache → Tuning:
  ✓ Object Cache (Redis)
  ✓ Browser Cache (1 yıl static)

Plugin Audit

WordPress'in en yaygın INP düşmanı: plugin yığını. Audit:

# WP-CLI ile aktif plugin listesi + dosya boyutu
wp plugin list --format=table
wp eval 'foreach(get_option("active_plugins") as $p) echo "$p\n";'

Her plugin'i tek tek devre dışı + INP test → en kötüsünü bul.

Yorum Eklentisi (Disqus, Jetpack)

<!-- Lazy load comments (kullanıcı scroll edince) -->
<div id="comments" data-lazy-comments></div>
<script>
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadDisqus();
        observer.disconnect();
      }
    });
  });
  observer.observe(document.getElementById('comments'));
</script>

WooCommerce

WooCommerce ürün sayfaları INP'de zayıf:

• Cart fragments: /?wc-ajax=get_refreshed_fragments her page load çağırır
• Çözüm: Cart fragments'ı sadece cart page'inde aktif et

Theme Optimizasyonu

Heavy theme (Avada, Divi) JS yüklü; lightweight theme (GeneratePress, Astra, Kadence) INP avantaj.

Next.js INP Optimizasyon

Server Components

Next.js 14 App Router React Server Components default — JavaScript client'a gönderilmez:

// app/page.tsx (Server Component)
async function Page() {
  const products = await fetchProducts();
  return <ProductList products={products} />;
}

// components/ProductList.tsx
'use client'; // Sadece interaktif olan component'lerde

Suspense Boundaries

<Suspense fallback={<Skeleton />}>
  <SlowComponent />
</Suspense>

Yavaş component yüklenirken UI kalan kısmı çalışır.

React Server Actions

// app/actions.ts
'use server';
export async function submitForm(formData: FormData) {
  // Server'da execute, client JS göndermez
}

Form submission tek HTTP request, JS bundle artmaz.

React Compiler (2026 stable)

npm install babel-plugin-react-compiler --save-dev

// .babelrc
{
  "plugins": ["babel-plugin-react-compiler"]
}

Manuel useMemo, useCallback gerek kalmadan otomatik memoization.

Image Optimization

import Image from 'next/image';

<Image src="/photo.jpg" width={500} height={500} alt="..." priority />

Next.js Image otomatik AVIF/WebP, responsive srcset.

Laravel INP Optimizasyon

Livewire (Alpine.js + Server Render)

<div x-data="{ count: 0 }">
  <button x-on:click="count++">+</button>
  <span x-text="count"></span>
</div>

Alpine.js minimal (~12 KB); JS-heavy framework gerekmez basit interaktivite için.

Inertia.js (Laravel + React/Vue)

SPA hissi ama Laravel server-side rendering. Her sayfada JS bundle minimum.

Octane (Long-Running PHP)

Laravel Octane → Swoole/RoadRunner ile 5-10x daha hızlı response. Server-side hızlı = INP düşer.

composer require laravel/octane
php artisan octane:install --server=swoole

Mobil INP

Mobil cihazlarda CPU yavaş (Snapdragon 6xx). Test için:

Chrome DevTools CPU Throttling

1. F12 → Performance → CPU: 4x slowdown
2. Etkileşim test → INP gözle

Real Device Testing

• BrowserStack / LambdaTest
• Lokal düşük-end Android cihaz

INP Spesifik Sorunlar

"Long task >50ms"

Performance Panel → Main → uzun sarı task
→ Source: kütüphane veya kodun hangi satırı?

// Long task çözümü
const result = await scheduler.postTask(() => {
  return expensiveCalculation();
}, { priority: 'background' });

Layout Thrashing

// KÖTÜ
elements.forEach(el => {
  const height = el.offsetHeight; // Read
  el.style.height = height * 2 + 'px'; // Write → reflow
});

// İYİ
const heights = [...elements].map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => el.style.height = heights[i] * 2 + 'px'); // All writes

Heavy CSS Selectors

/* KÖTÜ — derin selector */
body > div > div > div > .card > p { color: red; }

/* İYİ — class-only */
.card-text { color: red; }

Browser API'ler (2025+)

scheduler.yield()

async function processItems(items) {
  for (const item of items) {
    process(item);
    await scheduler.yield(); // Browser'a kontrol ver
  }
}

startViewTransition (Same-Document Animation)

document.startViewTransition(() => {
  updateDOM();
});

CSS animasyonları main thread'i bloke etmez.

CrossOriginEmbedderPolicy + COOP

Process isolation + document.gpu API'leri kullanılabilir. INP'de büyük katkı (Chrome 119+).

Monitoring + Alerting

Sentry / Datadog Real User Monitoring

import { Performance } from '@datadog/browser-rum';
Performance.init({
  applicationId: '...',
  clientToken: '...',
  service: 'mysite',
  trackInteractions: true,
});

INP percentile'leri dashboard'da; threshold (300ms) geçilince Slack alert.

GA4 Custom Metric

// Web Vitals → GA4
import { onINP } from 'web-vitals';
onINP(metric => {
  gtag('event', 'web_vitals', {
    metric_name: 'INP',
    metric_value: metric.value,
    metric_id: metric.id,
  });
});

GA4 Explore → custom dashboard.

Yaygın Hatalar

Hata	Çözüm
3rd party JS senkron yüklenir	async/defer + lazy load
Plugin yığını	Audit + lightweight alternatif
React over-rendering	useMemo, useCallback, React.memo
Form validation senkron	requestIdleCallback ile defer
Modal animation jank	will-change + transform yerine top/left kullanma
WordPress jQuery yığını	Modern JS'e geç (vanilla / Alpine)

Checklist: INP <200ms İçin

• Lighthouse score >90
• PageSpeed Insights INP <200ms
• CrUX 28-day INP <200ms (75. percentile)
• Long tasks <50ms (Chrome DevTools Performance)
• 3rd party script audit yapıldı
• Plugin/extension audit
• Image optimize (AVIF/WebP, lazy load)
• CSS critical path inline
• JS bundle <200 KB (gzip)
• Web Worker offload kullanılıyor
• Real User Monitoring kurulu (GA4 + Sentry/Datadog)

Sıkça Sorulan Sorular

INP zorunlu mu, sıralama düşer mi?

Evet — Core Web Vitals Google ranking signal'ı. Yetersiz INP organik trafiği etkiler.

Eski FID metrikleri hala var mı?

Hayır, Mart 2024'ten itibaren PageSpeed Insights ve Search Console INP kullanır.

Mobil INP masaüstü ile aynı mı?

Hayır — mobilde tipik INP daha yüksek (yavaş CPU). Mobil ayrı optimize edilmeli.

INP iyi ama kullanıcı yine yavaş hissediyor, neden?

INP "interaction → first paint"; TTI (Time to Interactive) veya render fluidity ayrı metric. INP iyi olsa bile sayfanın TTFB veya LCP yetersiz olabilir.

WordPress INP başlangıç noktası?

LiteSpeed Cache + Object Cache (Redis) + lightweight theme + plugin audit = bir gecede 50% iyileşme tipik.

Cloudflare INP'ye yardım eder mi?

Edge cache + Brotli + HTTP/3 ile yardımcı; ama INP client-side JS odaklı, server tarafında sınırlı katkı.

React Server Components INP'yi gerçekten düşürür mü?

Evet — JavaScript bundle azalır = main thread serbest kalır. Next.js 14 App Router'da measurable iyileşme.

İlgili Rehberler

• AI Overview ve GEO 2026 Rehber
• Sayfa Hızı Optimizasyonu WordPress Next.js
• Core Web Vitals 2026 LCP INP CLS Optimizasyonu
• WordPress Hız Optimizasyonu Core Web Vitals
• Teknik SEO Rehberi Core Web Vitals

İlgili Büyükweb Hizmetleri

Hızlı sayfa performansı için Türkiye lokasyonlu Büyükweb hizmetleri:

• cPanel Hosting (LiteSpeed)
• WordPress Hosting (LSCache)
• Türkiye VDS
• E-Ticaret VDS
• Dedicated Sunucu

Sorularınız için 0850 302 60 70 numaralı destek hattımıza veya iletişim sayfamıza yazabilirsiniz.