Cumulative Layout Shift Sorunu Çözümü

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:

<div style="height:300px;">
ADSENSE REKLAM KODU BURAYA
</div>

Ben esnek reklamlardan kaynaklı CLS sorununu bu şekilde çözdüm. Başka çözümü olan varsa buyursun.