#Core Web Vitals#Web Performansı#LCP#CLS

Google, 2021'den bu yana Core Web Vitals'ı resmi sıralama faktörü olarak kullanıyor. LCP, INP ve CLS olarak bilinen bu üç metrik, kullanıcı deneyiminin temel göstergeleri. Bu rehberde, her metriği detaylıca açıklıyor ve pratik optimizasyon yöntemlerini paylaşıyoruz.

LCP (Largest Contentful Paint): Yükleme Hızı

LCP, sayfanın en büyük içerik öğesinin (genellikle hero görseli veya büyük metin bloğu) yüklenme süresini ölçer. İyi bir LCP skoru 2.5 saniyenin altında olmalı. LCP'yi iyileştirmek için: Sunucu yanıt süresini azaltın, render-blocking kaynakları ortadan kaldırın, görselleri optimize edin ve CDN kullanın.

LCP'nin %75'i görselden kaynaklanır. Hero görselinizi WebP formatına dönüştürmek ve preload etmek LCP'yi dramatik şekilde iyileştirir.

INP (Interaction to Next Paint): Etkileşim Hızı

INP, kullanıcının bir etkileşimi (tıklama, dokunma, klavye girişi) gerçekleştirmesinden sayfanın görsel olarak güncellenmesine kadar geçen süreyi ölçer. 200ms altı iyi, 500ms üzeri kötü kabul edilir. JavaScript yürütme süresini azaltmak, uzun görevleri parçalamak ve web worker'lar kullanmak INP'yi iyileştirir.

Core Web Vitals Optimizasyon Adımları:

Görselleri WebP/AVIF formatına dönüştürün
Kritik kaynakları preload edin
JavaScript'i defer veya async yükleyin
Kullanılmayan CSS ve JS'yi kaldırın
CDN kullanarak sunucu yanıt süresini azaltın
Font yükleme stratejisini optimize edin
Layout shift'e neden olan elementleri düzeltin
Üçüncü taraf script'leri optimize edin

CLS (Cumulative Layout Shift): Görsel Kararlılık

CLS, sayfa yüklenirken içeriklerin beklenmedik şekilde kaymasını ölçer. 0.1'in altı iyi kabul edilir. CLS'nin en yaygın nedenleri: Boyutsuz görseller, dinamik olarak eklenen içerikler, web fontları ve üçüncü taraf reklamlar. Tüm görsellere width ve height attribute'u eklemek CLS'yi önemli ölçüde azaltır.