Core Web Vitals Nedir ve Neden Önemlidir?
Core Web Vitals Nedir?
Türkçe adıyla, “Temel Web Yaşamsal Değerleri” olan bu kavram, Google’ın bir web sayfasının genel kullanıcı deneyiminde önemli olduğunu düşündüğü bir dizi faktörlerdir. Kullanıcılarının daha kaliteli bir internet deneyimi yaşamaları adına 2021 yılının Haziran ayında kullanılmaya başlanmış yeni bir metriktir.
Burada amaç; site sahiplerinin, mevcut kullanıcılara sunduğu web sitesi deneyimini ölçmelerine yardımcı olmak için hız, tepkime süresi ve görsel uyumluluk bilgilerini sunmak için geliştirilmiş metrikler sunmaktır.
Kısacası “Core Web Vitals”, Google’ın sayfa deneyimi puanının bir parçası olacak faktörlerin bir alt kümesidir.
Core Web Vitals Neden Önemlidir?
Vitals, Google’ın bir girişimi olduğu için, bir sitenin sitedeki kullanıcı deneyimini değerlendirirken Google, büyük olasılıkla Vitals puanlarını da site puanı açısından önemli bir faktör olarak ele alacaktır. Eğer sitenizin iyi performans gösterdiğini düşünüyorsa, sitenize olumlu bakacak ve bu, arama motoru sonuç sayfalarında olumlu sonuç almanıza sebep olacaktır.
Core Web Vitals Metriği Hangi Alt Kümelerden Oluşmaktadır?
Core Web Vitals metriği, 3 ana başlıkta sınıflandırılmıştır.
Bunlar:
- Largest Contentful Paint (LCP),
- First Input Delay (FID),
- Cumulative Layout Shift (CLS),
1) Largest Contentful Paint (LCP)
LCP (En Büyük Zengin İçerikli Boya), gerçek bir kullanıcının bakış açısından bir sayfanın yüklenmesinin ne kadar sürdüğüyle alakalıdır.
Başka bir deyişle: bir bağlantıya tıkladıktan sonra, ekrandaki içeriğin çoğunu görmek arasında geçen zamandır.
Ekrandaki içerikler ve medya öğeleri dışında hiçbir unsur, bu kavrama dahil değildir. Web sitesinin arka planındaki fonksiyonlar, LCP’yi etkilememektedir.
LCP Sorunu Neden Olur?
Google’a göre LCP süresinin yüksek çıkmasının birkaç nedeni şunlardır:
- Yavaş sunucu yanıt süreleri,
- Oluşturmayı engelleyen JavaScript ve CSS kodları,
- Yavaş kaynak yükleme süreleri,
- İstemci tarafı oluşturma.
Sitenizdeki LCP Sorunlarını Kaldırmak için Kullanılabilecek Bazı Yöntemler:
- Gereksiz üçüncü taraf komut dosyalarını kaldırın,
- Web barındırıcınızı yükseltin,
- Geç yüklemeye sebep olan sorunları toollarla araştırın,
- Büyük sayfa öğelerini kaldırın,
- CSS’lerinizi sıkıştırın ve küçültün.
First Contentful Paint (FCP) Nedir?
First Contentful Paint (FCP), Google Search Console Hız Raporu’nda ölçülen yeni ölçümlerden biridir. First Contentful Paint veya FCP, kullanıcının web sitesine girdiği andan itibaren ve tarayıcının ekrandaki ilk içeriği boyadığı andan itibaren geçen zamanı ölçer.
Kısaca, sayfanın yüklenmeye başlamasından sayfa içeriğinin herhangi bir bölümünün ekranda görüntülenmesine kadar geçen süreyi hesaplar.
Google, FCP zamanlaması olarak; 0-2 saniye aralığında olursa yeşil (hızlı), 2-4 saniye aralığında olursa turuncu (orta hızlı) , 4 saniye üzerinde olursa da kırmızı renk (yavaş) olarak gösterir.
FCP Sorunu Neden Olur?
FCP skorunun düşmesine neden olabilecek bazı sorunlar:
- Yavaş sunucu yanıt süreleri,
- Oluşturmayı engelleyen kaynaklar,
- İstemci tarafı oluşturma,
- Web tabanlı yazı tipleri sorunu.
Sitenizdeki FCP Sorunlarını Kaldırmak için Kullanılabilecek Bazı Yöntemler:
- FCP sürelerini düşürmek için iyi bir web barındırma hizmeti kullanmalısınız. Yavaş yanıt veren sunuculardan kurtulmanız gerekmektedir. İdeal olarak, kullanıcılarınızın yakınında bulunan sunuculara sahip bir lokasyondaki sunucuyu seçin.
- Önbelleğe alma, sunucu işlem süresini azaltmaya yardımcı olur.
- Bir web sitesi, HTML, CSS ve JS komut dosyaları gibi birçok öğeyi bir araya getirdikten sonra tarayıcı tarafından oluşturulur. Bu kaynakları sıkıştırarak ve kullanılmayan kaynakları silerek veya farklı sayfada kullanılan kaynakları o sayfaya özel bir dosya ile çağırarak “oluşturmayı engelleyen kaynakları ortadan kaldırın” uyarısından kurtulabilirsiniz. Böyle FCP sürelerine olumlu yönde etki yapar.
- Lazy load kullanmak sayfalarınızın alt bölümünde kalan medya içeriklerini ertelemek için harikadır. Ancak lazy load, tarayıcının herhangi bir görüntüyü işleyebilmesi için JS kullanılmasını gerektirdiğinden, FCP sürenizi biraz arttırabilir. Bu sebeple ekranın görünür kısımlarında, üst bölümlerde lazy load kullanmaktan kaçının.
- Bazı tarayıcılar, tüm yazı tipleri yüklenene kadar metin oluşturmaz. Özel yazı tipleri yüklenirken tarayıcıyı geçici olarak bir sistem yazı tipini göstermeye zorlayarak bunu düzeltebilirsiniz.
- Harici bir web sitesinden herhangi bir varlık yüklüyorsanız, dns-prefetch parametresini eklemek, tarayıcıya URL’nin DNS’sini olabildiğince çabuk çözmesini söyleyecektir.
2) First Input Delay (FID) Nedir?
Türkçe’si “İlk Giriş Gecikmesi” olan FID, bir kullanıcının bir sayfayla ilk etkileşime girdiği zamandan (yani bir bağlantıya tıkladığında, bir düğmeye dokunduğunda veya özel, JavaScript destekli bir denetim kullandığında) tarayıcının olay işleyicilerini işlemeye başlayabildiği zamana kadar geçen süreyi ölçer.
Kullanıcının, web siteniz hakkındaki ilk düşünceleri konusunda önemli bir yer tutar. Tarayıcı ne kadar hızlı tepki verirse, sayfa o kadar duyarlı görünür.
FID, sayfanın yüklenmesi sırasında meydana gelen tüm etkileşimleri ölçer. Bunlar dokunma, tıklama ve tuşa basma gibi girdi eylemleridir. Ancak yakınlaştırma ve kaydırma gibi etkileşimler değildir.
Google’ın yeni ölçümleri, duyarlı görünmek için 100 ms’den daha az bir FID gerektiriyor. 100 ms ile 300 ms arasında bir değer çıkıyorsa, sitenizin iyileştirilmesi gerekmektedir.
Sitenizdeki FID Sorunlarını İyileştirmek için Kullanılabilecek Bazı Yöntemler:
- JavaScript’i en aza indirin veya erteleyin.
Tarayıcı JS’yi yüklerken kullanıcıların bir sayfayla etkileşime girmesi neredeyse imkansızdır. Bu nedenle, sayfanızdaki JS’yi en aza indirmek veya ertelemek FID için çok önemlidir.
- Kritik olmayan üçüncü taraf komut dosyalarını kaldırın.
Tıpkı FCP’de olduğu gibi, üçüncü taraf komut dosyaları (Google Analytics, ısı haritaları vb.) FID’yi olumsuz etkileyebilir.
- Bir tarayıcı önbelleği kullanın.
Bu, sayfanızdaki içeriğin daha hızlı yüklenmesine yardımcı olur. Böylece kullanıcınızın tarayıcısının JS yükleme görevlerini daha da hızlı tamamlamasını sağlar.
3) Cumulative Layouts Shift (CLS) Nedir?
Kümülatif Düzen Kaydırma (CLS), bir sayfanın yüklenirken ne kadar kararlı olduğudur. Buna, görsel kararlılık da denmektedir.
Başka bir deyişle: sayfa yüklenirken sayfa içerisindeki öğeler hareket ederse (reklamlar, açılır pencereler vb.) , CLS hızı da bir o kadar olumsuz yönde etkilenmektedir.
CLS’nin Sebepleri Nelerdir?
- Boyutları belirtilmemiş görseller,
- Reklamlar,
- Dinamik olarak eklenen öğeler,
- Bannerlar, Pop- Ups.
a) Boyutları Belirtilmemiş Görseller
Width ve Height değerleri girilmemiş görseller CLS puanını olumsuz etkilediğinden, sitede bulunan görsellerin belli bir boyutu olmalıdır. Eğer görseller responsive olarak farklı boyutlarda eklenmişse bütün görsellerin en – boy oranı aynı olmalıdır.
b) Reklamlar
Reklamların belirlenen bölgeden taşmaması için reklam alanı statik olarak belirlenerek, reklamların belirlenen alanlardan taşarak içeriği kaydırması önlenebilir.
Reklamların header kısmının üst tarafına yerleştirilmesi reklam yüklenirken sayfayı aşağı iteceğinden reklamlar en üst taraf yerine site içerisinde ortalanarak ve bulunduğu bölgenin boyutları belirlenerek yerleştirilmelidir.
c) Embed ve Inline İçerikler
Siteye bir Youtube veya başka bir sosyal medya postu embed ettiğinizde bu içeriklerin de boyutları belirlenmelidir.
d) Bannerlar, Pop – Ups
Hemen e-mail listesine kayıt ol vb. gibi statik olarak eklenmiş ve belirli bir alan belirtilmemiş içerikler de sayfa yüklenirken kaymaya sebep olmaktadır. Bu sebepten bu tip öğeler için sitede belli bir bölüm ayrılmalı ve bu öğeler o alanlarda yüklenirken taşmamalıdırlar.
Düzen Kaymalarını Önemli Ölçüde Azaltabilecek Birkaç Optimizasyon:
- Diğer içeriklerin üzerine reklamlar ve pop-up’lar eklemekten kaçının. Bir sayfadaki içeriklerin üstüne içerik eklemek, içeriğin okunurluğunun ve görünürlüğünün azalmasına neden olarak kötü bir CLS puanına neden olur.
- Resimlere genişlik ve yükseklik nitelikleri ekleyin . Bu öznitelikler, tarayıcının her görüntü için önceden doğru miktarda alan ayırmasına yardımcı olur. Bu, düzen kaymalarını önemli ölçüde azaltır.
- Özel bir yazı tipi kullanmayı tercih ediyorsanız, tarayıcının yazı tipini “ön yükleme” seçeneğini kullanın.
