Hepimizin başına gelmiştir. Bir web sitesinde bir seçenek belirlemeye çalışıyoruz. Tıklamadan hemen önce sayfa atlıyor ve sonunda istemediğimiz bir şeyi tıklıyoruz.
“Düşük, çok yavaş” oyunu gibi, bu web sitesi davranışı bizi yavaş ve hüsrana uğratıyor. Neyse ki, web sitesi geliştiricileri artık Google’ın Önemli Web Verileri’nin piyasaya sürülmesiyle site deneyimlerini iyileştirmeye teşvik ediliyor. Site sahiplerinin web sayfalarının kullanıcı deneyimini ölçmelerine. Ve iyileştirmelerine yardımcı olan bir dizi ölçüm.
Cumulative Layout Shift, bir web sitesinin “sıçramasını” ve öğeler yüklenirken. Beklenmedik şekilde nasıl hareket ettiğini ölçen bu temel ölçütlerden biridir. Bu ölçümün nasıl çalıştığına ve kendi web sitenizin arama motorlarında daha üst sıralarda yer almak. Kullanıcılarınıza daha iyi bir deneyim sunmak için en iyi uygulamaları. Takip ettiğinden nasıl emin olabileceğinize daha yakından bakalım.
Cumulative Layout Shift Nedir?
Cumulative Layout Shift veya CLS, bir web sayfasının ömrü boyunca beklenmedik bir şekilde ne kadar kaydığının bir ölçüsüdür.
Örneğin, bir web sitesi ziyaretçisi bir sayfa yüklediyse ve onu okurken bir banner yüklendiyse ve sayfa aşağı atlarsa. Bu yüksek bir CLS puanı oluşturur.
En Büyük İçerikli Boyama ve İlk Giriş Gecikmesi ile birlikte CLS, Google’ın Önemli Web Verileri’nin bir parçasıdır. Google’ın web tarayıcıları, dizine ekledikleri her sayfada CLS’yi ölçer.
Cumulative Layout Shift’te Ne Sebep Olur?
Sayfa kaymaları, içerik farklı hızlarda yüklendiğinde gerçekleşir. Düzenin değişmesine neden olur ve izleyicinin baktığı şeyi değiştirir.
Yavaş yüklenen reklamlar, aniden görünen boyutu bilinmeyen videolar. Veya dinamik olarak eklenen DOM öğeleri, CLS’nin olası nedenleridir.
Örnek, web sayfasının geri kalanı yüklendikten sonra bir reklam başlığı yüklendiğinde ne olduğunu gösterir. İçerik aşağı itilir ve kullanıcı deneyimi olumsuz etkilenir.
Her cihaz veya ortam aynı şekilde çalışmadığından, kullanıcılarınızın CLS yaşayıp yaşamadığını bilmek zor olabilir. Web sitenizi bir geliştirme ortamında yüklüyorsanız. Önbelleğe alınmış öğeleriniz olabilir veya bunlar yerel olarak yükleniyor olabilir.
Çerezlere dayalı kişiselleştirilmiş web içeriği, özellikle bulundukları yere bağlı olarak her ziyaretçi için farklı davranacaktır. Ayrıca, mobil kullanıcılar çok farklı bir deneyime sahip olabilir. Web tarayıcısındaki küçük bir değişiklik, siteyi küçük bir ekranda görüntüleyen biri için anıtsal olabilir. Kullanıcılarınızın deneyimini anlamanın gerçekten tek yolu, aşağıda ele alacağımız CLS’yi ölçmektir.
CLS Neden Önemlidir?
CLS’yi anlamak iki nedenden dolayı önemlidir. Ziyaretçilerinizin deneyimi ve arama motoru sıralamanız.
Parça parça yüklenen veya beklenmedik davranışlar sergileyen ürkek web siteleri. Ziyaretçilerinizin göz atmak için başka bir web sitesi bulmasına neden olur. Ve devam ederlerse, yüksek bir CLS puanının yanlış seçeneği seçme, çok erken kontrol etme veya web sitenizin bazı kısımlarını. Tamamen kaçırma gibi kullanılabilirlik sorunlarına neden olması muhtemeldir.
Bu sorun, yalnızca akıllı telefonlarında gezinen çok sayıda internet kullanıcısı tarafından daha da kötüleşiyor. Sitenizi küçük bir ekranda görüntülerken, web sitesindeki herhangi bir sıçrama ve düzen değişikliğinin mobil kullanıcı deneyimi üzerinde büyük bir etkisi olacağı kesindir .
Sitenizi optimize etmek ve kümülatif düzen değişikliğinizi azaltmak, müşterilere iyi bir deneyim sağlamak için çok önemlidir.
İkincisi, Google siteleri sayfa performanslarına göre sıralar. Daha iyi bir kullanıcı deneyimi, daha yüksek bir arama sıralamasıyla sonuçlanır. Sayfanız, Google’ın Önemli Web Verileri yönergelerinde ortaya koyduğu standartları karşılamıyorsa, siteniz cezalandırılır.
Google, insanları iyi performans göstermeyen sitelere yönlendirmek istemiyor. CLS’nin en iyi uygulamalarıyla uyum sağlamak, web sitenizin sıralamada yükselmesine yardımcı olabilir. Çevrimiçi deneyimlerin %68’i bir aramayla başladığından. Sitenizin arama sonuçları sayfasında göründüğünden emin olmak, gelen trafik oluşturmak için önemlidir.
Cumulative Layout Shift Kaymasını Nasıl Ölçersiniz?
İyi haber şu ki, CLS’yi kendiniz ölçmek zorunda değilsiniz çünkü. Google, PageSpeed Insights aracıyla veya Lighthouse Araçları’nı kullanarak. Chrome tarayıcısında sayfa performansınızı analiz etmeyi gerçekten kolaylaştırıyor.
PageSpeed Insights’ta performansı analiz etmek için :
-
Google’ın PageSpeed Insights aracına bir web sitesi URL’si girin.
-
‘Analiz Et’i tıklayın.
-
Performansınızı kontrol edin. Sol üst köşedeki gezinmeyi kullanarak geçiş yapabileceğiniz hem mobil hem de masaüstü performansını inceleyebilirsiniz.
Lighthouse araçlarını kullanarak performansı analiz etmek için.
- Analiz etmek istediğiniz web sitesini Chrome’da açın.
- Tarayıcı penceresinin sağ üst köşesindeki üç noktaya tıklayarak. “Diğer Araçlar”ı ve ardından “Geliştirici Araçları”nı seçerek Geliştirici Araçları’na gidin.
- Konsol açıldığında, üst kısımdaki seçeneklerden “Deniz Feneri” ni seçin.
- “Rapor Oluştur”u tıklayın.
Lighthouse, bu puana neyin katkıda bulunduğuna dair ayrıntılı bir denetim sağlar. Denetimi gözden geçirmek için aşağı kaydırın ve “CLS ile ilgili denetimleri göster”i seçin.
Etki Kesiri ve Uzaklık Kesiri Hakkında Daha Fazla Bilgi
CLS’yi araştırırken görebileceğiniz iki terim “etki oranı” ve “mesafe oranı”dır. Bunlar, Google’ın CLS’yi hesaplamak için kullandığı iki değişkendir.
düzen kaydırma puanı = etki kesri x mesafe kesri
Etki oranı, görüntü alanıyla karşılaştırıldığında kararsız öğenin boyutuyla ilgilidir. Mesafe kesri, istikrarsız öğenin görünümün bir oranı olarak hareket ettiği miktardır.
Bu nedenle, yüksek bir CLS, uzun bir mesafe hareket eden büyük bir elementten oluşacaktır. Küçük bir CLS, yalnızca küçük bir mesafe hareket eden küçük bir elemanın sonucu olacaktır.
CLS, bir oturum penceresi sırasında meydana gelen en büyük “burst” veya düzen değiştirme puanları grubudur. Temel olarak, beş saniyelik bir pencerede bir dizi kayma meydana gelirse. Bu durum yıkıcı olarak kabul edilir ve büyük bir CLS puanıyla sonuçlanır.
İyi Bir CLS Puanı Nedir?
İyi bir CLS puanı, 0,1’den daha azdır. PageInsights veya Lighthouse araçlarından alınan raporlar düşük puanları otomatik olarak işaretler. Ayrıca daha iyi performans için sayfanın nasıl optimize edileceğine dair tavsiyeler sağlar.
Cumulative Layout Shift Nasıl İyileştirilir?
Web sitesi sahiplerinin CLS puanlarını yükseltmek için izleyebilecekleri birkaç iyi uygulama vardır.
Bir CMS (İçerik Yönetim Sistemi) Kullanın
Özellikle Google Lighthouse veya diğer teşhis araçlarıyla entegre olan. Bu, en iyi uygulamaları göz önünde bulundurarak tasarım yaptığınızdan emin olmanızı. Ve sitenizi başlatmadan önce tüm sorunları işaretlemenizi sağlar.
Resimler ve Videolar İçin Boyut Özelliklerini Belirtin
Kendi yükseklik ve genişliklerini belirlemelerine izin vermek yerine, medyanız için boyut niteliklerini dikte edin. Bu öznitelikleri ayarlayarak, resim henüz yüklenmemiş olsa bile. Tarayıcıya ne kadar alan ayırması gerektiğini söylüyorsunuz.
Reklamların Düzeninizi Nasıl Etkileyebileceğini Anlayın
Google Yayıncı Etiketi, reklamlar için nasıl yer ayırılacağı konusunda kapsamlı rehberlik sunar .
Yeni içeriği görünümün altına yükleyin. Kullanıcının görüntülediği içeriğin üzerine içerik yüklemek genellikle bir sayfanın kaymasına neden olur.
Sonuç
CLS’ye dikkat etmek yalnızca daha iyi bir kullanıcı deneyimi sağlamakla kalmaz. Aynı zamanda arama sonucu sıralamanızı da yükseltir. Bu bir kazan-kazan.
Google’ın CLS standartlarını karşılamak için. Web sitenizin mevcut performansını ölçmek üzere bir teşhis aracı kullanarak başlayın.
Yukarıda özetlenen temel yönergeleri dikkate alın ve web sitenizi tasarlarken. Özellikle geçişler ve içerik eklemeler söz konusu olduğunda, düzen değişikliklerini aklınızda bulundurun. Bu birkaç basit düşünceyle, genel olarak daha iyi sonuçlar elde edeceksiniz.
