Web Sitesi Hız Optimizasyonu: Core Web Vitals Rehberi

Google, Core Web Vitals'ı bir sıralama sinyali olarak kullanıyor. Siteniz yavaşsa, arama sıralamalarını ve ziyaretçileri kaybedersiniz. Bu rehber her metriğin ne anlama geldiğini, nasıl ölçüleceğini ve en yaygın sorunların nasıl düzeltileceğini açıklıyor.

LCP (En Büyük İçerikli Boyama), en büyük görünür öğenin yüklenmesinin ne kadar sürdüğünü ölçer. Hedef: 2,5 saniyenin altı. Olağan suçlular: optimize edilmemiş görseller, render engelleyen JavaScript, yavaş sunucu yanıt süreleri. Çözüm: Otomatik WebP dönüşümü ve lazy loading için next/image kullanın, kritik CSS'i satır içine alın, ekranın üst kısmındaki içerik için istemci taraflı render yerine SSR veya SSG kullanın.

INP (Etkileşimden Sonraki Boyamaya Kadar) 2024'te FID'nin yerini aldı. Sitenizin kullanıcı etkileşimlerine (tıklamalar, dokunmalar, tuş basımları) ne kadar hızlı yanıt verdiğini ölçer. Hedef: 200ms altı. Yaygın sorunlar: ana iş parçacığını bloke eden ağır JavaScript çalıştırma, üçüncü taraf scriptleri (analitik, chat widget'ları), karmaşık durum güncellemeleri. Çözüm: dinamik import'larla uzun görevleri parçalayın, kritik olmayan scriptleri erteleyin, pahalı hesaplamalar için React.memo ve useMemo kullanın.

CLS (Kümülatif Düzen Kayması), görsel kararlılığı ölçer. Görseller yüklendiğinde veya reklamlar sayfaya kendini eklediğinde olan o sinir bozucu atlamalar. Hedef: 0,1 altı. Yaygın nedenler: genişlik/yükseklik belirtilmemiş görseller, dinamik olarak eklenen içerik, FOUT'a (Stilsiz Metin Flaşı) neden olan web fontları. Çözüm: görsellere her zaman boyut belirleyin (next/image bunu otomatik yapar), font yükleme için next/font kullanın, dinamik içerik için CSS min-height ile yer ayırın.

Nasıl ölçülür: Google PageSpeed Insights (pagespeed.web.dev) size hem lab hem alan verisi verir. Chrome DevTools Performans sekmesi detaylı şelale grafikleri gösterir. Chrome'daki Lighthouse size spesifik önerilerle genel bir skor verir. Gerçek kullanıcı verisi için Google Search Console'un Core Web Vitals raporunu veya Vercel Speed Insights'ı kullanın.

Next.js'e özel optimizasyonlar: Image bileşeni LCP sorunlarının %80'ini otomatik olarak halleder. next/font ile font optimizasyonu, font yüklemesinden kaynaklanan CLS'yi ortadan kaldırır. next/dynamic ile dinamik import'lar kodu bileşen düzeyinde bölerek INP'yi azaltır. App Router'ın sunucu bileşenleri varsayılan olarak istemci taraflı JavaScript'i azaltır. Suspense sınırlarıyla streaming SSR, her şeyin yüklenmesini beklemek yerine içeriği aşamalı olarak gösterir.

Her proje için hedefimiz: LCP 2,5 saniyenin altında, INP 200ms altında, CLS 0,1 altında, Lighthouse Performans 90 üstü, Lighthouse SEO 95 üstü. Bunları lansmandan önce ölçüyor ve Vercel Speed Insights ile sürekli izliyoruz.

Web sitenizin ücretsiz performans analizini ister misiniz? URL'nizi bize gönderin, spesifik önerilerle kapsamlı bir denetim yapalım.