Kümülatif Düzen Kayması: Google CLS Puanını İyileştirin

Hiç sipariş vermeyi denediğinizde ödeme düğmesinin kaybolduğu bir durumda bulundunuz mu?

Evet! Bu sinir bozucu.

Gerçek şu ki, bu çok sık ve çoğumuzda oluyor.

Neyse ki, her zaman olduğu gibi Google, kullanıcı deneyimini her şeyin üstünde tutuyor.

Bu nedenle, 2021'den itibaren temel web vitals'ın bir parçası olarak üç yeni performans metriği sunacak.

Önemli Web Verileri, bir sayfanın yükleme hızını, etkileşimini ve görsel kararlılığını ölçmek için tasarlanmıştır.

Üç metrik şunları temsil eder:

1. En Büyük İçerikli Boya (LCP)

2. İlk Giriş Gecikmesi (FIP)

3. Kümülatif düzen Shift (CLS)

CLS'yi hem kullanıcı hem de web yöneticileri (SEO) açısından anlayalım.

Kümülatif Düzen Kaydırma nedir?

Kümülatif Düzen Kayması (CLS), bir web sitesinin görsel kararlılığını temsil eder.

Bir sayfadaki önemsiz düzen kaymalarının miktarını ölçer.

Beklenmeyen düzen değişiklikleri, kullanıcı girişi olmadan kendi etrafında hareket eden bir web sayfasının sonucudur.

Google CLS, sayfa öğelerinin beklenmedik bir hareketinin kullanıcı deneyimini ne sıklıkla etkilediğini ölçerek sorunu çözmeniz için bir tür göstergedir (Sinyal).

Görünür bir öğe konumunu bir işlenmiş çerçeveden diğerine değiştirdiğinde herhangi bir zamanda bir düzende bir kayma meydana gelebilir.

Ortak anlamı anlamaya çalışalım ve basit kelimelerle “Kümülatif Düzen Kayması” tanımlayalım:

Kümülatif, miktardaki bir artıştır.

Düzen Çerçevedir

Bir vardiya, konumdaki bir değişikliktir

Basitçe söylemek gerekirse, Kümülatif Düzen Kayması, web sitesi tasarım konumlarındaki tüm bireysel çerçeve değişikliklerinin toplamıdır.

Web.dev kaynaklı resim

Standart CLS puanı 0,1'in altında olmalıdır.

Aynı şeyi ölçmek için iyi bir eşik, mobil ve masaüstü cihazlarda sayfa yüklemelerinin yüzde 75'idir.

Yukarıdaki resimde, Google'a göre:

1. CLS puanı 0,1'in altındaysa bu iyi bir sinyaldir. Bu, sitenizin herhangi bir düzen değişikliği ile ilgili bir sorunu olmadığı anlamına gelir.

2. CLS puanı 0,1 ile 0,25 arasındaysa, sitenizin görsel düzenlerde belirli bir iyileştirmeye ihtiyacı olduğu anlamına gelir.

3. CLS puanı 0,25'in üzerindeyse, bu zayıf bir sinyaldir, bu da görsel öğenin hareketinin çok sık meydana geldiği anlamına gelir.

Kümülatif Düzen Kayması Nasıl Hesaplanır?

Google, beklenmeyen her düzen kayması için etki oranını ve mesafe oranını hesaplayarak bir sayfanın CLS'sini hesaplar.

CLS'nin Etki Oranı

Kararsız bir elemanın iki çerçeve arasındaki bir görünüm alanında kapladığı alan miktarını ölçer.

CLS için Etki Fraksiyonunu hesaplama formülü

Düzen Kaydırma Puanını Hesaplamak için Etki Kesirine ihtiyacımız var.

CLS için Etki Kesri nasıl hesaplanır?

Grafik gösterimi, etki kesirlerini daha iyi anlamanıza yardımcı olacaktır.

 Etki Oranı = [Etki Bölgesi Alanı] / [Görüntü Alanı Alanı] Etki Oranı = [330 x 490] / [375 x 667] Etki Oranı = [161700] / [250125] Etki Oranı = 0.645

