Son zamanlarda karşımıza çıkan CLS Sorunları neden ortaya çıkıyor?  CLS Sorunu :0,25 (mobil) içeriğinden fazla hataları almaya başladım ne yapmalıyım?

Google sayfalar için Web Vitals’in analizlerini kullanmaya başladı. Core Web Vitals yavaş çalışan web sayfalarını tespit ederek İnternet sitelerine giriş yapan kullanıcıların deneyimini sürekli olarak iyileştirmeye çalışan bir eklentidir.

Google web sayfaları için Web Vitals’i bir sıralama aracı olarak dikkate alacağını duyurdu. Web Vitals eklentisi web sitesinin sayfa hızı, https sertifikaları, mobil uyumluluk ve güvenlik sertifikalarını kontrol ederek siteleri kendi aralarında sıralıyor. Konuyla ilgili ayrıntılar tam olarak mevcut olmasa da karşımıza çıkan metrikler bunlar.

Google searchconsole’da yer alan Web Vitals raporları temel olarak 3 ana maddeden oluşur.

• LCP (En Büyük Zengin İçerikli Boya)
• FID (İlk Giriş Gecikmesi)
• CLS (Kümülatif Düzen Kaydırma)

İnternet siteleri için yeni bir veri ve raporlama sistemi olan Web Vitals raporlarında belirtilen sorunlar için henüz kesin bir çözüm yok.

Bizim karşımıza çıkan en büyük etken olan Kümülatif Düzen Kayması CLS Sorununu nasıl çözebileceğimize bakalım.

CLS Sorunu Nedir?

Kümülatif Düzen Kayması CLS web sitenizin istikrarını ölçen bir sayfa rapor biçimidir. Açık bir dille anlatmak gerekirse, herhangi bir web sitesine girdiğinizde sayfa içerisinde yer alan görüntüleri, metinleri ve web sayfasının tüm içeriği değişiyorsa kullanıcıların deneyimi etkilendiği için bazı problemlere yol açabilir.

CLS, web sayfalarının yayında olduğu süre içerisinde beklenmedik düzen ve görüntü kaymalarının etkisini ölçerek değerlendirir.

Sayfa Kararsızlığı

Web sayfanızda yer alan butonlar veya linkler yer değiştiriyorsa Web Vitals sisteminde bu sorun ortaya çıkacaktır. Örneğin; Bir e-ticaret sitesinde herhangi bir ürünün “satın al” veya “renk” seçimlerini daha sonradan güncelleyerek farklı linklere yönlendirirseniz bu sorun Sayfanızdaki kararsızlık olarak algılanacaktır. CLS bu şekilde sorunlu sayfaları değerlendirip raporlayarak, sizin sayfanızın sıralama puanını oluşturacaktır.

Kullanıcı deneyimini üst seviyede tutmak ve sayfanızın sıralamasının düşmemesi için CLS puanı 0,1 puandan düşük olması gerekmektedir.

Web Sayfasındaki CLS’nin Yüksek Olmasının Sebepleri Nelerdir?

Web sayfanızda yüksek CLS ile karşılaşıyorsanız bunun birçok nedeni olabilir. Bunlardan bazıları şu şekildedir.

• LazyLoad Content Reflow (Geç Yüklenen İçeriğin Yeniden Akışı)

• Boyutları Olmayan Görüntüler

• Boyutları düzenlenmemiş Reklamlar ve İç Çerçeveler

• Yavaş Yanıt Nedeniyle Yüklenmeyi Bekleyen Bir İçerik

LazyLoad Content Reflow (Geç Yüklenen İçeriğin Yeniden Akışı)

LazyLoad site içerisindeki görüntüleri yalnızca bir sayfa aşağıya-yukarıya kaydırıldığı zaman ve görüntünün alana geldiği anda yükleyen web sayfalarında sıklıkla kullanılan bir araçtır.

Bazı durumlarda ise görüntü içeriğinin aşağıya yada yukarıya kaymasına sebep olur ve yeniden sayfa akışına mahal vererek gereksiz yükleme yapar. Bu sebeple görüntü ve çevresinde yer alan metin veya reklamlar kayar ve sayfanızın düzeni bozulur.

Bu sorun örneğin resminizin yanlışlıkla kaldırılması veya reklamınızın sizin isteğiniz dışında güncellenerek sayfanın düzenini bozması gibi durumlarda ortaya çıkar.

Boyutları Olmayan Görüntüler

Bir diğer sorun ise Boyutları Olmayan Görüntülerdir. Eğer sitenize yüklediğiniz resmin boyutu site alanınızdan büyük veya küçükse sorunlara yol açabilir.

Örneğin ana sayfada farklı sayfa içeriğinde farklı gözükerek sürekli olarak sitenin düzenini bozabilir. Bunun için sitenizde yer alan görüntüleri genellikle aynı boyutlarda kullanın. Fotoğraflarınızı veya resimlerinizi resim düzenleme programlarında daha önceden belirlediğiniz örneğin 800×400 gibi boyutlarla web sitesine yükleyin. Bazı durumlar hariç çok fazla bu boyutların dışına çıkmayın.

Boyutları Düzenlenmemiş Reklamlar ve İç Çerçeveler

Reklamlarınızın ve Site içerisinde bulunan çerçevelerin boyutlarını değişken olarak ayarlamayın. Eğer herhangi bir şekilde sınırları belli olmayan reklam alanlarınız varsa sürekli olarak sayfa düzeninizi bozabilir. Metni veya bağlantılarınızı aşağı yukarı yönde kaydırabilir. Kayan reklamlar Önemli ölçüde CLS Sorununa yol açar.

Yavaş Yanıt Nedeniyle Yüklenmeyi Bekleyen İçerik

Bazı durumlarda yavaş http yanıtları nedeni ile Web sayfanızın içerisinde yer alan içeriklerin yüklenmesi fazla zaman alabilir. Bu sorun da diğer sorunlara benzer şekilde sayfanızın düzenini ve kaymasını sağlayarak CLS Sorununa yol açar.

Google Search Console’da Yer Alan Yüksek CLS Sorunu Nasıl Onarılır?

Web sayfanızda yer alan görüntülerin yüklenmesi çok zaman alıyorsa, görüntü geç yüklendiğinde metin aşağı doğru kayar ve sayfa düzeninizi bozar. Böylece sitenizin düzen kararsızlığı ortaya çıkar ve CLS Sorunu ile karşı karşıya kalırsınız.

İçerik Kaydıran Görüntüler İçin Gerekli Olan Alanı CSS’de Belli Boyutlara Ayarlayın.

Böylelikle web sayfanızda yer alan görüntü veya resimlerinizin tarayıcı da doğru alan kaplamasını sağlarsınız ve bu metriklerin dışına çıkmadığı için bozulmalara sebep olmaz.

Geç yüklenen görüntüler (LazyLoad) ‘de sayfa içerisinde yer alan görüntüye çok fazla yer ayırarak sorunlara yol açabilir. Sizde sayfanızın tamamının değil sadece üst bölümünde yer alan içerikleri gösterip alt sayfalarda yer alan görüntüleri sayfa açılışında indirmeyerek bu sorunu çözebilirsiniz.

Reklamlar İçin Alan Boyutunu Düzenleyin.

Web sayfanıza reklam yerleştirdiyseniz bu reklamların hangi ölçülerde olacağını daha önceden belirleyin. Böylece reklamlarınız metnin içeriğini bozmayacak ve CLS Sorununa yol açmayacaktır. WordPress kullanırsanız Ad-Inserter benzeri bir reklam eklentisi kullanarak, sayfanızda yer alan reklamları otomatik olarak düzenleyebilir ve bozulmaması için önlem alabilirsiniz. Bu tür eklentiler sizin belirttiğiniz alanın dışına çıkmayarak sayfa düzeninizi korumaya çalışacaktır.

CLS Sorununu Düzeltme

Web sayfanızda dinamik içeriklerden kaçınmaya özen gösterin. Dinamik içerikler; web sayfası yüklendikten sonra eklenen içeriklerdir. Ekranın üst kısmında yer alan haber bülteni, kayan yazılar vs. dinamik içeriklerdir. Sizde açılan sayfada bu özellikleri devre dışı bırakın ve sitenizin stabil bir şekilde kullanıcıya aktarılmasını sağlayın.

Web sitenizin kurulu olduğu sunucudan gelen yavaş http yanıtları da içeriklerinizin düzgün görüntülenmesinin önüne geçebilir. İstikrarsızlığa neden olmamak için CDN gibi araçlar kullanıp görüntülerin yüklenmesi yüksek saniyeler alıyor ve içeriği bozuyorsa Document Object Model (DOM) ’de bir alan oluşturarak sayfa yükünü diğer araçlarla senkronize bir hale getirmeniz gerekmektedir.

Sonuç Olarak: Yazımız tam anlamıyla teknik ve ya kodlama ile ilgili gerekli bilgileri içermemektedir. CLS Sorununuzun tam olarak hangi sebeplerden dolayı ortaya çıktığını ve sorunlara karşın nasıl çözümler üretebileceğini açıkladık. Sizde belirlenen yöntemlerle CLS Sorunlarınızı düzeltebilir veya bu işte Profesyonel değilseniz destek almanızı tavsiye ederiz. CLS sorunu nedeniyle web tıklamalarınız, arama motorlarındaki gösterimleriniz çok fazla düşecektir.

Artık bu tarz sorunlar kodlama veya teknik sebeplerle çok fazla karşımıza çıkmıyor. Asıl sorunlar web site sahiplerinin kullanıcıyı bilerek veya bilmeyerek değişik sayfalara yönlendirmesi ve sayfa düzenini değiştirmesinden kaynaklanıyor.

CLS Sorunu ile ilgili olarak Eba için En Ucuz 10 Tablet Önerisi  yazımızı Pagespeed üzerinden kontrol edebilirsiniz. Paylaştığımız içerikte tablet tanıtımları olduğu ve sürekli olarak fiyatlar değiştiğinden ve linkler bozulduğundan yeni linkler ekledik ve CLS Sorunu: 0,25 (Mobil) içeriğinden fazla hatası aldık. Bu gibi sebeplerden dolayı içeriğimizi düzenlemek gerektiğinde çok fazla değişiklik yapacaksak yeni bir içerik paylaşmak daha mantıklı olabilir.