Mayıs 2020’de Google, Core Web Vitals olarak bilinen temel bir algoritma güncellemesini duyurdu. Haziran 2021’den bu yana, bu ölçümler Google’ın sıralama algoritmasına dahil edildi. Bu algoritma güncellemesi ile iyi bir kullanıcı deneyimi sunan web siteleri daha üst sıralarda yer alırken, sunmayan web siteleri daha alt sıralarda yer aldı.

Core Web Vitals’ın Tarihçesi

Google her zaman arama sorguları için en iyi sonuçları sunmaya çalışır. Bu noktada hem içerik hem de kullanıcıların ihtiyaçlarını ön planda tutar. Ancak hedef sayfalardaki içeriğin tüketilmesi de kolay olmalıdır. Eğer okumak istediğiniz bir içerik için 2 dakika beklemeniz gerekiyorsa, en iyi içeriğin size hiçbir faydası olmaz? Böyle bir durumda ziyaretçiler genellikle siteden çıkar. Tüm bu sebeplerden dolayı Google, içeriğin kullanıcıya ne kadar çabuk ulaştığını ve sayfanın kullanımının kolay olup olmadığını ölçmek için kullanılabilecek değerler bulmaya başladı.

Google ilk başta sadece sayfa açıldıktan sonra ilk baytın kullanıcıya ulaşması için geçen süreyi ölçtü (TTFB = Time To First Byte). Ancak bu tek başına, kullanıcıların tarayıcıda içeriği gerçekten ne zaman gördükleri hakkında hiçbir şey göstermedi. Sonuç böyle olsa da, bu değer hala çok önemli kabul edilmektedir.

Daha sonra, içeriğin ne zaman yüklendiğini ölçmek için farklı yöntemler eklendi. Bunlar “Page Complete” ve “DOMContentLoaded” değerlerinden “First contentful paint” ve “First mainful paint” değerlerine kadar uzandı. Ancak bunlar genellikle hatalı ya da gerçekten anlamlı olamayacak kadar dengesizdi.

Daha sonra sayfanın kullanıcı girdisine ne zaman tepki verebileceğini ölçmek için “Etkileşim süresi” eklendi. Ancak, teknolojinin sürekli olarak daha da gelişmesi nedeniyle, tüm bu değerlerin yeterince anlamlı olmadığı anlaşıldı.

Sonuç olarak Google, bu ölçümleri geliştirmeye devam etti ve şimdi tüm bu ölçümleri “Core Web Vitals”da birleştirdi. Bununla birlikte, bu değerlerin sabit olmadığını ve her zaman daha da geliştirileceğini unutmamanız gerekir.

Sıralamalar nasıl belirlenir?

Peki Google verileri gerçekte nereden alır?

Sıralamaları hesaplamak için arama motoru “Chrome Kullanıcı Deneyimi” raporundaki alan verilerini değerlendirir. Bu, Google’ın Chrome tarayıcısı aracılığıyla doğrudan kullanıcılardan topladığı verilerdir.

Her URL için yeterli veri mevcut olmadığından, Google bu sayfaların değerlerini, yeterli verinin belirlenebildiği benzer sayfaların (aynı alanın) ölçülen verilerine dayanarak tahmin eder.

Şanssızsanız, Google yalnızca yavaş alt sayfaların verilerini belirleyebilir, bu durumda tahmin için bunlar kullanılır. Yeterli veri yoksa hızlı bir sayfa avantaj sağlamayabilir.

Google, sıralamaları hesaplamak için her zaman kullanıcıların doğrudan Google Arama’dan geldiği sayfanın sürümünü de kullanır. Örneğin, mobil sayfalar veya AMP sayfaları için hala m.domain.com kullanıyorsanız, bu sayfaların değerleri esas alınır.

“Noindex” olarak ayarlanmış veya robots.txt tarafından Google için engellenmiş sayfalar da hesaplamaya dahil edilebilir. Kullanıcılar tarafından erişilebildikleri için bunlarla ilgili veriler mevcuttur. Ancak, bu tür sayfalar genellikle optimize edilmediğinden, karşılaştırma için negatif veri setleri sağlama eğiliminde olacaktır.

Core Web Vitals Güncellemesi Nedir?

Kaynak: chromium

Core Web Vitals, 2020 baharında tanıtılan üç kullanıcı merkezli metriktir. Temel olarak “web sayfası yükleme süresi” konusuyla ilgilidir. Google’ın Core Web Vitals güncellemesi, web sitelerini web sitesi hızı, yanıt verebilirlik ve görsel kararlılıkla ilgili üç temel ölçüme göre değerlendirir.

1. Largest Contentful Paint (LCP)

