Site hızı, uzun zamandır hem dijital pazarlama hem de SEO projeleri için önemli bir noktada konumlanıyor. Ancak Google’ın kullanıcı deneyimini iyileştirmeye yönelik aksiyonlarıyla birlikte, site hızı artık minör değil majör etkenlerden biri haline geliyor. Google’ın kullanıcı deneyimini iyileştirmek amacıyla duyurduğu Core Web Vitals, doğrudan site hızına odaklanan maddelerden oluşuyor. 2020 Kasım ayında ilk kez Google tarafından duyurulan Core Web Vitals’ın 2021 Mayıs ayında hayata geçirilmesi planlanıyordu ancak bu tarih 2021 Haziran ayına ertelendi.
Core Web Vitals nedir ve ilgili metrikler nasıl optimize edilir öğrenmek istiyorsanız; aşağıdaki başlıkları inceleyebilirsiniz.
Core Web Vitals Nedir?
Core Web Vitals; internet kullanıcılarının deneyimini iyileştirmek amacıyla sayfa açılış hızına odaklanan ve ilgili sayfaların hız konusundaki performansını ölçümlemekte kullanılan bir dizi metrikten oluşur.
Site hızı konusunda bugüne kadar somut olarak “iyi” ya da “kötü” olarak kesin kararlar vermek pek de mümkün değildi. Sektörden sektöre site hızı tanımı dahi değişebildiğinden, hız konusunda genel geçer bir yargıya varmak bir hayli zorlayıcı ve belki de yanlış olacaktı. Ancak Core Web Vitals yaklaşımı sayesinde, Google site hızı konusunda artık net sınırları belirledi ve hangi sitelerin “iyi” ya da “kötü” olarak adlandırılabileceğini temel üç metriğe bağlı olarak belirledi.
Yukarıdaki görselde de görülebileceği üzere, kullanıcı deneyimi sinyallerini ölçümlemede kullanılan ve bir sıralama faktörü pek çok farklı metrik bulunmaktadır. Ancak Core Web Vitals, yalnızca üç farklı metrikten oluşmaktadır. Bu içerikte ana konumuz her ne kadar Web Vitals olsa da yukarıdaki görselde yer alan diğer konulara da mutlaka özen göstermeli ve yönetiyor olduğunuz internet sitelerini bu doğrultuda kontrol etmelisiniz.
Mobile Friendly: Sitenizin mobil cihazlar ile uyumlu olup olmadığına odaklanır. Google’ın mobile first yaklaşımı sebebiyle, bu madde bir hayli önemli ve sıralamalar üzerinde de oldukça etkilidir. Google’ın Mobil Uyumluluk Testi aracı ile internet sitenizin mobil uyumlu olup olmadığını öğrenebilirsiniz.
Safe Browsing: Safe browsing, internet kullanıcılarının güvenliğini sağlamak amacıyla kullanılan bir sıralama sinyalidir. Kimlik dolandırıcılığı, phishing ve veri hırsızlığı gibi konular safe browsing’e dahildir. İnternet sitenizin bu gibi güvenlik ihlallerinden etkilenip etkilenmediğini öğrenmek için Google’ın bu aracından faydalanabilirsiniz.
HTTPS: İnternetin geçerli standartlarından biri olan HTTPS, sektörü ya da amacı fark etmeksizin tüm internet sitelerinde kullanılmalıdır.
No Intrusive Interstitials: Kullanıcıyı yanıltan reklam yerleştirmeleri, kullanıcı deneyimini olumsuz etkileyen ve çok sık gösterilen pop-up’lar söz konusudur. Bu gibi yöntemlerin web sitelerinde kullanılmaması gerekir.
Core Web Vitals Metrikleri Nelerdir?
Core Web Vitals’ın üç temel metriği bulunur. Tamamıyla sayfa açılış hızına odaklanan bu metrikler, “site hızı” kavramı konusunda geçerli ve yeni bir standart oluşturmak amacıyla yaratılmıştır. Aşağıdaki başlıkları inceleyerek LCP, FID ve CLS gibi Core Web Vitals metriklerinin hangi hususlara odaklandığını ve nasıl optimize edilebileceğini görüntüleyebilirsiniz.
1 – Largest Contentful Paint (LCP) Nedir? Nasıl Optimize Edilir?
Largest Contentful Paint, kullanıcı internet sitenize bağlanmak için bir istek oluşturulduğunda kullanıcıya sunulan görüntü alanında bulunan görünür en büyük içerik elementi oluşturulana kadar geçen süredir. Largest Contentful Paint olarak algılanan element çoğu zaman bir görsel olur. Ancak ilk görüntü alanında görsel içermeyen web sitelerinde bu metrik bir metin ögesi üzerinden de ölçülebilir.
Bu metrik, çoğu zaman sayfa açılış süresiyle karıştırılır. Ancak LCP metriğinde önemli olan sayfanın tamamıyla kaç saniyede yüklendiği değil, ilk görüntü alanındaki en büyük görsel içeriğin kaç saniye içerisinde yüklendiğidir. Örneğin; internet sitenizin bir sayfası 4.5 saniye içerisinde tamamen yüklenirken, ilgili sayfadaki LCP ögesi yalnızca 2 saniye içerisine yükleniyor olabilir.
Yukarıdaki görselde de görülebileceği üzere, sayfa açılışı sırasında ortalama 2.5 saniyeden önce oluşturulan elementler başarılı bir LCP metriğine sahip olurlar.
İnternet sitenizi Pagespeed Insights aracılığıyla incelediğinizde, karşınıza iki farklı ölçümleme verisi çıkacaktır.
Yukarıdaki görselde de görülebileceği üzere, “Lab verileri” Google’ın aracı tarafından ölçümlenen “tahmini” değerleri gösterir. Bu değerler çoğu zaman gerçek datalardan farklı olacaktır.
Yukarıdaki görselde görüntüleyebileceğiniz değerler ise internet sitenizin 28 günlük ortalama Core Web Vitals metrikleridir. Bu veriler, doğrudan internet sitenize bağlanan kullanıcıların verileridir. Lab verileri optimizasyon işlemleri sırasında bir öngörü edinmeniz açısından önemli olsa da sizlere gerçek verilerin sunulduğu asıl alan budur.
Largest Contenful Paint metriğini olumsuz yönde etkileyen başlıca faktörler şunlardır:
- Sunucu Yanıt Süresi: LCP metriği sayfa açılış hızına değil, görüntülenebilir en büyük görsel içeriğin yüklenme süresine odaklanıyor olsa da sunucu yanıt süresi tüm bu hususları etkileyen en büyük faktördür. Hızlı, güçlü ve optimize edilmiş bir sunucu, LCP de dahil olmak üzere tüm Core Web Vitals metrikleri konusunda sizlere büyük fırsatlar sağlayacaktır.
- Yüksek Boyutlu Görseller: Yüksek boyutlu görsellerin kullanıcılara sunulması için daha uzun bir süre gerekeceğinden ve LCP metriği çoğu örnekte doğrudan görseller üzerinden ölçüldüğünden (E-ticaret sitelerinde ürün görselleri, içerik sitelerinde içerik thumbnail’ları gibi.) yüksek boyutlu görseller başlı başına bir sorundur.
- CDN Kullanımı: İnternet sitenizin sayfalarında kullandığınız görseller ve videolar gibi yüksek boyutlu statik içeriklerin kullanıcılara CDN üzerinden sunulması, LCP metriğini iyileştirmek konusunda sizlere yardımcı olabilir.
- JS ve CSS Dosyalarını Minify Etmek: İnternet sitenizin temasında ya da tasarımında kullanılan JS ve CSS dosyalarını minify ederek dosya boyutunu küçültmek, sayfa açılış hızıyla birlikte LCP metriğiniz üzerinde de olumlu bir etkiye yol açacaktır.
- JS’i Sonradan Yüklemek: Sayfa açılışı sırasında kritik bir öneme sahip olmayan JavaScript dosyalarını footer alanında yüklemek, sayfa açılış hızınızı artıracak ve buna bağlı olarak hem LCP metriğiniz hem de FCP metriğinizde iyileşmeler görüntülenecektir.
Largest Contenful Paint optimizasyonu konusunda ileri okuma yapmak isterseniz; https://web.dev/optimize-lcp/ bağlantısını inceleyebilirsiniz.
2 – First Input Delay (FID) Nedir? Nasıl Optimize Edilir?
First Input Delay; internet sitelerinin kullanıcılar tarafından gerçekleştirilen ilk etkileşime verdiği yanıt süresini ölçümleyen bir metriktir. Detaylandırmak gerekirse FID; kullanıcı bir bağlantıya, bir butona tıkladığında ya da JavaScript ile etkileşime girdiğinde internet sitelerinin bu etkileşime yanıt verme süresidir.
Yukarıdaki görselde de görülebileceği üzere, 100 milisaniyenin altındaki ortalama FID değerleri başarılı olarak kabul edilir.
Yukarıdaki görseli incelerseniz, Lab Verileri arasında FID değerinin bulunmadığını görüntüleyebilirsiniz. Bunun temel sebebi; FID değerinin kullanıcının siteyle etkileşimi arasında geçen süreye odaklanmasıdır. Yani FID değeri için kullanıcı verilerine ihtiyaç duyulur. Bu sebepten, “tahmini” Lab Verileri arasında FID’e yer verilmez.
Google, internet sitenize bağlanan kullanıcıların real time data’larını toplayarak ortalama bir FID ölçümlemesi gerçekleştirir.
Yani yukarıdaki görselde de görebileceğiniz üzere, bu metriği yalnızca sizlere sunulan alan verileri arasında bulabilirsiniz.
First Input Delay metriği kullanıcı etkileşimi odaklı olduğundan, bu metriği en çok etkileyen husus JavaScript’tir. Sayfalarınızda etkileşime geçilecek alanlarda mümkün olduğunda “hafif” JavaScript kodlarından faydalanmanız, sayfa açılışı sırasında kritik olmayan JavaScript kodlarını ertelemeniz (Defer / Async), ilgili sayfada kullanılmayan JavaScript kodlarını kaldırmanız ve tabii ki de sunucu yanıt süresini iyileştirmeniz FID metriğini Google tarafından belirlenen standartlara uygun hale getirmeniz konusunda sizlere yardımcı olacaktır.
3– Cumulative Layout Shift (CLS) Nedir? Nasıl Optimize Edilir?
Cumulative Layout Shift, sayfa açılışı sırasında eşzamansız olarak yüklenen sayfa elementlerinin sebep olduğu düzen kaymasını ölçümleyen bir metriktir. CLS metriği, sayfada bulunan görsel elementlerin sayfa açılışı sırasında yer değiştirmek, sayfa içeriğini aşağıya ya da yukarıya itmek (düzen kaymasına sebep olmak) gibi konulara odaklanır.
CLS sorunu çoğu zaman görsel elementlerden kaynaklanır. Sayfa yüklenirken sabit bir yükseklik değerine sahip olmayan görseller, yüklendiklerinde sayfa içeriğinin aşağıya ya da yukarıya kaymasına sebep olacaktır. Bu durum, kullanıcıların oldukça karmaşık bir yükleme sürecine tanık olmasına sebep olacak ve ayrıca herhangi bir tıklama gerçekleştirmek istediklerinde muhtemelen tıklamak istedikleri ögenin yer değiştirmesine yol açacaktır.
CLS sorunu çoğu zaman sayfada kullanılan görsellerden kaynaklandığından; banner, thumbnail ya da ürün resmi gibi sayfanın tepe noktasında yer alan görsellere sabit “height” değerleri atamak ya da yükleme sırasında bu görseller yerine bir placeholder göstermek, görsel kaynaklı CLS sorunlarının önüne geçecektir.
Eğer CLS sorununuz metinlerden kaynaklanıyorsa, CSS Swap metodu sayesinde sayfanızda kullanıyor olduğunuz font yüklenene kadar sistemden bir font kullanabilir ve font yüklemesi sebebiyle oluşan CLS sorununu giderebilirsiniz.
Sayfanızdaki hangi elementlerin CLS sorununa yol açtığını öğrenmek için, Pagespeed Insight aracında “Büyük düzen kaymalarından kaçının” bölümünü inceleyerek hangi elementin CLS’e ne oranda katkı sağladığını görüntüleyebilirsiniz.
Core Web Vitals Nasıl Ölçümlenir?
Core Web Vitals metriklerini ölçümlemek amacıyla kullanabileceğiniz birden fazla araç bulunur. Ölçümlemeyi gerçekleştirmek için ilgili araçlara web site adresinizi girerek performansınızı görüntüleyebilir ya da bazı araçları doğrudan siteniz üzerinde kullanabilirsiniz.
PageSpeed Insights ile Core Web Vitals Ölçümlemesi
PageSpeed Insights aracıyla web sitenizin Core Web Vitals metriklerini görüntülemek için öncelikle https://developers.google.com/speed/pagespeed/insights/ adresine ilerlemeli ve aşağıdaki görselde de görüntüleyebileceğiz adres çubuğuna internet sitenizin adresini girmelisiniz.
Analiz et butonuna tıkladıktan sonra, hemen aşağıda yer alan sekmeler aracılığıyla internet sitenizin hem mobil hem de masaüstü cihazlardaki performansını görüntüleyebilirsiniz. Çoğu zaman, masaüstü skorunuz mobil skorunuza oranla daha yüksek olacaktır.
Aşağıdaki görselde de görüntüleyebileceğiniz alan verisi & origin summary alanı, internet sitenize son 28 günde giriş yapan kullanıcılar aracılığıyla elde edilen gerçek saha verilerini içerir. Burada yer alan veriler, doğrudan kullanıcıların tarayıcısından elde edilir.
Aşağıdaki görselde yer alan “Lab Verileri” ise, Google tarafından tahmini olarak oluşturulan Core Web Vitals verileridir. Burada yer alan veriler çoğu zaman gerçek verilerinize oranla daha düşük bir performans skoruna sahip olacaktır. Her ne kadar gerçek verilere oranla güvenilirliği daha düşük olsa da internet siteniz üzerinde önemli değişiklikler gerçekleştirdiğinizde lab verileri sizlere yardımcı olabilir.
Aşağıdaki görselde de er alan “Fırsatlar” bölümünde, internet siteniz için sunulan iyileştirme önerilerini görüntüleyebilirsiniz. Bu uyarıların üzerine tıkladığınız taktirde, aşağıdaki 2. görselde de yer alan detaylara erişebileceksiniz.
Son olarak, teşhis kısmında ise internet sitenizi anlık olarak etkileyen faktörleri inceleyebilirsiniz. Bu bölümden hangi elementlerin LCP ya da CLS gibi sorunlara yol açtığını görüntüleyebilirsiniz.
Görüldüğü üzere PageSpeed Insights aracılığıyla internet sitenizdeki tüm Core Web Vitals metriklerini görüntüleyebilir, ilgili sorunlara yol açan elementleri inceleyebilir ve hatta çözüm önerileri alabilirsiniz.
