Core Web Vitals Nedir? Core Web Vitals Bileşenleri Nelerdir?

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 Bileşenleri Nelerdir?

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.

LCP nedir? ve LCP metriği nasıl oluşur?

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.