1. Core Web Vitals Temelleri

Google sıralama faktörü olan Core Web Vitals üç ana metriğe odaklanır: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift). Modern web standartlarında hedef: LCP < 2.5s, INP < 200ms, CLS < 0.1.

2. Adım Adım LCP İyileştirme

LCP, ana içeriğin ekrana gelme süresidir. Yavaş LCP nedeni genelde sunucu gecikmesi, render engelleyen kaynaklar ve optimize edilmemiş görsellerdir.

Görsel Formatı Değiştir: JPEG/PNG yerine AVIF veya WebP formatı kullan. Boyut yüzde 50-80 küçülür.
Priority Hint Ekle: Hero görseline fetchpriority="high" ve loading="eager" ekle. Tarayıcı kaynağı öne alır.
Render Engelleyen CSS/JS Kaldır: Kritik olmayan CSS'i ertele, kullanılmayan JS paketlerini bundle'dan çıkar.
Preload Kullan: Kritik font ve kahraman görselini <link rel="preload"> ile erken çağır.

3. INP (Interaction to Next Paint) Optimizasyonu

FID yerini alan INP, kullanıcı etkileşimine sayfanın verdiği yanıt hızını ölçer. Ana iş parçacığını (main thread) kilitleyen uzun görevler (long tasks) optimize edilmelidir.

Long Task Parçala: 50ms üzeri JS bloklarını scheduler.yield() veya setTimeout(fn, 0) ile böl.
Web Workers Kullan: Ağır hesaplamaları arka plan iş parçacığına taşı.
Üçüncü Parti Kodları Azalt: Fazladan izleme scriptleri ve tag yöneticilerini temizle. Partytown gibi araçlarla Web Worker içine al.

4. CLS (Cumulative Layout Shift) Sıfırlama

CLS, sayfa yüklenirken elemanların kayması durumudur. Kötü kullanıcı deneyimi yaratır.

Boyut Tanımla: Tüm <img>, <video> ve <iframe> etiketlerine width ve height veya CSS aspect-ratio ver.
Dinamik Alanları Ayır: Reklam veya sonradan yüklenen widget alanlarına CSS ile min-height rezerve et.
Font FOUT/FOIT Kontrolü: Font yüklemelerinde font-display: swap ile birlikte size-adjust kullanarak yerleşim kaymasını engelle.

5. Sunucu ve Ağ Optimizasyonları (TTFB)

Time to First Byte süresi 800ms altında olmalıdır. Sunucu geç yanıt verirse diğer tüm metrikler düşer.

Edge Caching ve CDN: Statik ve dinamik içeriği Cloudflare, Fastly gibi CDN noktalarında önbelleğe al.
HTTP/3 ve Early Hints: 103 Early Hints başlığıyla tarayıcıya CSS ve fontları HTML hazırlanırken indirt.
Gzip/Brotli: Sunucu yanıtlarını Brotli seviye 4-6 ile sıkıştır.

6. Dijital Ajans ve Modern Web Trendleri

Gereksiz JavaScript framework bağımlılıkları yerine modern web trendleri native tarayıcı API'lerine yönelmektedir.

Modern web mimarisinde en hızlı kod, tarayıcıya hiç gönderilmeyen koddur. Harici kütüphane yerine native CSS ve HTML özelliklerini tercih et.

Bileşen şişkinliğini önlemek için Islands Architecture veya SSR/SSG hibrit yapıları kur.
Lighthouse CI entegrasyonuyla her kod gönderiminde (commit) performans regresyonunu test et.