CLS, kullanıcı bir şey yapmadan içeriğin yer değiştirmesini ölçer. Sonradan yüklenen görsel, reklam, font veya duyuru çubuğu sayfayı aşağı itiyorsa önce alan rezervasyonunu düzeltin.
1. Kaymanın kaynağını kaydedin
DevTools Performance içinde layout shift olayını seçin; hangi öğelerin yer değiştirdiğini görün. Yalnız kayan öğeye değil, onun üstüne sonradan eklenen kaynağa bakın. Yavaş ağda tekrar test edin.
2. Görsele boyut verin
<img src="/images/urun.webp" width="800" height="1000" alt="Ürünün ön görünümü">.product-image img { display:block; width:100%; height:auto; }
.ad-slot { min-height:250px; }width/height gerçek en-boy oranını temsil etmelidir. Reklam yüksekliği cihaz boyutuna göre değişiyorsa responsive alan ayırın. Çok büyük boşluk yaratmamak için kullanılan gerçek ölçüleri esas alın.
3. Dinamik alanı mevcut akışı bozmadan gösterin
Çerez bildirimi, kampanya bandı ve arama sonucu için başlangıçtan alan ayırın veya uygun overlay tasarlayın. Üstteki içeriği sayfa açıldıktan birkaç saniye sonra araya sokmayın. Skeleton ile gerçek kartların yükseklikleri birbirine yakın olmalıdır.
4. Font kaymasını azaltın
Kullanılacak fontu gerekli ağırlıklarla sınırlandırın. Uygun fallback seçin; font değişince satır sayısı ciddi değişiyorsa ölçü uyumunu düzeltin. Font yüklenmesini hızlandırmak tek başına her kaymayı çözmez.
Son kontrol
Mobil ve masaüstünde, önbellek boş/dolu iken açılışı test edin. Görselin hiç yüklenmediği durumda da ayrılan alan düzgün kalmalı. Sepete ekleme gibi kullanıcı hareketiyle açılan alanları da gözleyin; her kayma aynı ölçüm koşuluna girmese de kullanım sorunu yaratabilir.
Bilgiyi uygulanabilir projeye dönüştürelim.
İhtiyacınızı teknik, operasyonel ve ticari açıdan değerlendirip doğru çözüm yol haritasını birlikte oluşturalım.
Projenizi Anlatın
