Yıllardır site sahiplerine ''kullanıcılarınızı mutlu edin, onları önemseyin'' diyen Google, son yıllarda tamamen kullanıcı deneyimi, hız ve güvenlik gibi konuları ön plana çıkardı. Google geçtiğimiz 5 Mayıs'ta yeni bir servisini duyurdu, Google Core Web Vitals. Aslında farklı şekillerde var olan ve daha önce birçoğumuzun kullandığı bu araç, yeni güncelleme ile birlikte Google Search Console'a entegre edildi. Core Web Vitals, daha önce Search Console'da var olan hız raporuyla benzerlikler taşısa da birtakım eklemeler ve yeni metriklerle karşımıza çıkıyor. Bu önemli metrikler En Büyük İçerikli Boya (LCP), İlk Giriş Gecikmesi (FID) ve Görsel Düzen (CLS).
Google Sayfa Sıralama Metrikleri
Kullanıcılar için en iyisinin olmasını isteyen ve sürekli geliştirmeler yapan Google, hızın en önemli ana metriklerden biri olduğunu duyurması ve Web Vitals düzenlemesiyle birlikte bu konuda çok net bir mesaj vermiş oldu, "Geliştirin, güncel kalın, hızlandırın, kullanıcıyı mutlu edin." Peki Core Web Vitals nedir? Bu konuda bilmemiz gerekenler, dikkat etmemiz gereken noktalar nelerdir? Gelin bu soruların cevaplarını arayalım.
Core Web Vitals Nedir?
Core Web Vitals raporu, sayfalarınızın gerçek dünya kullanım verilerine dayanarak nasıl performans sergilediğini gösterir. Bu rapor sayfa deneyiminin üç farklı yönüne odaklanır: yükleme, etkileşim, görsel kararlılık. Her biri ayrı bir metrik ile temsil edilir ve kullanıcıya gösterilir.
Core Web Vitals'in temel amacı, gerçek kullanıcı deneyimini ölçmektir. Bu sinyaller yükleme performansını, etkileşimi ve sayfanın görsel kararlılığını içerir.
Core Web Vitals üç ana sinyalden oluşur:
- En Büyük İçerikli Boya (LCP)
- İlk Giriş Gecikmesi (FID)
- Görsel Stabilizasyon (CLS)
En Büyük İçerikli Boya (LCP) - Loading
En Büyük İçerikli Boya (Largest Contentful Paint) - LCP, bir sayfanın kullanıcılar için ne kadar sürede yüklendiğini, yani sayfa performansını değerlendirmek için oluşturulmuş bir metriktir. (LCP konusunda Google'ın tüm dökümanları için tıklayın.) Daha başka bir ifadeyle LCP algılanan yükleme hızını, yani sayfanızın kullanıcı için önemli olan ilk öğeleri görüntülemesinin ne kadar sürdüğünü ölçer. Burada bir noktayı atlamamak gerekiyor. Bu metrik sayfanın tamamen yüklenmesini ölçmez. İlgili sayfanın en büyük öğesinin yüklenme süresini ölçer. Bu farkı anlamalısınız.
LCP, sayfadaki en büyük içeriğin oluşturulmasının ne kadar sürdüğünü ifade eder. Google bu testin sonuçlarını üç bölümde kullanıcıya sunar; yeşil, turuncu ve kırmızı. Metriğe göre site hızının 2.5 sn altında olması gerekiyor. Bu Pagespeed ve Lighthouse üzerinden de bildiğimiz bir durumdu. Ancak burada kullanıcıya daha fazla detay veriliyor. Site hızı 4 saniye üzerindeyse bu kötü olarak nitelendiriliyor ve düzenleme yapılması isteniyor. Site hızının bir sıralama faktörü göz önüne alındığında ilk aksiyon alınması gereken konuların başında geldiğini anlayabilirsiniz.
Bir web sayfası aşamalı olarak görüntülenir. Arama motoru botları ilk aşamada sayfanızın üst kısmını kontrol ederek yüklemeye başlar, temel bileşenler görüntülendiğinde LCP'ye ulaşılır.
İlk Giriş Gecikmesi - First Input Delay (FID) (Etkileşim)
İlk Giriş Gecikmesi - FID metriği, bir sayfanın etkileşimini değerlendirmeye odaklanır. Yani yanıt verilebilirliğini ölçer. Terminolojik bir tanım yapmamız gerekirse "Bir kullanıcının sayfanızla ilk etkileşimde bulunduğu zaman (yani bir bağlantıyı veya düğmeyi tıkladığında) ve tarayıcının bu etkileşime gerçekten yanıt verebileceği zaman arasındaki süreyi ölçer." (FID konusunda Google dökümanı için tıklayınız.)
Kullanıcı sayfanızla etkileşim (bir düğmeye tıklamak gibi) için işlem gerçekleştirdiğinde, bu işlem 100 ms'den daha az sürerse mükemmel bir FID'e sahipsiniz demektir.
Konuyu örneklendirmek gerekirse, bir web sitesine girdiniz, sipariş veya iletişim için bir form doldurdunuz. Daha sonra "Gönder" butonuna tıkladınız. Ve o da ne, işlemin gerçekleşmesi için oldukça uzun bir süre beklediniz. İşte bu olumsuz bir durumdur. Bir çoğumuz bu süreyi beklemek istemez ve beklemez de. Yani iyi bir kullanıcı deneyimi eşittir mükemmel bir FID diyebiliriz.
FID tarafından konu edinilen etkileşimlere örnek vermek gerekirse;
- Bir bağlantıyı veya düğmeyi tıklama
- Boş bir alana metin girme
- Açılır menü seçme
- Onay kutusunu tıklama
- Html elemanları
Web.dev gönderisi bu konuyu ayrıntılı olarak açıklamaktadır:
Bu metrik için 100 ms'den daha iyi sonuç almak istiyorsanız, sayfalarınızın yüzde 75'inde bu sonucu yakalamalısınız.
Görsel Stabilizasyon - Cumulative Layout Shift (CLS)
Bazı web sitelerinde kullanıcının giriş yaptığı sayfada ani bir görsel değişikliği meydana geliyor olabilir. Örnek vermek gerekirse, kullanıcının okuduğu paragraf aniden kayboluyor olabilir, butonlar kayboluyor olabilir. Yani bir kararsızlık söz konusudur. Görsel Stabilizasyon ya da Google'ın isimlendirdiği şekilde Kümülatif Düzen Kayması (CLS) görsel kararlılığı ve kullanıcıların beklenmedik düzen değişiklikleri yaşama sıklığını ölçer.
LCP ve FID daha önce biz göremesek de kullanıldığı bilinen bir metrikti. Ancak CLS bir sayfanın görsel kararlılığını değerlendirmeyi amaçlayan yepyeni bir metriktir.
Özellikle mobil cihazlarda büyük sorun yaratan öğelerin birbirine yakınlığı, öğelerin kaybolmaları gibi durumlar, tam olarak görsel stabilizasyon konusunu açıklıyor. Bir mobil sitede bir butona tıklamak isterken görsel anstabilizasyon nedeniyle reklama tıkladınız. Bu olumsuz bir kullanıcı deneyimidir ve kullanıcı çok büyük ihtimalle sitenizi terk edecektir.
CLS puanlaması, “Sayfanın yayında kaldığı süre boyunca meydana gelen her beklenmedik yerleşim değişimlerini, kullanıcı açısından gözeterek oluşur."
Bunu yapmak için tarayıcı, görüntü alanı boyutunu ve kararsız öğelerin hareketlerini kontrol eder. Bunun için, kullanıcının sayfa öğelerinin hareket etmesine neden olan bir bağlantıyı veya düğmeyi tıklaması gibi, beklenen düzen olumsuzluklarını içermesi gerektiğini belirtmek önemlidir.
Bu puanlama türünden de tüm sayfalarınızın %75'inden geçerli puan almanız gerekiyor.
Bu Metriklerden Anlamamız Gerekenler Nelerdir?
Elbette bu raporu yorumlamak için bazı başlangıç noktalarına ihtiyacımız olacak. Size bir başlangıç noktası oluşturması açısından;
LCP sorunları için:
- “Mevcut kaynak yüküm sitemde nasıl görünüyor? Yüklenen çok fazla yedek öğe var mı? ”
- "Sitemde optimize edilebilecek render engelleme öğeleri var mı?"
FID sorunları için:
- “Sitemde JavaScript nasıl çalışır? Önemli kullanıcı etkileşimleri için girdi eylemi, yürütme ve yanıt arasında ciddi sorunlar var mı? ”
- "LCP'ye benzer şekilde, sitemin JavaScript'indeki hangi alanlar küçültme, sıkıştırma veya erteleme kullanılarak geliştirilebilir?"
CLS sorunları için:
- “Sitemdeki etkileşimin merkezi nedir? Sitemdeki öğelerin doğal olmayan hareketini tetikleyen nedir? ”
- “Sitemdeki içeriği dinamik olarak değiştiren müdahaleci reklam birimleri var mı?”
- “Resimlerimin sitede boyutları nedir? Sitede görüntü varlıklarının boyutlandırılması kontrolüm var mı/bunlar CSS aracılığıyla belirlendi mi? ”
- “Sitemdeki fontlar ne kadar duyarlı? Yükleme veya kullanıcılara görüntüleme konusunda sorunlara mı neden oluyorlar?”
Umarız bu sizler için bir başlangıç noktası oluşturur.
Core Web Vitals Raporu Nasıl Görüntülenir?
Core Web Vitals raporu Pagespeed Insights, Web.dev, Chrome Lighthouse (eklenti için tıklayın) üzerinden görüntülenebilmekteydi. Ancak 5 Mayıs'ta gelen güncelleme ile birlikte Google Search Console üzerinden otomatik olarak sonuçlara erişebilirsiniz.
İlgili rapora tıklayıp sorun olan noktalara ulaştığınızda size hangi aşamada sorun olduğunu gösterecektir.
Bu örnekte CLS aşamasında birtakım geliştirmelere ihtiyaç olduğunu görüyoruz. Tekrar CLS sekmesine tıkladığımızda;
bize böyle bir sonuç verecektir. Bu da bize iyileştirme yapmak için kolaylık sağlamış olur.
Yapılması Gerekenler ve Değerlendirme
Google daha önceki algoritma güncellemelerinde hızın en önemli sıralama faktörlerinden biri olduğunu açıklamış ve belli etmişti. Bu yenilik ile birlikte kullanıcıları bu alanda ilerlemeleri konusunda bir adım daha ileriye taşımış oldu.
Günün sonunda, Core Web Vitals web üzerinde daha iyi kullanıcı deneyimi için hem Google'dan hem de kullanıcılardan gelen geri dönüşleri yansıtıyor. Bugüne kadar site sahipleri ve bizler hız konusunu hep erteledik ya da yeterli önemi vermedik. Ancak Google'ın bu hamlesi ile birlikte durumun ciddiyeti daha da artmış oldu.
Unutmadan eklemekte fayda var. Google, arama algoritmasında henüz Core Web Vitals'ı resmi olarak kullanmıyor (kim bilir belki de kullanıyordur :)). Bu sinyaller 2021 yılında Google tarafından dikkate alınacak ve kesin tarih bilinmiyor.
Değerlendirme
Diğer taraftan elbette hız en önemli sıralama faktörleri arasında. Ancak içerik hala en büyük kozumuz. Çünkü kullanıcı için hızdan ve diğer faktörlerden daha önemli olan içeriktir. Kaliteli, eskimeyen, kullanıcı hedeflemeyen içerikler üretmeye devam edelim. Aynı zamanda da bu faktörleri yerine getirelim. İşte o zaman her şey çok güzel olur.
Ayrıca bu tarz geliştirmeler oldukça karmaşıktır ve çözmek için teknik bilgi gerektirir. Yanlış bir hareket tüm emeğinize mal olabilir. Core Web Vitals'a karşı erken tedbir almak ve geliştirmek rakiplerinize karşı avantaj sağlarken, güvenilir ve kullanıcı deneyimi yüksek olan bir sayfa olmanızı sağlar.