LCP, görüntü alanına en büyük resim, video veya metin bloğunu yüklemek için geçen süredir. Bu metrik önemlidir çünkü en büyük blok muhtemelen kullanıcının sayfada görüp deneyimleyeceği en önemli bloktur. Hızlı bir LCP, ziyaretçilerin en önemli ve ilgili bilgilere hızla erişebilmesini sağlamaya yardımcı olur.

2. First Input Delay (FID)

FID, bir kullanıcının sitenizle ilk etkileşime girdiğinde yaşadığı gecikmeyi ifade eder. Bu eylem genellikle bir tıklama veya dokunmadır. Tarayıcı ne kadar hızlı yanıt verirse, sayfa o kadar duyarlı olacaktır.

Geliştiriciler her zamankinden daha karmaşık siteler oluşturdukça, tarayıcılar çok meşgul hale gelir. Tarayıcının ana iş parçacığı başka görevlerle meşgulse ve eyleme hemen yanıt veremiyorsa, kullanıcı girişi gecikebilir.

Gecikmeler, web sitenizin yavaş ve tepkisiz görünmesine neden olarak kullanıcıları hayal kırıklığına uğratır ve web sitesini veya çevrimiçi mağazayı terk etmelerine neden olur.

3. Kumulative Layout-Verschiebung (CLS)

CLS, Google tarafından kullanıcı deneyimini değerlendirmek için kullanılan tamamen yeni bir metriktir. CLS, içerik yüklenirken sayfa düzenindeki değişimi ölçer. Temel olarak, yüklenirken öğelerin ne sıklıkta ve ne kadar atladığı ile ilgilidir. Yani online mağaza web sitesinin görsel istikrarı ile ilgilidir.

İlk iki metrikten farklı olarak, CLS’nin sayfa hızıyla hiçbir ilgisi yoktur, tamamen kullanıcı deneyimiyle ilgilidir.

Büyük bir içerik alanı arka planda yüklenmeye devam ederken ekrandaki bir butona tıklamaya çalıştığınızı düşünün. İçerik tamamen yüklendiğinde, butonu daha aşağı iter ve yanlış yere tıklarsınız. Bir web sitesinin bu davranışı zayıf bir CLS derecelendirmesi ile sonuçlanır.

Core Web Vitals Ne Kadar Önemli?

Core Web Vitals’in kullanıma sunulmasıyla Google, web yöneticilerinin bu değerleri optimize etmeleri için büyük bir teşvik sağlamıştır. 

Ancak bu, en iyi değerlere sahip sayfanın ilk sırada yer alacağı anlamına mı gelir? 

Aslında gelmez. Google ayrıca PageSpeed ile bir sayfanın sadece çok hızlı yüklendiği için sıralama kazanmadığını açıkça ortaya koymuştur. İçerik ve diğer faktörler hala sayfa yükleme hızından çok daha önemlidir. Bunlar arasında harici bağlantılar ve dolayısıyla başkalarının web sitesine duyduğu güven de yer almaktadır.

Core Web Vitals’ı Nasıl Ölçebilirim?

Metrikler iki alana ayrılabilir:

  • Tanımlanmış bir teknik ortamda (cihaz, bağlantı hızı ve CPU) ölçülen “laboratuvar verileri”. Bunlar LCP ve CLS gibi değerlerdir.
  • Google’ın Chrome tarayıcısı aracılığıyla doğrudan gerçek kullanıcılardan topladığı FID değeri gibi “saha verileri”.

Google bu değerleri ölçmek için bir dizi araç sağladı. Bunlar aşağıdaki şekildedir:

1. PageSpeed Insights

PageSpeed Insights, Google’ın kullanımı oldukça kolay çevrimiçi aracıdır. Bu araca bir URL girdikten sonra yeşil, turuncu veya kırmızı olabilen genel bir puan alırsınız. Sayfada iyileştirme için yer varsa, aşağıdaki raporda ayrıntılı olarak açıklanır. Laboratuvar ve saha verileri burada verilmektedir. Saha verileri yalnızca yeterli veri mevcutsa verilir. Sonuçlar masaüstü ve mobil için çıktı olarak verilir. 

2. Google Search Console

Bu araçta Google tarafından kendi sayfası etkinleştirilirse, masaüstü ve mobil olarak ayrılmış her üç değer (LCP, CLS ve FID) için veriler verilir. Ancak yalnızca yeterli veri toplanmışsa. 

3. Chrome DevTools

Bunlar, Google’ın Chrome tarayıcısında yerleşik olarak bulunan ve web sitesinin nasıl yüklendiği ve yüklendiğinde neler olduğu hakkında çok ayrıntılı bilgi sağlayan araçlardır. Burada yalnızca laboratuvar verileri çıktılanır. 

4. Lighthouse

