BİLGİ BANKASI
Core Web Vitals Skorlarını Zirveye Taşıyan Web Tasarım ve Geliştirme Yaklaşımları
İçindekiler — Türkçe
Core Web Vitals: Google'ın Sıralama Faktörü
Google, 2021'de Core Web Vitals'ı doğrudan arama sıralamasını etkileyen sinyal olarak duyurdu. Bu üç metrik — LCP, CLS ve FID/INP — sayfanın kullanıcı deneyimini sayısal olarak ölçer. Yüksek skor, hem SEO sıralaması hem de dönüşüm oranı için kazanç demektir.
Üç Core Web Vitals Metriği
1. LCP — Largest Contentful Paint
Sayfanın en büyük görünür içerik bloğunun (genellikle hero image veya büyük başlık) ne kadar sürede render edildiğini ölçer. Hedef: ≤2.5 saniye. Bu sürenin %70'ini görsel ve font yükleme oluşturur.
2. CLS — Cumulative Layout Shift
Sayfa yüklenirken elementlerin ne kadar hareket ettiğini ölçer. Banner, reklam veya görselin sonradan yüklenerek içeriği itmesi CLS puanını düşürür. Hedef: ≤0.1.
3. INP — Interaction to Next Paint
Kullanıcının bir butona tıklaması, form doldurması veya herhangi bir etkileşimi sonrasında sayfanın görsel yanıt süresini ölçer. FID'in yerini 2024'te almıştır. Hedef: ≤200ms.
LCP Optimizasyon Teknikleri
Görsel Optimizasyonu
- Next-gen format: WebP veya AVIF ile %30–50 boyut küçültme
- Responsive images: srcset ile cihaza uygun görsel boyutu
- Lazy loading: Görünür alanın dışındaki görselleri geciktirme
- Preload: Hero image için
etiketi
- CDN: Görseli kullanıcıya en yakın edge'den sunma
Sunucu Yanıt Süresi (TTFB) Optimizasyonu
- Server-side caching: Redis veya Varnish ile sayfa önbellekleme
- Veritabanı optimizasyonu: Sorgu analizi, index iyileştirme
- Edge computing: CDN üzerinde SSR (Vercel, Cloudflare Workers)
- HTTP/3 ve QUIC: Bağlantı kurulum süresini düşürme
CLS Önleme Stratejileri
CLS'nin %90'ı boyut tanımlanmamış görseller, web fontları ve geç yüklenen reklam veya banner kaynaklıdır.
- Tüm img elementlerine width ve height attribute'u ekle
- CSS'de aspect-ratio ile görsel yer tutucu
- Font display: swap → font display: optional geçişi
- Dinamik içerik için sabit yükseklik container
- Banner ve reklam için skeleton screen
JavaScript Optimizasyonu: INP İçin
Ağır JavaScript, main thread'i bloke ederek INP puanını düşürür. Modern teknikler:
- Code splitting: Yalnızca mevcut sayfanın JS'ini yükle
- Tree shaking: Kullanılmayan kodu bundle'dan çıkar
- Web Workers: Ağır hesaplama ana thread dışında
- Scheduler API: Task parçalama ve sıralama
- Virtualization: Büyük listeler için React Virtualized
AI Perspective: 2026–2030
Google'ın arama algoritması, performans sinyallerini 2026 sonrasında daha da ağırlıklandıracaktır. Öte yandan AI destekli görsel optimizasyon araçları, görselleri otomatik olarak WebP/AVIF formatına dönüştürecek ve optimal boyutta sunan akıllı CDN sistemleri yaygınlaşacaktır.
SIKÇA SORULAN SORULAR
Temel Çıkarımlar
- Core Web Vitals Google sıralama faktörüdür; hem SEO hem dönüşüm üzerinde ölçülebilir etkisi vardır.
- LCP görsel ve sunucu optimizasyonuyla, CLS boyut tanımlamayla, INP JavaScript optimizasyonuyla iyileşir.
- WebP/AVIF, preload, CDN ve server-side caching dört temel kazanım alanıdır.
- Google Search Console ve PageSpeed Insights, mevcut durumu ölçmek için birincil araçlardır.
- AI destekli görsel optimizasyon ve akıllı CDN, performans mühendisliğini otomatikleştirmeye başlıyor.
