Core Web Vitals

Core Web Vitals, Google tarafından kullanıcı deneyimini ölçmek ve iyileştirmek amacıyla tanımlanan temel performans metrikleridir. Web sitenizin hız, etkileşim ve görsel kararlılık kriterlerini ölçerek, arama motoru sıralamalarınızın yanı sıra kullanıcı memnuniyetini de artırmanıza yardımcı olur.

Core Web Vitals nedir, nasıl ölçülür ve optimizasyon teknikleri nelerdir? Bu rehberde LCP, FID ve CLS metriklerini detaylıca ele alıp adım adım analiz süreci ve iyileştirme yöntemlerini öğrenin.

Bu makalede Core Web Vitals’ın ne olduğunu, nasıl ölçüldüğünü, analiz adımlarını ve optimizasyon tekniklerini detaylı şekilde inceleyeceğiz.

Core Web Vitals Metrikleri

Largest Contentful Paint (LCP)

Tanım: Bir sayfanın en büyük içerik parçasının (ör. metin bloğu, resim, video çerçevesi) kullanıcının ekranına ne kadar sürede yüklendiğini ölçer.
Hedef Değer: İyi bir kullanıcı deneyimi için LCP’nin 2.5 saniyeden kısa olması önerilir.
Ölçüm Süreci
Sayfa yüklendiğinde tarayıcı, en büyük içerik elemanının render süresini kaydeder.
Farklı cihaz ve ağ koşullarında ortalama süre referans alınır.

First Input Delay (FID)

Tanım: Kullanıcının sayfa ile ilk etkileşimi (butona tıklama, bağlantıya tıklama, form girişi) ile tarayıcının bu etkileşime yanıt vermesi arasındaki gecikmeyi ölçer.
Hedef Değer: FID’in 100 ms’nin altında olması iyi bir etkileşime işaret eder.
Ölçüm Süreci
Kullanıcı ilk etkileşimi başlatır.
Tarayıcı ana iş parçacığı (main thread) boş olduğunda yanıt verir ve gecikme kaydedilir.

Cumulative Layout Shift (CLS)

Tanım: Sayfa yüklenirken veya etkileşim sırasında beklenmedik düzen kaymalarının toplamını ölçer.
Hedef Değer: CLS skorunun 0.1’in altında olması önerilir.
Ölçüm Süreci
Her bir düzen kayması (layout shift) için “impact fraction” ve “distance fraction” hesaplanır.
Bu değerlerin çarpımı, sayfanın toplam düzen kayması skorunu oluşturur.

Ölçüm Araçları ve Yöntemleri

Google PageSpeed Insights
Hem laboratuvar (simüle) hem de alan (gerçek kullanıcı) verilerini sunar.
LCP, FID ve CLS için ayrıntılı rapor ve öneriler sağlar.
Lighthouse
Chrome DevTools içinde yer alır.
Otomatik performans denetimleri gerçekleştirir.
Chrome User Experience Report (CrUX)
Gerçek kullanıcı verilerine dayalı raporlar sunar.
Web Vitals JavaScript Kütüphanesi
Kendi sitenizde özel analizler yapmak için web-vitals paketi ile metrikleri kaydedebilir ve raporlayabilirsiniz.

Core Web Vitals Analiz Süreci

Temel Ölçümlerin Alınması
PageSpeed Insights veya Lighthouse ile ana sayfa, ürün sayfası, kategori sayfası gibi kritik sayfaları tarayın.
Veri Karşılaştırması
Laboratuvar sonuçları (Lighthouse) ile gerçek kullanıcı verileri (CrUX) arasındaki farkları analiz edin.
Bottleneck Belirleme
Yavaş yüklenen kaynaklar (büyük resimler, JavaScript dosyaları), ana iş parçacığının uzun süre meşgul olması, düzen kaymalarına sebep olan CSS/JS değişimleri tespit edilir.
Hedef Belirleme
Öncelik sırasına göre LCP, FID veya CLS iyileştirmeleri planlayın.
İzleme ve Raporlama
Süreç boyunca düzenli olarak performans testleri yapın ve geliştirmelerin etkisini raporlayın

Optimizasyon Teknikleri

LCP İyileştirme
Resimleri optimize edin (WebP, AVIF formatları; responsive srcset).
Kritik CSS’i inline yapın, geri kalan stil dosyalarını defer edin.
Sunucu yanıt süresini (TTFB) iyileştirin; CDN kullanın, önbellekleme stratejilerini uygulayın.
FID İyileştirme
Büyük JavaScript dosyalarını bölün (code splitting).
Web Worker kullanarak ana iş parçacığını rahatlatın.
Etkileşim gerektirmeyen kodları defer veya async ile yükleyin.
CLS İyileştirme
Boyutları belli olmayan medya öğelerine (resim, video) genişlik-yükseklik attributelarını ekleyin.
Dinamik içerik eklerken “placeholder” veya rezerve boşluk kullanın.
CSS animasyon ve geçişlerde transform ve opacity tercih edin, top/left gibi yer değiştiren özelliklerden kaçının.

Uygulama ve Araçlar

Next.js gibi framework’lerde yerleşik optimizasyon özelliklerini kullanın (automatic image optimization, code splitting).
Webpack veya Rollup ile bundle analiz araçları (Bundle Analyzer) kullanarak en büyük paketleri tespit edin.
GitHub Actions veya CircleCI gibi CI/CD süreçlerine performans kontrol adımları ekleyin.

Örnek Analiz Akışı

Sayfa Seçimi: Ana sayfayı PageSpeed Insights ile tarayın → LCP = 3.8s, FID = 150ms, CLS = 0.25
Bottleneck: LCP için büyük hero görseli; FID için büyük bir monolith JS dosyası; CLS için dinamik banner.
Müdahale:
Görseli WebP’ye çevirip bileşeniyle responsive boyutlandırma.
Ana JS paketini parçalayarak kritik kodu inline, geri kalanını defer.
Banner’a sabit yükseklik verip içeriği dolduran placeholder ekledik.
Yeniden Test: LCP = 2.2s, FID = 80ms, CLS = 0.08 → Google’ın “iyi” eşiğini geçtik.

Core Web Vitals analizi, hem SEO hem de kullanıcı deneyimi açısından kritik öneme sahiptir. Düzenli ölçüm, doğru araç kullanımı ve hedefe yönelik optimizasyon teknikleriyle, sayfa performansınızı Google’ın önerdiği değerlere çekebilir ve rekabette bir adım öne geçebilirsiniz.

Core Web Vitals Analizi