Genel Bakış
Kümülatif Düzen Kayması (CLS – Cumulative Layout Shift), bir sayfa yüklemesinin algılanan görsel kararlılığını ölçmek için 2020’de Lighthouse tarafından sunulan bir performans metriğidir.
Basitçe ifade etmek gerekirse, CLS, sayfa işlenirken web öğelerinin beklenmedik şekilde değişmesini ölçer.
Bu ölçüm daha sonra sayfanızdaki tüm münferit düzen değişimlerinin toplu bir puanı olarak ölçülür.
CLS ayrıca Google’ın Önemli Web Verileri’ni oluşturan metriklerden biridir.
Önemli Web Verileri hakkında daha fazla bilgiyi yazılarımızda edinebilirsiniz.
Kümülatif Düzen Kayması Neyi Ölçer?
Google’a göre,
“CLS, görsel kararlılığı ölçmek için önemli, kullanıcı merkezli bir metriktir, çünkü kullanıcıların beklenmedik düzen değişimlerini ne sıklıkla deneyimlediğini ölçmeye yardımcı olur. Düşük CLS, sayfanın hoş olmasını sağlamaya yardımcı olur.”
Temel olarak, bir sayfa yüklendiğinde, belirli sayfa öğeleri beklenmedik bir şekilde değişir ve kullanıcıların web sayfasıyla etkileşim biçimini etkiler.
Örnekte gördüğünüz gibi, sayfa yüklenirken, kırmızı resimler diğer öğelerin hareket etmesine, ayarlanmasına ve yeniden konumlandırılmasına neden olarak kötü bir CLS puanına katkıda bulunur.
Bu öğeler, düğmeler, iletişim formları, resimler, videolar, yazı tipleri veya diğer içerik türleri olabilir.
Düşük CLS’ye sahip bir web sitesi, öğeleri değiştirmeyen ve tüm web sitesi içeriğinin sabit, öngörülebilir bir şekilde yüklenmesini sağlayan sabit bir sayfa görüntüsüne sahiptir.
Yeşil görüntülerin genişlik ve yükseklikleri, yükleme sırasında web sitenizin sabit ve öngörülebilir bir şekilde görüntülenmesini sağlamak için tanımlanmış ve düzen kaymasını en aza indirmiştir.
Aşağıdaki video Google CLS sayfasında da örnek olarak gösterilmiştir.
CLS’yi azaltmak, hareket eden sayfalar olumsuz bir kullanıcı deneyimine neden olabileceğinden (özellikle mobil cihazlarda) çok önemlidir.
Beklenmeyen düzen değişiklikleri, genellikle istenmeyen içeriğin istemeden tıklanmasına veya dokunulmasına neden olur.
Örneğin, hepimiz bir sayfanın yüklenmesini beklediğimiz, etkileşim kurmak istediğimiz düğmeyi bulduğumuz bir durum yaşamışızdır. Yine de tam tıkladığımız / dokunduğumuz anda, ekran aşağı kaymış ve tamamen farklı bir bağlantıya tıklamış/ dokunmuşuzdur (genellikle bir reklam).
Beklenen ve Beklenmeyen Düzen Kayması
Beklenen ve beklenmeyen düzen değişiklikleri arasındaki farka dikkat etmek önemlidir.
Bir kullanıcı girdisine yanıt olarak beklenen bir düzen değişikliği gerçekleşir.
Örneğin, bir giriş alanını genişletmek için arama simgesine tıklayın.
Öte yandan, beklenmedik bir düzen değişikliği genellikle üçüncü taraf içeriği, boyutsuz resimler veya diğer dinamik içerik tarafından tetiklenir.
Örneğin, aniden görünen ve bir resmi veya içeriği sayfanın aşağısına iten bir reklam.
GTmetrix ölçüm aracı, kullanıcı girişinden sonra 0,5 saniye içinde meydana gelen düzen değişikliklerini hariç tutarak beklenen ve beklenmeyen düzen değişikliklerini ayırt eder.
Kümülatif Düzen Kaymasının Performans Puanınızda Etkisi
CLS’nin Performans Puanı üzerindeki doğrudan etkisi nispeten düşük olsa da (%5), kullanıcının keyifli deneyimine büyük katkıda bulunur.
Yani ziyaretçilerinize sorunsuz, gecikmesiz bir deneyim sunmayla ilgilidir.
Diğer Performans Puanı ölçümlerinden bazıları doğrudan sayfa yükleme hızlarıyla ilişkili olsa da CLS, ziyaretçinizin sayfa deneyimini ölçmeye odaklanır.
Bu, Önemli Web Verileri içine dahil edilmesiyle daha da anlam kazanmıştır.
Kümülatif Düzen Kayması için Eşikler
CLS’nin milisaniye veya saniye cinsinden bir zamanlama değil, bir puan olduğunu bilin.
Ve tarayıcıda algılanan kaymalar kullanılarak hesaplandığını unutmamak önemlidir.
GTmetrix aracında CLS puanları için eşikler aşağıdaki gibidir:
- İyi, burada yapılacak bir şey yok (0.1 veya daha az)
- Tamam, ancak iyileştirmeyi düşünün (0,1 ile 0,15 arasında CLS)
- Önerilenden daha uzun (0,15 ile 0,25 arasında)
- Önerilenden çok daha uzun (0,25 veya daha yüksek)
Performans araçları tarafından kullanılan resmi Google resmi CLS puanları şu şekildedir:
- İyi – 0,1’in altında CLS
- İyileştirilmesi gerekiyor – 0,1 ile 0,25 arasında CLS
- Kötü – 0,25’in üzerinde CLS
Kümülatif Düzen Kayması Nasıl İyileştirilir?
Aşağıda belirtilen belirli denetimlerin muhtemelen CLS’nize en fazla katkıyı sağladığını unutmayın.
Ancak sayfanızın CLS puanı, burada bahsedilmeyen diğer optimizasyonlardan da etkilenebilir.
Geliştirme iş akışınıza aşağıdaki gibi iyi uygulamaları ekleyerek CLS puanınızı iyileştirin:
- Görüntü boyutlarını belirlemek
Resimler / videolar için doğru boşluğun kullanılması için her zaman web sitenizin resim ve video öğelerinin hem genişliğini hem de yüksekliğini belirtin. Alternatif olarak, aynısını yapmak için CSS en boy oranı kutularını da kullanabilirsiniz.
- Reklamlar, yerleştirmeler ve iframe’lerin neden olduğu düzen değişikliklerini azaltmak
Reklamlar, yerleştirmeler ve iç çerçevelerin neden olduğu düzen değişikliklerini azaltmak için aşağıdakilere benzer şeyler yapın:
Reklam kitaplığını yüklemeden önce reklam alanı boyutunu (tercihen en büyüğü) ayırın.
Reklamları görünüm alanının altına veya dışına taşıyın.
Gösterilecek reklam olmadığında yer tutucular kullanın.
- Mevcut içeriğin üzerine yeni içerik eklemekten kaçınmak
Kullanıcı etkileşimine yanıt vermedikçe mevcut içeriğin üzerine dinamik içerik (örneğin afişler, formlar ve benzeri) eklemekten kaçının. Bu, beklenmedik düzen değişikliklerini önlemeye yardımcı olur.
- Görünmez metnin parlamasını önlemek (FOIT)
Görünmez metin flash (FOIT) sorunu, sayfanızın CLS’sini de etkileyebilir. Web yazı tiplerini önceden yükleyerek ve / veya yazı tipi görüntüleme özelliğini kullanarak web yazı tipi yüklemeleri sırasında metninizin görünür kalmasını sağlayın.
- Birleşik olmayan animasyonlardan kaçınmak
Mümkün olduğunda, ana iş parçacığı çalışmasını azaltmak ve sayfa yükleme sırasında piksellerin yeniden boyanmasını önlemek için yalnızca birleştirilmiş animasyonlar gerçekleştirin.
Web verileri konusunda başka yazı örnekleriniz:
Siz de fikrinizi belirtin