Core Web Vitals & Web Vitals Optimizer
Web sitenizin adresini girip Google PageSpeed Insights API ile canlı analiz edin. Zayıf çıkan LCP, INP, CLS veya TTFB metriğinize göre Next.js 15, React 19 ve modern CSS için optimize edilmiş üretime hazır kod reçetelerini anında kopyalayın.
Core Web Vitals ve Modern Web Performansı Optimizasyon Rehberi
Google'ın sayfa deneyimi (Page Experience) sıralama sinyallerinin temelini oluşturan Core Web Vitals (Temel Web Verileri); bir web sitesinin gerçek kullanıcılar (CrUX - Chrome User Experience Report) nezdindeki yükleme hızını, etkileşim yanıt süresini ve görsel kararlılığını ölçümler. Bu araç; sitenizin LCP, INP, CLS ve TTFB metriklerini canlı test eder ve Next.js 15, React 19 ve modern CSS mimarileri için 100/100 Lighthouse puanı sağlayan üretim reçeteleri sunar.
1. Core Web Vitals Eşikleri ve Lighthouse Ağırlıkları
Google, bir sayfanın Core Web Vitals değerlendirmesinden "Geçti (Good)" sayılabilmesi için kullanıcı ziyaretlerinin en az %75'inin (75. yüzdelik dilim) aşağıdaki yeşil aralıklarda olmasını şart koşar:
| Metrik | İyi (Good) | Geliştirilmeli (Needs Work) | Zayıf (Poor) | Neyi Ölçer? |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 s | 2.5 s – 4.0 s | > 4.0 s | İlk ekrandaki en büyük görsel veya metin bloğunun ekranda belirme süresi. |
| INP (Interaction to Next Paint) | ≤ 200 ms | 200 ms – 500 ms | > 500 ms | Tıklama, dokunma veya klavye girdilerinin bir sonraki kareyi boyama gecikmesi (Mart 2024'te FID yerine geçti). |
| CLS (Cumulative Layout Shift) | ≤ 0.10 | 0.10 – 0.25 | > 0.25 | Yükleme esnasında butonların, banner'ların ve metinlerin beklenmedik şekilde yer değiştirmesi. |
| TTFB (Time to First Byte) | ≤ 800 ms | 800 ms – 1800 ms | > 1800 ms | Sunucunun ilk yanıt baytını tarayıcıya ulaştırma gecikmesi (DNS, SSL, CDN ve Sunucu Yanıtı). |
2. LCP (Largest Contentful Paint) Nasıl < 2.5 Saniyenin Altına İndirilir?
LCP süresinin %70'ini genellikle ilk ekranda (above-the-fold) yer alan hero banner görselleri oluşturur. Yaygın hatalardan biri, ilk ekrandaki ana görsele yanlışlıkla loading="lazy" verilmesidir:
// Next.js 15+ ile Kusursuz LCP Hero Image Tanımı
import Image from 'next/image'
export function HeroBanner() {
return (
<div className="relative w-full aspect-[16/9] max-h-[560px] overflow-hidden rounded-2xl">
<Image
src="/images/hero-showcase.webp"
alt="Core Web Vitals Optimizasyonu"
fill
priority // Tarayıcı HTML'i okurken derhal indirmeye başlar (rel="preload")
fetchPriority="high" // Tarayıcı ağ kuyruğunda en yüksek önceliğe alır
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
quality={82}
className="object-cover"
/>
</div>
)
}- AVIF & WebP Dönüşümü: Görsellerinizi modern sıkıştırma formatlarında sunarak dosya boyutlarını %50-%70 azaltın.
- Preconnect: Harici CDN veya görsel sunucusu kullanıyorsanız
<link rel="preconnect" href="https://cdn.site.com" />ekleyin. - Render-Blocking CSS/JS Temizliği: Head içindeki harici font ve stil sayfalarını küçültün veya kritik CSS'i inline hale getirin.
3. INP (Interaction to Next Paint): FID Yerine Neden Geldi ve Nasıl İyileştirilir?
Eski metrik olan First Input Delay (FID), yalnızca kullanıcının sayfadaki ilk tıklamasını ölçüyordu.INP (Interaction to Next Paint) ise ziyaret boyunca gerçekleşen tüm tıklamaları, tuş basımlarını ve mobil dokunuşları takip eder ve yaşanan en kötü etkileşim gecikmesini raporlar.
// React 19 useTransition ile Ana İş Parçacığını (Main Thread) Kilitlemeyi Önleme
'use client'
import { useState, useTransition } from 'react'
export function SearchFilter() {
const [inputVal, setInputVal] = useState('')
const [results, setResults] = useState([])
const [isPending, startTransition] = useTransition()
const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = e.target.value
// 1. UI anında yanıt versin (Input gecikmesi = 0ms)
setInputVal(val)
// 2. Ağır hesaplama veya DOM filtrelemesi arka planda çalışsın
startTransition(() => {
const filtered = calculateHeavyList(val)
setResults(filtered)
})
}
return <input value={inputVal} onChange={onSearch} />
}- Long Animation Frames (LoAF) API: Chrome 123+ ile gelen LoAF API'si, 50ms'den uzun süren JavaScript blokajlarını doğrudan tespit etmenizi sağlar.
- Web Worker'lar: Yoğun matematiksel işlemleri, veri parsing ve crypto fonksiyonlarını Web Worker'a devredin.
- DOM Boyutunu Azaltın: Tek sayfada 1.500'den fazla DOM düğümü bulunması, yeniden boyama (paint) süresini doğrudan uzatır.
4. CLS (Cumulative Layout Shift) Değerini Sıfıra İndirme Stratejileri
Kullanıcı bir metni okurken aniden yukarıdan bir reklamın açılması veya font yüklendiğinde satırların kayması en can sıkıcı kullanıcı deneyimidir. CLS skorunu 0.00 seviyesinde tutmanın altın kuralları:
// 1. next/font ile Sıfır Font Kayması (Zero Layout Shift)
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
adjustFontFallback: true, // Yedek fontun harf boyutunu Google fontuna otomatik eşitler
})
// 2. Reklam ve Dinamik Bileşenler İçin Min-Height ve Aspect-Ratio Rezerve Etme
export function AdSlot() {
return (
<div className="w-full min-h-[250px] aspect-[16/9] bg-zinc-100 dark:bg-zinc-900 flex items-center justify-center">
{/* Reklam scripti yüklendiğinde sayfa aşağı kaymaz */}
</div>
)
}5. TTFB (Time to First Byte) & Edge Network Mimarisi
TTFB, sunucunuzun performansını, veritabanı sorgu hızını ve CDN önbellek verimliliğini yansıtır. Next.js App Router'da statik üretim (SSG/ISR) ve Edge Middleware kullanarak TTFB'yi global ölçekte < 100ms seviyesine çekebilirsiniz:
// app/api/cached-content/route.ts
export const dynamic = 'force-static'
export const revalidate = 3600 // 1 Saatlik Incremental Static Regeneration
export async function GET() {
return Response.json(
{ timestamp: Date.now() },
{
headers: {
'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
'CDN-Cache-Control': 'max-age=3600',
},
}
)
}Sıkça Sorulan Sorular (SSS)
Google PageSpeed puanı ile Core Web Vitals arasındaki fark nedir?
PageSpeed puanı simüle edilmiş bir lab testidir (Lighthouse). Core Web Vitals ise son 28 günde sitenizi ziyaret eden gerçek kullanıcıların (CrUX verisi) deneyimini temel alır. Google sıralamada lab verisini değil, gerçek kullanıcı CrUX metriklerini baz alır.
Sayfamda hem WebP hem de AVIF formatı kullanmalı mıyım?
Evet. AVIF, WebP'ye kıyasla aynı görsel kalitesinde yaklaşık %20 daha küçük dosya boyutu sunar. Next.js next.config.js dosyasında images: { formats: ['image/avif', 'image/webp'] } tanımı yaparak modern tarayıcılara otomatik AVIF, diğerlerine WebP sunabilirsiniz.
Canlı URL analizinde CORS veya güvenlik engeli yaşar mıyım?
Hayır. Bu araç, girdiğiniz URL'yi doğrudan sunucu taraflı güvenli Google PageSpeed Insights API'sine iletir. Analiz sunucu katmanında tamamlanır ve CORS kısıtlamalarına takılmadan anında sonuç panonuza yansıtılır.