Google Search Console’da CLS (Kümülatif Düzen Kayması) hatasını görürseniz, Temel Web Verilerinde CLS hatasını düzeltmek ve optimize etmek için geliştirilen çeşitli yöntemler bulunmaktadır. CLS sorunlarının düzeltilmesi, son yapılan algoritma değişikliğiyle birlikte önem kazanmıştır. Bu yüzden daha iyi sıralama almak ya da var olan sıralamayı korumak için CLS sorunları vakit kaybetmeden düzeltilmelidir.
Google Search Console’da Önemli Web Verilerinin aktif edilmesiyle birlikte, sayfalar için Önemli Web Verilerinin bir sıralama faktörü olarak dikkate alınacağı net bir şekilde anlaşıldı.
Bir web site performansı 3 ayrı parametriğe göre değerlendirilmektedir. İlgili parametreler sırasıyla şu şekildedir:
• LCP: En Büyük Zengin İçerikli Boya
• FID: İlk Zengin İçerikli Boyama
• CLS: Kümülatif Düzen Kaydırma
Kümülatif Düzen Kaydırma Nedir? (CLS)
Yüklenen bir web sayfasında, okuma esnasında herhangi bir kayma ya da atlama olup olmadığını ifade etmek için CLS kavramı kullanılır. Okuma esnasında web sayfasında kayma ya da atlama olması kullanıcı deneyiminin düşmesine neden olacak bir sorundur.
Sayfa yüklemesi sırasında aniden beliren ikonlar, reklamlar ve bilumum diğer öğeler varsa bu durum CLS sorununun yaşanmasına neden olur.
CLS sorunu yaşamadan iyi sıralamalar elde edebilmek için CLS değerlinin 0.1’den düşük olması adına gerekli optimizasyonlar yapılmalıdır.
CLS Hataları Neden Olur?
CLS değerlerinin yüksek çıkmasına neden olan çok sayıda faktör vardır. Sorunun neyden kaynaklandığının tespit edilebilmesi için öncelikli olarak ilgili web sitelerin incelenmesi gerekir. Ancak size yardımcı olmak adına CLS sorunu yaşayan kişilerde bu soruna neden olan popüler kriterleri paylaşmak istiyoruz.
• Lazy load özellikli içeriklerin yeniden yüklenmesi
• Boyutları belirtilmemiş görseller
• Aniden yüklenen reklamlar
• Boyutsuz olarak gömülen iframe içerikler
• Sunucu yanıtının yavaş olması nedeniyle yüklenmek için bekleyen içerikler
Lazy Load İçeriklerin Tekrar Yüklenmesi
Lazy load, sadece sayfa kaydırılıp ilgili okuma alanına gelindiği zaman içeriklerin görüntülenmesini sağlayan özelliktir. Her ne kadar ilk yükleme hızının yüksek olmasını sağlasa da sayfa aşağıya doğru kaydırıldığı zaman içeriklerin tekrardan yüklenmesine neden olarak CLS probleminin ortaya çıkmasına sebep olabilir.
Sistem görsel öğelere yer almak için içeriğinin aşağıya ya da yukarıya kaymasına neden olarak kullanıcı deneyimini düşürür. Bu tarz durumlarla karşılaşmamak için lazy load özelliğinin iyi bir şekilde yapılandırılması gerekmektedir.
Reklamlar
Web sayfa içerisine yerleştirilen reklamlar, içeriğin aşağı ya da yukarı yönlü kaymasına neden olabilir. Özellikle reklamların yüklenmesi sayfa yüklenmesinden sonraya bırakılırsa ilgili kayma sorunları ortaya çıkmaktadır. Özellikle Adsense yayıncısı olan web sitelerin büyük bölümünün CLS problemi yaşamasının temel sebebi budur.
Sunucu Yanıtının Yavaş Olması
Özellikle http kaynaklı olarak sunucu yanıtı yavaş olabilir. Bazı öğelerin sunucu yanıtının yavaş olmasından dolayı geç yüklenmesi, okuma esnasında sayfada kaymaların olmasına yani CLS sorununun oluşmasına neden olabilmektedir.
CLS Sorunları Nasıl Düzeltilir?
Görsel öğelerin sonradan yüklenmesinden kaynaklı CLS sorunu yaşanıyorsa ilgili sorun CSS eklemesi yapılarak düzeltilebilir. İçeriklerinizde yer alan görseller için CSS’den boyut tanımlaması yapın. Bu sayede sayfa yüklenirken görseller geç yüklense bile ilgili görseller için boş alan oluşturulacaktır. Bu sayede içeriklerde aşağı ya da yukarı yönlü kaymalar meydana gelmeyecektir.
Lazy load kullanıyorsanız, bu durum içeriklerinizde gereğinden fazla alanın boş bırakılmasına neden olabilir. Lazy load görseller için gereğinden fazla boş alan bırakırsa görsel yüklendiği zaman boşluklar arası çakışma olarak sayfada kayma meydana gelir. Bu da şüphesiz sıklıkla karşılaştığımız CLS sorununun ortaya çıkmasına neden olur.
Sayfaya eklenen reklamlardan kaynaklanan CLS sorunları için aynı görsel öğelerde kullandığımız çözüm kullanılmalıdır. Reklamların sayfada kayma oluşturmaması için reklam boyutuna göre CSS oluşturabilirsiniz. Eğer wordpress altyapısına sahip bir web siteniz varsa sadece bunun için geliştirilmiş olan reklam ekleme eklentilerini de kullanmanız sorunun ortadan kalkmasını sağlayacaktır.
Elbette CLS sorunları sadece bunlardan ibaret değildir. Biz en çok karşılaşılan problemleri ve çözüm yollarını sizlere sunmuş bulunuyoruz. Kodsal nedenlerden kaynaklı CLS problemi yaşıyorsanız bu alanda uzman olan bir kişiyle çalışmalısınız. Bireyse müdahaleler web sitede ciddi sorunların oluşmasına neden olabilmektedir.
