Cumulative Layout Shift (CLS) Problemi Nasıl Giderilir?

Seo terimleri artıyor, mobil kullanımla birçok yeni terim karşımıza çıkıyor. Bunlardan biri yine Google amca tarafından önemsenen mobil ziyaretçiler için ekran kaymaları sorunu olan Comulative Layout Shift problemidir. CLS problemi çözümü oldukça kolaydır ve genellikle resim, video, reklam gibi ziyaretçi siteye girdiği anda hemen karşılaşmadığı ve karşılaştığında ise resmin boyutu yüklendiğinde veya reklam boyutu yüklendiğinde ekranın kaydığı durumların önüne geçerek çözüm üretilir.

Benim kişisel blogumda da bu problem vardı ve artık giderdim. Gerçekten oldukça basit bir işlem bunun için para vermenize gerek yok hiç bir tasarımcıya veya yazılımcıya. Yapmanız gerekenleri hemen aşağıda liste halinde sunuyorum hemde ücretsiz :)

1# Reklam kodlarınıza min-height değeri verin.

<ins class="adsbygoogle"
     style="display:block;min-height:250px;"
     data-ad-client="ca-pub.....

Böylece reklam yüklenirken minimum olarak belli bir yüksekliği zaten kaplamış olacak.

2# Resimlerinize height ve width değerlerini girin. Bu hem seo açısından önemli hemde CLS değerini düşürmek için önemlidir.

<img src="kazimuslu.jpg" width="200" height="90">

3# Resim kutunuz varsa yani bir div içerisinde resim kullanıyorsanız o dive minimum yükseklik ataması yapın.

<div style="min-height:200px;">
<img src="...">
<p>...</p>
</div>

 Aynı işlemleri embed videolarda da gerçekleştirebilirsiniz. Kalın sağlıcakla..

Faydalı olabilecek bağlantılar;

• Web.dev CLS sayfası