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.
İ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.
İçindekiler
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.
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 sayfanızda yüksek CLS ile karşılaşıyorsanız bunun birçok nedeni olabilir. Bunlardan bazıları şu şekildedir.
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.
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.
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.
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.
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.
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.
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.
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.
Kişisel bakım ve sağlık ürünleri arayışı, günlük hayatın koşuşturmacası içinde bazen yorucu bir hal alabilir.…
Şirketiniz için promosyon termos, powerbank veya USB mi arıyorsunuz? Marka gücünüzü artıracak en doğru teknoloji…
Stok takip sistemi, maliyetlerin yüksek ve sürekli değişken olduğu konuk ağırlama ve yeme içme…
Akıllı telefonlardan bahsettiğimizde çoğu insanın aklına şık tasarımlar, yüksek çözünürlüklü ekranlar ve gelişmiş kameralar gelir.…
Meyve özleri, doğrudan meyveden elde edilen yoğun aromaları sayesinde mutfakta yaratıcılığa kapı açar. Özellikle tatları…
Kurumsal filo yönetiminde dijitalleşme ve maliyet optimizasyonu her geçen gün daha fazla önem kazanırken, OPET…
Size daha iyi hizmet sunabilmek için çerezleri kullanıyoruz.