Modern Web Dünyasında Core Web Vitals Neden Önemli?

Google sıralama algoritması kullanıcı deneyimini doğrudan ölçer. Yavaş siteler trafik ve dönüşüm kaybeder. Bu rehber, modern web trendleri doğrultusunda Core Web Vitals metriklerini optimize etme adımlarını içerir.

Temel Metrikler: LCP, INP ve CLS

Largest Contentful Paint (LCP): Sayfadaki ana içeriğin yüklenme süresi. Hedef: ≤ 2.5 saniye.
Interaction to Next Paint (INP): FID yerine gelen yeni etkileşim metriği. Kullanıcı girdisine verilen yanıt gecikmesini ölçer. Hedef: ≤ 200 milisaniye.
Cumulative Layout Shift (CLS): Sayfa yüklenirken gerçekleşen beklenmeyen görsel kaymalar. Hedef: ≤ 0.1.

Adım 1: Largest Contentful Paint (LCP) İyileştirme

LCP skorunu düşüren ana etken genelde büyük görseller veya geciken CSS/JS bloklarıdır.

1. Hero Görsellerini Optimize Edin

Görselleri AVIF veya WebP formatında sunun. Görsel boyutlarını ekrana göre daraltın. İlk ekranda görünen LCP görseline fetchpriority="high" ekleyin:

<link rel="preload" fetchpriority="high" as="image" href="hero.avif" type="image/avif">

2. Kritik Olmayan Kaynakları Erteleyin

Kritik CSS'i satır içi (inline) ekleyin, kalan CSS dosyalarını asenkron yükleyin. Render engelleyen JavaScript kodlarını sayfa sonuna taşıyın veya defer / async kullanın.

Adım 2: Interaction to Next Paint (INP) Optimizasyonu

Modern web trendleri, ana iş parçacığını (main thread) kilitleyen uzun JavaScript görevlerini (Long Tasks) ortadan kaldırmayı gerektirir.

1. JavaScript Görevlerini Parçalara Bölün

50ms üzeri süren JS operasyonlarını bölün. Modern API'lar kullanın (scheduler.yield() veya setTimeout):

async function handleWork() { doFirstPart(); await scheduler.yield(); doSecondPart(); }

2. DOM Boyutunu Azaltın

Aşırı DOM derinliği tarayıcının render süresini uzatır. DOM eleman sayısını 1.400'ün altında tutun.

Adım 3: Cumulative Layout Shift (CLS) Engelleme

Sayfa yüklenirken elemanların zıplaması kullanıcı deneyimini bozar.

1. Görsel ve Videolara Boyut Tanımlayın

Bütün <img> ve <video> etiketlerine width ve height nitelikleri verin veya CSS ile aspect-ratio belirleyin:

img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

2. Web Font Kaymalarını Önleyin

Harici font yüklenene kadar sistem fontu gösterildiğinde metin boyutu değişip kaymaya yol açabilir. font-display: swap ile birlikte yedek font boyut uyarlaması (size-adjust) kullanın.

Adım 4: Sunucu ve Dağıtım Altyapısı

Dijital ajans standartlarında bir altyapı için sunucu yanıt süresi (TTFB) 800ms altında olmalıdır.

CDN ve Edge Cache: Statik varlıkları kullanıcıya en yakın sunucudan dağıtın.
Sıkıştırma: Gzip yerine daha yüksek sıkıştırma oranı sunan Brotli tercih edin.
HTTP/3 Protokolü: Çoklu bağlantı kuyruk engellemesini (head-of-line blocking) önleyin.

Performans Takip Araçları

PageSpeed Insights & Lighthouse: Laboratuvar ortamı analizleri için.
Chrome User Experience Report (CrUX): Gerçek kullanıcı saha verileri (Real User Metrics) takibi için.
web-vitals JavaScript Kütüphanesi: Kendi analitik sisteminize doğrudan metrik loglamak için.