Bir web sitesinin hızı artık yalnızca teknik bir detay değil, hem kullanıcı memnuniyetini hem de arama motoru sıralamasını belirleyen bir faktördür. Google'ın Core Web Vitals metrikleri, sayfa deneyimini ölçülebilir hale getirir. Bu yazıda üç temel metriği (LCP, INP ve CLS) tek tek ele alıyor ve her biri için sahada işe yarayan iyileştirme tekniklerini paylaşıyoruz.
Largest Contentful Paint (LCP): İlk Büyük İçeriği Hızlandırın
LCP, sayfadaki en büyük görsel öğenin ne kadar sürede ekrana geldiğini ölçer. İyi bir deneyim için bu değerin 2,5 saniyenin altında olması gerekir. LCP genellikle bir kapak görseli, video posteri veya büyük bir başlık bloğudur.
- Görselleri modern formatlarda (WebP, AVIF) sunun ve boyutlarını cihaza göre ayarlayın.
- Kritik görsel için priority ya da fetchpriority="high" kullanarak yüklemeyi öne alın.
- Sunucu yanıt süresini (TTFB) düşürmek için CDN ve önbellekleme kullanın.
- Render'ı engelleyen CSS ve font yüklemelerini optimize edin.
Interaction to Next Paint (INP): Etkileşim Gecikmesini Azaltın
2024'te FID'in yerini alan INP, kullanıcının bir etkileşiminden (tıklama, dokunma, tuş) sonra arayüzün ne kadar hızlı yanıt verdiğini ölçer. Hedef değer 200 milisaniyenin altıdır. Yüksek INP genellikle ağır JavaScript işlemlerinden kaynaklanır.
Uzun süren görevleri parçalara bölmek, ana iş parçacığını serbest bırakmanın en etkili yoludur. Kritik olmayan hesaplamaları geciktirin, gereksiz olay dinleyicilerini kaldırın ve üçüncü taraf betiklerini erteleyin. React uygulamalarında ağır listeleri sanallaştırmak ve gereksiz yeniden render'ları önlemek INP'yi belirgin biçimde iyileştirir.
Cumulative Layout Shift (CLS): Görsel Kararlılığı Koruyun
CLS, sayfa yüklenirken öğelerin beklenmedik biçimde kaymasını ölçer. Kullanıcının yanlış butona tıklamasına yol açan bu kaymalar hem sinir bozucudur hem de metriği kötüleştirir. Hedef değer 0,1'in altındadır.
- Görsel ve video öğelerine mutlaka genişlik ve yükseklik tanımlayın.
- Reklam ve gömülü içerik alanları için önceden yer ayırın.
- Fontları font-display: swap ile yükleyip düzen kaymasını önleyin.
- İçeriği mevcut öğelerin üstüne değil, ayrılmış alanlara ekleyin.
Metrikleri Doğru Araçlarla Ölçmek
İyileştirme yapmadan önce mevcut durumu ölçmelisiniz. Laboratuvar verisi ile saha verisini birlikte değerlendirmek önemlidir; çünkü gerçek kullanıcı deneyimi test ortamından farklı olabilir.
- PageSpeed Insights ve Lighthouse laboratuvar analizi için.
- Chrome User Experience Report (CrUX) gerçek kullanıcı verisi için.
- web-vitals kütüphanesiyle kendi analitiğinize saha metriklerini gönderme imkânı.
Sürekli İzleme ve Regresyon Önleme
Core Web Vitals bir kez düzeltilip unutulacak bir konu değildir. Her yeni özellik, üçüncü taraf betiği veya görsel eklemesi metrikleri bozabilir. Bu nedenle sürekli izleme şarttır.
CI/CD sürecine performans bütçeleri ekleyerek, belirlenen eşiklerin aşıldığı durumlarda derlemeyi uyaracak kontroller kurabilirsiniz. Böylece performans regresyonları üretime çıkmadan yakalanır.
Core Web Vitals'ı iyileştirmek, kullanıcılarınıza daha akıcı bir deneyim sunarken arama sıralamanızı da güçlendirir. Ölçün, önceliklendirin ve iyileştirmeleri sürekli izleyerek sitenizin performansını kalıcı bir rekabet avantajına dönüştürebilirsiniz.