CLS'nin Uzaklık Kesri

Temel olarak mizanpajda değişen, sayfa öğesinin orijinal konumundan son konumuna hareket ettiği alan miktarının ölçüsüdür.

Aşırı ceza gerektiren durumlardan kaçınmak için, Uzaklık Kesirini ekleyerek büyük öğelerde küçük bir miktar kaydırma yapın.

CLS için Mesafe Fraksiyonu hesaplama formülü

CLS için Mesafe Kesri nasıl hesaplanır?

Grafiksel gösterim, uzaklık fraksiyonunu daha iyi anlamanıza yardımcı olacaktır.

Uzaklık Kesri = [Maks. Hareket Mesafesi] / [ViewPort Yüksekliği] Mesafe Kesri = [120] / [667] Mesafe Kesri = 0.179

Google CLS Puanını Hesaplama Formülü

Kümülatif Düzen Puanı, Etki Fraksiyonunun Mesafe Fraksiyonu ile çarpılmasıyla hesaplanır:

 Kümülatif Düzen Kayması (CLS) = Etki Kesri x Mesafe Kesri

CLS = 0.645 x 0.179 CLS = 0.1154 .

CLS puanı, etki ve mesafe oranı arttıkça yükselmeye devam eder.

Basit bir örnekle Kümülatif Düzen Kaydırma.

Bir siteyi ziyaret ettiniz ve okunacak ilginç bir şey gördünüz.

Linke tıklayarak devam edeceksiniz.

Ancak tam bağlantıyı tıklamak üzereyken, web sayfasında yarım inç aşağı kayar ve sonunda hemen üstüne yerleştirilmiş bir reklama tıklarsınız.

Kaynak: nitropack.io

Kulağa haksız geliyor, değil mi?

Beklenmedik bir düzen değişikliği.

Bu yalnızca, orijinal web sayfasına geri dönmeniz gereken bazı istenmeyen açılış sayfalarına yönlendirileceğiniz anlamına gelir.

Ayrıca beklenen düzen kayması olarak bilinen bir şeyimiz var.

Bir web sayfasındaki bir şeye tıkladığınızda olur ve sayfanın mevcut düzenini değiştirir.

Örneğin, belirli bir bilgi parçasını arayan bir bloga gidiyorsunuz.

Arama çubuğuna konu adını girer girmez, gerekli bilgileri bulacağınız veya konuyla ilgili birkaç blog gönderisi bulacağınız belirli bir blog gönderisini alacak.

Kaynak: nitropack.io

Bu, web sayfasından beklenen bir sonuçtur ve beklenen bir düzen değişikliği olarak kabul edilebilir.

CLS Sorunlarına Neden Olan Nedir?

Arama motoru devi Google'a göre, Kümülatif Mizanpaj Kaymasının 5 olası nedeni vardır:

Boyutsuz Resim ve Videolar

Resim ve videolarınızın genişliğini ve yüksekliğini her zaman belirtmeniz önerilir.

Görüntü yüklenirken tarayıcının web sayfasında doğru miktarda alan ayırmasını sağlamak için CSS en boy oranı kutularını da kullanabilirsiniz.

Boyutsuz reklamlar, yerleştirmeler ve iframe'ler

Reklam boyutları, yüksek TO ile geliri artırabilir.

Ancak bu, içeriği sayfanın aşağısına iterek kullanıcı deneyiminin kalitesinden ödün verebilir.

Bu düzen değişikliği, reklam alanları için alan ayrılarak, reklam alanı için mümkün olan en büyük boyutu ayırarak veya geçmiş verilere dayalı olarak reklam alanının mümkün olan en iyi boyutunu seçerek vardiyaları ortadan kaldırarak hafifletilebilir.

Dinamik olarak enjekte edilen içerik

Kullanıcı etkileşimine yanıt vermedikçe, mevcut içeriğin üzerine yeni içerik eklemekten kaçının.

