Core Web Vitals, Web site sahiplerinin uygulamalarını gelişmiş bir kullanıcı deneyimi sunabilmek adına optimize etmeye sağlayan google’ın metrikler seti olarak tanımlanmaktadır.
Core Web Vitals temelde 3 bileşeni içerisinde barındırır. Bunlar;
LCP (Largest Contentful Paint), FID(First İnput Delay) ve CLS(Cumulative Layout Shift)’dir. Şimdi sırasıyla anlamları ve işlevsellikleri konusunda detaylı bilgi vermeye çalışacağım.
LCP (Yükleniyor) – Bu bileşenin işlevi web sayfanız yüklenirken içeriğinizin anlam kazanma zamanını belirlemektir. Largest Contentful Paint
FID (Etkileşim) – Web sayfanız yüklendiğinde ekrandaki bileşenler kullanıcıların etkileşimine hassasiyeti var mı ya da ne oranda var bu soruya yanıt aramaktadır. First Input Delay
CLS (Görüntü stabilitesi ya da kararlılığı) – Web sayfanızın yüklenme aşamasında ve yüklendikten sonra sayfa görüntü bileşenleriniz hangi oranda stabil kalıyor ya da kayıyor. Cumulative Layout Shift
Yukarıda açıkladığımız bu metrikler google’ın sıralama sinyalleri arasında etkili hale gelmeye başladı ve bu metrikler arasında özellikle Cumulative Layout Shift adı verilen CLS en etkili olan metrik haline geldi.
Google’ın özellikle hız performansı üzerinde durması ve hız performansı metriklerine önem vermesi amacı en temelde hala yer alıyor. Bu amaca yönelik yardımcı geliştiriciler kodlama alanındaki gelişmeler kod kalitelerinin arttırılması da bu duruma fayda sağlamaktadır.
Core Web Vitals metrikleri de hız performansına fayda sağlayıcı bir yöntem olarak nitelendirilmektedir. Sayfa deneyimlerini iyileştirici yönde etki eden bu bileşenleri detaylı bir şekilde açıklamaya çalışacağım.
İlk olarak LCP ile başlayalım.
Zengin İçerikli Görüntü anlamını taşıyan LCP gerçek kullanıcının sayfa yüklenirken ilk ekranda gördüğü görüntünün ne kadar vakit aldığını ölçer. Örneğin sayfanın linkine tıkladığımızda logonun, sayfa adının ve sayfa görsellerinin görünmesine kadar geçen süre LCP’dir ve bir kullanıcının ilk deneyimi için önemlidir.
LCP metriği aşağıdaki aşamalardan oluşur.
Sunucuya gerekli kaynaklar için istek oluşturulur sonrasında DNS araması yapılır , TCP bağlantısı açılır ve SSL/TLS doğrulaması yapılır.
HTML kaynağı sunucudan çağırılır ve dönüş cevabına göre HTML ayırtılır.
CSS ve Javascript gibi ilk görüntüyü oluşturmak için gerekli kritik kaynaklar ayırt edilerek işlenir.
Tüm yukarıda belirttiğim aşamalar LCP metriğini oluşturan bir bütündür. Hız performansını arttırmak için yapılabilecek en iyi çalışma gerekli kaynakların yüklenmesini hızlandırmaktır.