Core Web Vitals, Google’ın bir sayfanın kullanıcıya ne kadar iyi bir deneyim sunduğunu ölçmek için kullandığı üç ölçüttür. Bu ölçütler arama sıralamasında tek başına belirleyici değildir; ama yavaş ve zıplayan bir sayfa, sıralamadan bağımsız olarak ziyaretçiyi kaçırır. Bu rehberde üç ölçütü sade bir dille anlatıyor ve her biri için en sık karşılaştığımız sorunları sıralıyoruz.
LCP: en büyük içerik ne zaman görünüyor?
Largest Contentful Paint (LCP), sayfadaki en büyük görsel ya da metin bloğunun ekranda göründüğü andır. Kullanıcı açısından “sayfa açıldı” hissinin karşılığıdır. İyi bir LCP 2,5 saniyenin altındadır.
En sık nedenler ve çözümleri:
- Karşılama görseli çok büyük: görseli ekran genişliğine uygun boyutlarda, AVIF ya da WebP biçiminde sunun ve srcset kullanın.
- Görsel geç keşfediliyor: en büyük görseli önceden yüklenecek (preload) olarak işaretleyin ve tembel yüklemeyi bu görselde kapatın.
- Sunucu yavaş: önceden üretilmiş (statik) sayfalar ve önbellek kullanın.
- Yazı tipi metni geciktiriyor: font-display: swap kullanın, yazı tiplerini alt kümeleyin.
INP: tıklayınca ne kadar sürede tepki veriyor?
Interaction to Next Paint (INP), kullanıcının bir düğmeye tıklaması ya da bir alana yazması ile ekranın buna tepki vermesi arasındaki süredir. 200 milisaniyenin altı iyi kabul edilir.
INP’yi bozan şey neredeyse her zaman JavaScript’tir:
- Ana pakete her şeyi koymak: sayfaları ve ağır bileşenleri rota bazında bölün.
- Uzun görevler: büyük hesaplamaları parçalara ayırın ya da kullanıcı etkileşimi sırasında yapmayın.
- Üçüncü taraf betikler: sohbet balonları, reklam ve izleme betikleri ana iş parçacığını meşgul eder; gerçekten gerekli olanları tutun ve geç yükleyin.
CLS: sayfa yüklenirken zıplıyor mu?
Cumulative Layout Shift (CLS), sayfa yüklenirken öğelerin beklenmedik biçimde kaymasını ölçer. Okumakta olduğunuz metnin bir anda aşağı kayması ya da tam tıklayacakken düğmenin yer değiştirmesi buna örnektir. 0,1’in altı iyi kabul edilir.
- Görsellere genişlik ve yükseklik verin ya da aspect-ratio kullanın.
- Reklam, gömülü video ve çerez bildirimleri için yer ayırın.
- Yazı tipi değişimini yumuşatın: yedek yazı tipinin ölçülerini asıl yazı tipine yaklaştırın.
- Üstten kayarak gelen bantlardan kaçının.
Mobil önce
Ölçümler mobil ve masaüstü için ayrı yapılır ve çoğu zaman sorun mobildedir. Masaüstünde hızlı görünen bir site, orta seviye bir telefonda ve 4G bağlantıda bambaşka davranabilir. Testlerimizi her zaman mobil profille yaparız.
Karşılama videosu kullanılabilir mi?
Evet, ama dikkatle. Video asla en büyük içerik öğesi olarak sayfayı beklememelidir. Biz önce poster görseli gösterir, videoyu sayfa yüklendikten ve tarayıcı boşta kaldıktan sonra yükleriz. Hareket azaltma tercihi açık olan ziyaretçilere ve veri tasarrufu modundaki telefonlara yalnız poster gösteririz.
Teslimde ne bekleyebilirsiniz?
Her projenin teslim raporunda ana şablonların mobil LCP, INP ve CLS değerleri yer alır. Hedefi tutmayan bir şablon yayına çıkmadan düzeltilir. Bakım sözleşmesindeki sitelerde bu ölçümler her ay tekrarlanır; yeni eklenen bir eklenti ya da büyük bir görsel hızı bozduğunda erken fark ederiz.
Önce hangi sayfa?
Bütün sayfaları aynı anda iyileştirmeye çalışmak yerine trafiğin ve gelirin en çok geldiği şablonlardan başlayın: e-ticarette ürün ve kategori sayfası, kurumsal sitede ana sayfa ve hizmet sayfaları. Bir şablonda yapılan düzeltme, o şablonu kullanan yüzlerce sayfayı birden iyileştirir.
Core Web Vitals bir kez düzeltilip unutulacak bir konu değildir; içerik büyüdükçe izlenmesi gereken bir sağlık göstergesidir.
Projenizi konuşalım. Brief sihirbazı iki dakikada kapsamı, süreyi ve önerilen ekibi çıkarır.
Brief’i başlat
