Web Performans Optimizasyonu: Core Web Vitals ve Hız İyileştirme

Core Web Vitals Nedir?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) ve INP (Interaction to Next Paint).

LCP, sayfadaki en büyük içerik öğesinin (genellikle hero görsel veya başlık) yüklenme süresini ölçer. 2.5 saniyenin altında olmalıdır. Yavaş LCP, kullanıcıların sayfayı terk etmesine neden olur.

CLS, sayfa yüklenirken düzen kaymalarını ölçer. Görsellerin veya reklamların geç yüklenmesiyle oluşan kaymalar kullanıcıyı rahatsız eder. 0.1'in altında olmalıdır.

INP, kullanıcı etkileşimine (tıklama, tuş basımı) yanıt süresini ölçer. 200 milisaniyenin altında olmalıdır. Yavaş INP, siteyi kullanılamaz hale getirir.

İyi Core Web Vitals sonuçları yararlıdır; yüksek arama sıralamasını garanti etmez.

LCP Optimizasyonu

En büyük içerik öğesini hızlı yükleyin. Hero görseli veya ana başlık genellikle LCP öğesidir. Bu öğenin yüklenmesini önceliklendirin.

LCP görselini gecikmeli yüklemeyin. Lazy loading, ilk ekranda görünmeyen görseller için uygundur.

Sunucu yanıt süresini (TTFB) azaltın. CDN (Content Delivery Network) kullanın, veritabanı sorgularını optimize edin, sayfa önbellekleme uygulayın.

async ve defer JavaScript içindir; kritik olmayan CSS için ayrı bir yükleme stratejisi gerekir.

Preload direktifi ile kritik kaynakları önceden yükleyin: <link rel="preload" as="image" href="hero.webp">. Bu, tarayıcının kaynakları daha erken keşfetmesini sağlar.

CLS Optimizasyonu

Görsel ve video elementlerine width ve height attribute'ları ekleyin. Bu, tarayıcının alan rezerve etmesini sağlar ve layout shift'i önler.

Reklam ve embed alanları için sabit boyutlu konteynerlar rezerve edin. Geç yüklenen reklamlar sayfa düzenini kaydırır ve CLS'yi artırır.

Web fontlarını optimize edin: font-display: swap kullanın, kritik fontları preload edin. FOUT (Flash of Unstyled Text) ve FOIT (Flash of Invisible Text) sorunlarını minimize edin.

Mevcut içeriğin üstüne eklenen, alanı ayrılmamış öğeler düzen kaymasına neden olabilir.

CSS animasyonlarında transform ve opacity kullanın. Bu özellikler layout'u tetiklemez ve CLS'ye katkıda bulunmaz.

INP Optimizasyonu

JavaScript execution süresini azaltın. Uzun süren görevleri (long tasks) küçük parçalara bölün. 50ms'den uzun görevler INP'yi olumsuz etkiler.

Event handler'ları optimize edin. Tıklama ve tuş basımı olaylarına hızlı yanıt veren handler'lar yazın. Ağır hesaplamaları Web Worker'lara taşıyın.

Ağır üçüncü taraf betikleri INP süresini artırabilir. Gereksiz betikleri kaldırıp tekrar ölçün.

requestIdleCallback ve setTimeout ile ağır işlemleri ertelein. Kullanıcı etkileşimi sırasında kritik olmayan işleri arka plana alın.

React/Vue gibi framework'lerde unnecessary re-render'ları önleyin. useMemo, useCallback ve memo ile gereksiz hesaplamaları atlayın.

Genel Hız Optimizasyonu

HTTP/2 veya HTTP/3 kullanın. Çoklu istekleri paralel işleme ve header sıkıştırma sağlar. Modern hosting sağlayıcıları varsayılan olarak destekler.

Gzip veya Brotli sıkıştırma etkinleştirin. Metin tabanlı kaynaklar (HTML, CSS, JS) %60-80 oranında küçülür. Sunucu yapılandırmasında etkinleştirin.

Statik varlıkları önbellekleyin. Cache-Control header'ları ile tarayıcı ve CDN önbellekleme sürelerini ayarlayın. Immutable varlıklar için uzun TTL kullanın.

Kritik CSS'i inline et, geri kalanını async yükleyin. İlk görünüm (above-the-fold) için gerekli CSS'i sayfa başına gömün.

JavaScript'i code splitting ile bölün. Her sayfa için sadece gerekli kodu yükleyin. Dynamic import() ile lazy loading uygulayın.

Görselleri lazy load ile yükleyin. Sayfa altında kalan görselleri sadece görünür olduğunda yükleyin. loading="lazy" attribute'u yeterlidir.

Prefetch ve preconnect ile kaynakları önceden yükleyin. <link rel="preconnect" href="https://fonts.googleapis.com"> ile DNS ve TCP bağlantısını önceden kurun.

Ölçümleme Araçları

Google PageSpeed Insights: Lighthouse tabanlı performans raporu. Mobil ve masaüstü için ayrı skorlar verir. İyileştirme önerileri sunar.

Chrome DevTools Performance tab: Sayfa yükleme sürecini adım adım analiz eder. Long tasks, layout shifts ve paint timing'leri gösterir.

Web Vitals uzantısının desteği sona erdi. Chrome DevTools Performance panelini kullanın.

CrUX (Chrome User Experience Report): Gerçek kullanıcı verilerini toplar. Search Console'da Core Web Vitals raporu olarak görünür.

Search Console Core Web Vitals raporu: Sitenizin URL'lerini 'İyi', 'İyileştirme gerekli' ve 'Kötü' olarak sınıflandırır. Hangi sayfaların optimizasyon gerektirdiğini gösterir.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience