Pagespeed Insight üzerinden sitemi test edip gerekli hız optimizasyonlarını yapıyorum. fakat ne yaptıysam Cumulative Layout Shift sorununu bir türlü çözemedim. sorunun adsense reklamlarından kaynaklandığını düşünüyorum ama webde bununla ilgili ne yapmamız gerektiğini tam olarak anlatan yok. belki burda vardır bir bilen. sitem wordpress. adsense otomatik reklamlarını kullanıyorum. buna göre CLS sorunu çözümü sunarsanız sevinirim.
Cumulative Layout Shift sorunu çözümü için öncelikle niçin bu hatayı aldığınızı belirlemeniz gerek.
Cumulative Layout Shift yani CLS sorunu, sitenin açıldığı ilk andaki görüntüde, site yüklenirken, yazı alanının ekranın altına doğru kayması kaynaklıdır. Bu soruna genel olarak boyutları belirlenmeyen görseller ve esnek reklam alanları neden olmaktadır.
Misal ben sitenin header alanı altına esnek bir Adsense reklamı yerleştirdim. Reklamlar site açıldıktan sonra yüklendiği için, site ilk açıldığında burada reklam gösterilmiyor; yerinde yazı alanı oluyor. Reklam yüklenip de gösterilmeye başlandığında yazı alanı alta doğru kayıyor. Bu durum kullanıcı deneyimini olumsuz etkilediği için Google bu durumu fazlasıyla önemsiyor. Google Search’teki Önemli Web Verileri hatalarının çoğu da bu CLS sorunu kaynaklı olabiliyor.
Genel olarak incelediğimde bu hatayı alan sitelerin büyük bir çoğunluğunun CLS sorunu kaynağı, site açıldığında ilk görünen esnek Adsense reklam birimlerinden kaynaklanmakta. Geliri daha iyi olduğu için sabit boyutlu reklam yerine esnek boyutlu reklamlar kullananlar bu durumdan şikayetçi.
Google ileride bu soruna nasıl bir çözüm bulur bilemiyorum fakat geçici CLS sorunu çözümü olarak, esnek reklam birimi kullanılsa da en azından reklam alanının yükseklik değerine sabit bir değer verilebilir. Görünüm olarak biraz rahatsız edici olsa da bundan başka bir çözüm yok gibi görünüyor.
Site ilk açıldığında gösterilen esnek reklam boyu yüksekliği mobilde de masaüstünde de 300px değerini geçmiyor. Bu nedenle reklam kodunu div içine alıp div stiline yükseklik olarak 300px değerini verip geçici çözüm sağlanabilir.
Yani kodumuz şu şekilde:
Ben esnek reklamlardan kaynaklı CLS sorununu bu şekilde çözdüm. Başka çözümü olan varsa buyursun.