Web sitelerinin kalitesini artırmak için otomatikleştirilmiş açık kaynaklı bir araçtır. Diğer şeylerin yanı sıra bir sayfanın performansı hakkında ayrıntılı laboratuvar verileri çıkarır. Araca Chrome DevTools üzerinden erişilebilirdir.

5. CrUX

Chrome Kullanıcı Deneyimi raporundaki alan verileridir. Bu rapor, Core Web Vitals’ın üç ana değerini ve bunları etkileyebilecek diğer değerleri içerir. Verilere PageSpeed Insights aracı veya bir arayüz aracılığıyla erişilebilir. Google ayrıca verileri görselleştirmek için bir gösterge tablosu şablonu da sağlar.

6. Web Vitals Browser AddOn

Tarayıcıda o anda çağrılan sayfanın laboratuvar değerlerini veren çeşitli tarayıcılar için bir eklentidir.

Sayfanızı rakiplerinizle karşılaştırmak için Vitals Leaderboard aracını kullanabilirsiniz. Ayrıca Google, geliştiricilerin verileri geliştirme süreçlerine entegre etmek için sorgulayabilecekleri API arayüzleri ve lighthouse-ci araç seti sağlar.

Core Web Vitals Nasıl Optimize Edilir?

Herkesin oldukça hızlı bir şekilde ve genellikle geliştiriciler olmadan optimizasyon yapabileceği bazı basit adımlar vardır.

Örneğin, görselleri görüntülendikleri boyutta kullanmak en iyisidir. Bu şu anlama gelir:

  • Yalnızca 600 x 600 ile görüntüleniyorlarsa 2000 x 2000 piksel boyutundaki görüntülerden kaçının. 
  • Optimum sıkıştırma yoluyla dosya boyutunu azaltın.
  • Doğru dosya formatını kullanın (JPG, WebP, PNG, vb.).

Bunun gibi daha fazla ipucu yukarıda anlattığımız araçların değerlendirmelerinde bulunabilir.

1. LCP’yi optimize edin

LCP değerini optimize etmek için (yani en büyük içerik öğesinin yüklenmesine kadar geçen süreyi kısaltmak için) Google aşağıdaki noktalara bakılmasını önerir:

  • Yavaş sunucu yanıt süreleri (TTFB).

– Sunucu son teknoloji ürünü mü? Performans iyileştirilebilir mi? 

– Konum kullanıcılara yakın mı?

– JS, CSS ve resimler gibi statik içerikler doğru önbellekleme ayrıntılarıyla mı sunuluyor?

– HTML sayfaları önbelleğe alınabiliyor mu?

– 3. taraf komut dosyaları için alan adlarını erken bağlayın (preconnect).

  • JavaScript ve CSS’nin işlenmesini engelleme

– Doğrudan sayfa yüklemesi için önemli olmayan JavaScript dosyalarını mümkün olduğunca geç yükleyin. Mümkünse bunları sayfanın en altına ekleyin ve eklerken defer, async kullanın.

– Dosya boyutunu “küçülterek” azaltın. 

  • Yavaş kaynak yükleme süreleri

– JS, CSS ve görüntüler gibi statik içerikleri sunmak için CDN sunucularını kullanın. 

  • İstemci tarafı oluşturma
  • Sayfanın tarayıcıda JavaScript ile oluşturulmasını önler. Mümkün olduğunca önceden oluşturulmuş bir HTML DOM sunar.

2. FID’yi optimize edin

FID değerini optimize etmek için (yani web sitesi kullanıcı girdisine tepki verene kadar geçen süreyi kısaltmak için), FID yalnızca CrUX’tan alan verileri olarak mevcut olduğundan, “Toplam Engelleme Süresi” (TBT) değerine geçilmelidir. Google aşağıdaki önlemleri önermektedir:

  • JavaScript görevlerinin çalışma süresini azaltın.
  • 50 milisaniyenin üzerindeki her şey çok uzun olarak kabul edilir.
  • Kod bölmeyi kullanın.
  • Üçüncü taraf komut dosyaları da dahil olmak üzere kritik olmayan JavaScripts’i async veya defer kullanarak taşıyın.

3. CLS’yi optimize edin

CLS en iyi Chrome DevTools’ta kontrol edilir. Ancak, önlemleri kontrol etmek için her zaman CrUX’tan alınan verilere başvurulmalıdır. Değeri optimize etmek için Google aşağıdaki önlemleri önerir:

  • Resimlere, reklamlara veya iframe’lere her zaman boyut bilgisi ekleyin.
  • Sayfanın üst kısmına dinamik olarak içerik eklemekten kaçının.
  • Web yazı tiplerini gömerken, FOIT/FOUT etkilerinden kaçınmak için CSS talimatı font-display için takas belirtimini ekleyin.
  • DOM’u güncellemeden önce bir ağ yanıtı bekleyen JavaScript eylemlerinden kaçının.