INP (Interaction to Next Paint) nedir ve neden FID yerine geçti?

INP, kullanıcının sayfadaki tüm tıklama ve klavye etkileşimlerinin yanıt süresini ölçen en güncel Core Web Vitals metriğidir. FID yalnızca ilk tıklamayı ölçerken, INP sayfa ömrü boyunca yaşanan en yavaş etkileşimleri yakalar.

LCP (Largest Contentful Paint) puanı en hızlı nasıl düşürülür?

İlk ekranda yer alan görselin next/image ile priority ve fetchPriority="high" şeklinde işaretlenmesi, modern AVIF formatına çevrilmesi ve kritik domainlere preconnect uygulanması LCP süresini %60 oranında kısaltır.

CLS (Cumulative Layout Shift) nasıl sıfırlanır?

Görseller ve banner alanları için önceden en/boy oranı (aspect-ratio) veya minimum yükseklik tanımlamak ve next/font/google kullanarak yedek font kaymalarını engellemek CLS değerini sıfırlar.

Teknik SEO & Sayfa Hızı Optimizasyonu

Core Web Vitals & Web Vitals Optimizer

Google sıralama faktörü olan LCP, INP, CLS ve TTFB metriklerini simüle edin; Next.js 15, React 19 ve Tailwind için 100/100 Lighthouse performans iyileştirme reçetelerini anında uygulayın.

Metrik Teşhis Paneli

GEÇTİ (PASSED)

Hızlı Senaryo Seçimi

LCP (En Büyük İçerikli Boyama): 1.8sİyi (≤2.5s)

Görseller, hero afişleri ve sunucu gecikmesinden etkilenir.

INP (Sonraki Boyamayla Etkileşim): 120msİyi (≤200ms)

Tıklama ve klavye etkileşimlerindeki JavaScript donmalarını ölçer.

CLS (Kümülatif Düzen Kayması): 0.04İyi (≤0.1)

Boyutsuz resimler, dinamik bannerlar ve geç yüklenen fontlar sebep olur.

TTFB (İlk Bayta Ulaşma Süresi): 450msİyi (≤800ms)

OptimizedHero.tsx

100/100 Lighthouse Ready

// 1. Next.js 15+ LCP (Largest Contentful Paint) Hero Görsel Optimizasyonu
import Image from 'next/image'

export function OptimizedHero() {
  return (
    <div className="relative w-full h-[520px] overflow-hidden rounded-3xl">
      <Image
        src="/images/hero-banner.webp"
        alt="Core Web Vitals Optimized Hero"
        fill
        priority // İlk ekrandaki LCP görseli için anında önyükleme
        fetchPriority="high"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
        quality={80}
        placeholder="blur"
        blurDataURL="data:image/svg+xml;base64,..."
        className="object-cover"
      />
    </div>
  )
}

Görsel Formatı (AVIF & WebP)

Next.js görsel motoru, JPEG ve PNG'leri %70 daha küçük modern AVIF formatına otomatik dönüştürür.

Üçüncü Parti Script Yükleme

Google Analytics ve Tag Manager scriptlerini strategy="lazyOnload" ile ana iş parçacığından ayırın.

Core Web Vitals ve Sayfa Deneyimi Optimizasyonu Hakkında

Google'ın arama sıralama algoritmasında doğrudan bir faktör olan Core Web Vitals (Temel Web Verileri); web sitenizin yükleme hızı, etkileşim yanıt süresi ve görsel kararlılığını ölçümler. 2024 itibarıyla FID yerine geçen INP (Interaction to Next Paint), LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) eşikleri teknik SEO başarısının anahtarıdır.

Detayları Göster

Next.js 15 ve React 19 ile 100/100 Lighthouse Skoru

Next.js App Router mimarisi; Server Components (RSC) ile JavaScript bundle boyutlarını düşürürken, next/image ile modern WebP/AVIF formatlarını otomatik üretir. next/font ile Google Fonts fontlarını yerel olarak barındırıp CLS puanını sıfıra indirir. INP optimizasyonu için ise React 19'un useTransition kancası ve web worker mimarileri kullanılır.

Teknik SEO ve AEO Araçlarımızla Birlikte Kullanım

Web sitenizin arama görünürlüğünü en üst düzeye çıkarmak için AEO & LLM SEO Auditor ile yapay zeka arama motoru uyumluluğunu ölçebilir; zengin arama sonuçları için JSON-LD Schema & Rich Snippets kodlarınızı oluşturabilirsiniz.

Blog · Konular · SSS