Bu, görüntünün veya metnin beklenmedik bir şekilde hareket etmesini tetiklemek yerine, meydana gelen tüm düzen değişikliklerinin her zaman beklenmesini sağlayacaktır.

FOIT/FOUT'a neden olan Web Fontları

Gereksiz düzen kaymalarını önlemek için otomatik, takas, blok, geri dönüş ve isteğe bağlı gibi özel yazı tiplerinizle yazı tipi:görüntüleme değerleri kullanmayı deneyin.

Düzen kayması olmadığından emin olmak için, bağlantı rel=preload ile birlikte font:display kullanın.

Bu yazı tipini kullanan herhangi bir öğe, yazı tipi varlığı tam olarak indirilene kadar gizlenecektir, FOIT (görünmez metnin flaşı) olarak bilinir.

Bir animasyon kaynağı: malthemilthers.com

Özel bir yüklenene kadar bir yedek yazı tipinin yazı tipi yığınında görüntülenmesi FOUT(Stillenmemiş metnin flaşı) olarak bilinir.

DOM'yi güncellemeden önce ağ yanıtı bekleyen eylemler

Düzen değişikliklerini tetikleyen özelliklerin animasyonları için her zaman "dönüştürme" animasyonlarını tercih edin.

Google CLS Puanı Reklamlardan Nasıl Etkilenir?

CLS'ye neden olan reklamlarla başa çıkmak için, reklamın gösterileceği öğeye stil vermeniz gerekir.

Bu nedenle, bir WordPress veya herhangi bir web sitesi öğesindeki div, resim veya video bölümünü belirli bir yükseklik ve genişlik ölçümüne sahip olarak biçimlendirirseniz, reklamınız yalnızca belirtilen boyutlarla sınırlandırılır.

Bir reklam içeren bir öğe reklamı göstermiyorsa, bunu alternatif bir banner reklamın veya bir yer tutucu resmin boş alanı doldurabileceği şekilde ayarlayabilirsiniz.

Alternatif olarak, bir reklam, belirli düzenler için sayfanın sağ veya sol oluğundaki bir sütunun üstündeki satırın tamamını doldurabilir.

Sayfa açılmazsa herhangi bir değişiklik olmaz ve mobil veya masaüstünde herhangi bir fark yaratmaz.

Ancak, bunun tema düzenine bağlı olduğunu ve reklam envanteriyle ilgili bir sorun olup olmadığını test etmeniz gerekeceğini unutmamalısınız.

Web Geliştirme Sırasında CLS Nasıl Kayabilir?

Google CLS, geliştirme aşamasından geçebilir.

İşte olabilecekler.

Bir web sayfasını oluşturmak için gereken varlıkların çoğu, bir tarayıcının önbelleğine yüklenir.

Bir geliştirici, geliştirilmekte olan sayfayı bir sonraki ziyaretinde, sayfa öğeleri zaten indirildiğinden bir düzen değişikliği fark etmeyecektir.

Bu nedenle sahada veya laboratuvarda bir ölçüm yapılması tavsiye edilir.

Kümülatif Düzen Kaydırma Testi

Kümülatif Düzen Kaydırma Performansı web sitesi metrikleri aşağıdaki yollardan herhangi biriyle ölçülebilir:

Saha Araçları

Sahada: sayfayla gerçekten etkileşimde bulunan gerçek kullanıcılar üzerinde. Aşağıdaki Alan araçları kullanılarak ölçülebilir:

Chrome Kullanıcı Deneyimi Raporu

Gerçek dünyadaki Chrome kullanıcılarının web'deki popüler destinasyonları nasıl deneyimlediklerine ilişkin kullanıcı deneyimi ölçümleri sağlar.

Sayfa Hızı Analizleri

Bu araç, bir web sayfasının içeriğini analiz eder ve o sayfayı eskisinden daha hızlı hale getirmek için öneriler üretir.

Search Console (Önemli Web Verileri raporu)

Search Console , gerçek dünyadaki kullanım verilerine (bazen alan verileri olarak da adlandırılır) dayalı olarak sayfalarınızın nasıl performans gösterdiğini gösterir.

