Core Web Vitals ve Sayfa Açılış Hızı İyileştirme Rehberi

Core Web Vitals Nedir?

Google sıralama sinyali. Kullanıcı deneyimi ölçümü. Üç ana metrik var: LCP, INP, CLS. Modern web projelerinde hız doğrudan dönüşüm oranı demek.

İyi skor: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1.

Adım 1: Largest Contentful Paint (LCP) Optimizasyonu

LCP ana içeriğin yüklenme süresi. Görsel, video veya büyük metin bloğu tetikler.

Uygulama Adımları

• Görsel Boyutu Küçült: AVIF veya WebP formatı kullan. Doğru boyutlandır.
• Öncelikli Yükleme: LCP görseline fetchpriority="high" ve loading="eager" ekle. Lazy load yapma.
• CDN Kullanımı: Statik dosyaları uç noktalardan (Cloudflare, AWS CloudFront) dağıt. TTFB düşür.
• Kritik CSS Ayır: Render engelleyen CSS dosyalarını küçült. Kritik CSS inline ekle.

Adım 2: Interaction to Next Paint (INP) İyileştirme

FID yerine gelen yeni metrik. Sayfa etkileşim gecikmesini ölçer. Ana iş parçacığı (Main Thread) bloklanmamalı.

Uygulama Adımları

• JavaScript Boyutunu Düşür: Kullanılmayan JS kodlarını sil. Tree-shaking uygula.
• Uzun Görevleri (Long Tasks) Böl: 50ms üzeri görevleri scheduler.yield() veya requestIdleCallback() ile parçala.
• Debounce ve Throttle: Scroll ve resize event listener fonksiyonlarını sınırla.
• Web Worker Kullan: Ağır hesaplamaları arka plana taşı.

Adım 3: Cumulative Layout Shift (CLS) Önleme

CLS görsel kararlılık metriği. Yükleme sırasında öğelerin kayması skoru bozar.

Uygulama Adımları

• Boyut Tanımla: Tüm <img> ve <iframe> etiketlerine width ve height attribute ekle.
• CSS aspect-ratio: Duyarlı kapsayıcılara sabit oran ver: aspect-ratio: 16 / 9;.
• Dinamik İçerik Alanı Ayır: Reklam veya banner alanlarına önceden minimum yükseklik (min-height) tanımla.
• Web Font Kayması: font-display: swap ile birlikte yedek font boyutunu eşitle (size-adjust).

Modern Web Trendleri ve Dijital Ajans Yaklaşımı

Başarılı bir dijital ajans, tasarımı hızdan ayırmaz. 2025 modern web trendleri hafif mimarileri öne çıkarıyor:

• Server-Side Rendering (SSR) ve Static Site Generation (SSG).
• Edge caching ve serverless altyapılar.
• Gereksiz JavaScript kütüphanelerinden kaçınma (Vanilla JS veya hafif kütüphaneler).

Ölçüm ve Test Araçları

Değişiklikleri doğrulamak için kullanılan standart araçlar:

• PageSpeed Insights: Laboratuvar ve saha verisi.
• Chrome DevTools: Performance ve Network panelleri.
• Search Console: Site geneli Core Web Vitals raporu.