Google Core Web Vitals, 2021'den beri arama sıralamasında kritik bir faktör. 2025'te bu metrikler daha da önemli hale geldi. Bu rehberde, Core Web Vitals'ı optimize ederek SEO performansınızı nasıl artıracağınızı öğreneceksiniz.

Core Web Vitals Nedir?

Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metrik:

1. Largest Contentful Paint (LCP)

Tanım: Sayfanın ana içeriğinin yüklenmesi için geçen süre

Hedefler:

• ✅ Mükemmel: <2.5 saniye

• ⚠️ İyileştirme Gerekli: 2.5-4 saniye

• ❌ Zayıf: >4 saniye

İstatistikler:

• LCP'si 2.5 saniyenin altında olan siteler: %25 daha fazla trafik

• Her 1 saniyelik LCP artışı: %7 conversion kaybı

• Mobile LCP ortalaması: 3.7 saniye (optimize edilmeli!)

2. First Input Delay (FID) / Interaction to Next Paint (INP)

Tanım: Kullanıcı etkileşimine verilen yanıt süresi

Not: 2024'ten itibaren FID yerine INP kullanılıyor

INP Hedefleri:

• ✅ Mükemmel: <200ms

• ⚠️ İyileştirme Gerekli: 200-500ms

• ❌ Zayıf: >500ms

Kullanıcı Etkisi:

• 100ms gecikme: %3 dönüşüm kaybı

• İyi INP skorlu siteler: %40 daha yüksek engagement

3. Cumulative Layout Shift (CLS)

Tanım: Sayfa yüklenirken beklenmeyen layout kaymaları

Hedefler:

• ✅ Mükemmel: <0.1

• ⚠️ İyileştirme Gerekli: 0.1-0.25

• ❌ Zayıf: >0.25

Kullanıcı Deneyimi:

• Yanlış tıklamalar: %65 kullanıcı şikayeti

• Mobilde daha kritik: %78 mobile kullanıcı etkileniyor

LCP Optimizasyonu

1. Server Response Time (TTFB) İyileştirme

Target: <800ms

Stratejiler:

`typescript

// Next.js ile Server-Side Caching

import { unstable_cache } from 'next/cache';

const getCachedData = unstable_cache(

async (id: string) => {

return await db.getData(id);

['data-cache'],

{ revalidate: 3600 } // 1 hour cache

);

CDN Kullanımı:

• Vercel Edge Network: Global <50ms response

• Cloudflare: 200+ data center

• AWS CloudFront: Regional optimization

Database Optimization:

• Connection pooling

• Query caching

• Index optimization

• Read replicas

2. Resource Loading Optimization

Critical CSS:

`html

Image Optimization:

`tsx

import Image from 'next/image';

export default function Hero() {

return (

{/ Priority loading for LCP image /}

src="/hero.jpg"

alt="Hero Image"

width={1920}

height={1080}

priority // This is crucial for LCP!

quality={85}

placeholder="blur"

blurDataURL="data:image/jpeg;base64,..."

);

}

3. Font Loading Optimization

Modern Font Loading:

`css

/ font-display: swap prevents invisible text /

@font-face {

font-family: 'Geist';

src: url('/fonts/geist.woff2') format('woff2');

font-display: swap;

font-weight: 400;

}

Next.js Font Optimization:

`tsx

import { Inter } from 'next/font/google';

const inter = Inter({

subsets: ['latin'],

display: 'swap',

preload: true,

variable: '--font-inter',

});

export default function Layout({ children }) {

return (

{children}

);

}

INP/FID Optimizasyonu

1. JavaScript Bundle Reduction

Code Splitting:

`tsx

import dynamic from 'next/dynamic';

// Lazy load heavy components

const HeavyChart = dynamic(() => import('./HeavyChart'), {

ssr: false,

loading: () =>

});

// Route-based code splitting (automatic in Next.js)

export default function Page() {

return

{/ Content /}

;

}

Bundle Analysis:

`bash

# Install bundle analyzer

npm install @next/bundle-analyzer

# Analyze bundle

ANALYZE=true npm run build

Results:

• Remove unused dependencies: %30 bundle size reduction

• Tree shaking: %20 reduction

• Dynamic imports: %40 faster initial load

2. Long Tasks Optimization

Web Workers for Heavy Computation:

`typescript

// worker.ts

self.addEventListener('message', (e) => {

const result = heavyComputation(e.data);

self.postMessage(result);

});

// main.ts

const worker = new Worker(new URL('./worker.ts', import.meta.url));

worker.postMessage(data);

worker.addEventListener('message', (e) => {

console.log('Result:', e.data);

});

Task Scheduling:

`typescript

// Use requestIdleCallback for non-critical tasks

function scheduleNonCriticalWork(callback: () => void) {

if ('requestIdleCallback' in window) {

requestIdleCallback(callback);

} else {

setTimeout(callback, 1);

}

scheduleNonCriticalWork(() => {

// Analytics, logging, etc.

trackPageView();

});

3. Third-Party Scripts Optimization

Script Loading Strategy:

`tsx

import Script from 'next/script';

export default function Layout() {

return (

{/ Critical scripts - load immediately /}