Laboratuvar Araçları

Laboratuvarda: Kontrollü bir ortamda sayfa yükleme simülasyonu yapmak için araçların kullanılması, aşağıdaki Laboratuvar araçları kullanılarak ölçülebilir:

Chrome Geliştirme Araçları

Chrome DevTools, sayfaları anında düzenlemenize ve sorunları hızla teşhis etmenize yardımcı olabilir, bu da sonuçta daha iyi web sitelerini daha hızlı oluşturmanıza olanak tanır.

deniz feneri

LightHouse , web sayfalarının kalitesini artırmak için açık kaynaklı, otomatik bir araçtır.

Herkese açık veya kimlik doğrulama gerektiren herhangi bir web sayfasında çalıştırabilirsiniz.

Performans, erişilebilirlik, ilerici web uygulamaları, SEO ve daha fazlası için denetimlere sahiptir.

Web Sayfası Testi

Ayrıntılı optimizasyon önerileriyle tüketici bağlantı hızlarında gerçek tarayıcıları kullanarak dünyanın dört bir yanından ücretsiz bir web sitesi hız testi yapın.

web.dev'e göre ; Dikkat: Laboratuvar araçları genellikle sayfaları sentetik bir ortamda yükler ve yalnızca sayfa yükleme sırasında mizanpaj kaymalarını ölçer.

Sonuç olarak, belirli bir sayfa için laboratuvar araçları tarafından bildirilen CLS değerleri, sahada gerçek kullanıcıların deneyimlediğinden daha az olabilir.

Kümülatif Düzen Kaymasını kontrol etmek için Hızlı Araçlar

1. Sorunlu LS'yi tanımlar için Chris Johnson tarafından Deffaced Tool'dan GIF formatında CLS.

2. Kümülatif Düzen Kaydırma hesaplayıcısı

CLS Hesaplamalarında Kusur

Google, CLS metriğinin uzun süredir açık olan web sayfalarını ölçmek için yetersiz kaldığı ve daha düşük puanlarla cezalandırıldığı konusunda geri bildirim aldı.

Google, CLS'yi nasıl puanladığını güncellemek için üç çözümü gözden geçirdi; bu nedenle, bu değişiklik nedeniyle CLS puanlarının kötüleşmesi konusunda endişelenecek bir şey yok.

CLS Ölçümü için Oturum Pencereleri

Google, CLS'yi ölçmek için bir oturum penceresi yaklaşımına gitti.

Sayfa öğelerinin ölçümü, bir kullanıcının web sayfasını aşağı kaydırırken ulaştığı bir web sayfasının farklı bölümlerine karşılık gelen oturum pencerelerinde ölçülür.

Her oturum penceresi için toplam puanlar, tüm sayfanın toplam kayması olan kümülatif düzen kaymasıdır.

Sonsuz kaydırmalı veya kullanıcı etkileşimine yavaş tepki veren kullanıcı arabirimi işleyicilerine sahip web sayfalarının %3'ü, puanlarının iyi bir dereceye yükseldiğini görecektir.

Güncelleme, CLS Puanlarını Daha Doğru Hale Getiriyor

Yeni puanlama sisteminin daha adil hale gelmesi, özellikle uzun süredir açık olan veya sonsuz kaydırma kullanan ve bu nedenle haksız puanlanan web sayfaları için yayıncılar için bir avantaj.

Önemli Web Verileri metrikleri Mayıs 2021'de bir sıralama faktörü haline gelmek üzereyken, son dakikada yapılması gereken önemli bir değişiklik.

Çözüm

Kümülatif Düzen Kaymasını (CLS) anlamak, önümüzdeki günlerde daha iyi bir kullanıcı deneyimi sunmanıza yardımcı olacaktır.

Metrik, UX'i iyileştirmeye yönelik Önemli Web Verilerinin bir parçası olduğundan ve 2021'de bir sıralama sinyali olması planlandığından, siteniz üzerindeki önemini ve etkisini anlamak önemlidir.