Bir haber sayfasını okurken tam bir cümlenin ortasındayken metin bir anda aşağı kayıyor. Ya da bir düğmeye dokunacakken sayfa yer değiştiriyor ve yanlış şeye basıyorsun. Bu sinir bozucu deneyimin teknik adı layout shift, yani düzen kayması. Google bunu CLS (Cumulative Layout Shift) metriğiyle ölçüyor ve Core Web Vitals’ın bir parçası olarak değerlendiriyor. İyi haber: CLS’nin sebepleri çoğunlukla net ve düzeltmeleri kod bilgisi gerektirse de mantığı basit.
CLS nedir
CLS, sayfa ömrü boyunca ekranda görünen öğelerin beklenmedik biçimde yer değiştirmesinin toplam ölçüsüdür. Puan ne kadar düşükse o kadar iyi. Google’ın önerdiği eşik 0,1’in altı iyi kabul edilir; 0,25’in üstü zayıftır. Bu değerler zamanla güncellenebilir. Yükleme sırasında oluşan kayma ölçülür; kullanıcı bir düğmeye basıp menü açıldığı için oluşan düzen değişikliği (beklenen kayma) sayılmaz.
Nasıl ölçülür
PageSpeed Insights’ta CLS değerini ve hangi öğelerin kaymaya yol açtığını görebilirsin. Tarayıcı geliştirici araçlarının Performans sekmesi de kayma anlarını işaretler. Search Console’daki Core Web Vitals raporu gerçek kullanıcı verisiyle sorunlu sayfa gruplarını gösterir. Sorunu tekrar üretmek için sayfayı yavaş bir bağlantıda (ağ kısıtlaması açıkken) yükle; kayma çoğu zaman yavaş bağlantıda daha görünür olur.
Sebep 1: Boyutu belirtilmemiş görseller
En yaygın sebep bu. Görselin genişlik ve yüksekliği tanımlı değilse tarayıcı, görsel inene kadar ne kadar yer ayıracağını bilmez; görsel inince altındaki tüm içerik aşağı iner. Çözüm: her görselde width ve height niteliklerini ver ya da CSS ile en boy oranını (aspect-ratio) tanımla. Böylece tarayıcı yükleme öncesinde doğru boyutta boşluk bırakır. Duyarlı görsellerde bile oran korunmalı.
Sebep 2: Web yazı tipleri
Özel yazı tipi geç yüklendiğinde önce yedek yazı tipi gösterilir, sonra özel font devreye girince metnin boyutu ve satır aralığı değişir; içerik kayar. Çözümler: yazı tiplerini önceden yükle (preload), font-display özelliğini uygun ayarla, yedek yazı tipini özel yazı tipine benzer ölçülerde ayarla (size-adjust gibi özelliklerle). Sistem yazı tipleri kullanmak da bu sorunu tümüyle ortadan kaldırır.
Sebep 3: Reklam, gömme ve iframe alanları
Reklam kutuları, harita gömmeleri, video oynatıcıları ve sosyal medya widget’ları içerik yüklenince boyut değiştirir. Çözüm: bu alanlar için önceden sabit bir yükseklik ayır. Reklam kullanıyorsan farklı boyutlu reklamlara uyum sağlayacak en büyük olası yüksekliği rezerve et. Gömülü videolarda ve haritalarda en boy oranını belirt.
Sebep 4: Sonradan eklenen içerik
Sayfa yüklendikten sonra en üste eklenen çerez bildirimi, kampanya çubuğu, abonelik bannerı ya da “sohbet başlat” balonu içeriği aşağı iter. Çözüm: bu öğeleri sayfanın düzenini itmeyecek şekilde konumlandır: üstte yer ayırıp baştan göstermek ya da sabit konumda (fixed) ekranın altında göstermek. Kullanıcının etkileşimi olmadan içerik yukarıdan itilmemeli.
Sebep 5: Animasyonlar ve geçişler
Konum ya da boyutu değiştiren animasyonlar (örneğin üstten kayarak gelen bir öğe) kaymaya yol açabilir. Animasyonlarda transform ve opacity özelliklerini tercih et; bunlar düzeni etkilemez. Boyut ya da konum değişiminin animasyonla yapılması gerekiyorsa çevresindeki içeriği etkilemeyecek biçimde yap.
Sık kullanılan sistemlerde ipuçları
WordPress’te sayfa oluşturucu eklentileri sıklıkla görsellerin boyut niteliklerini atlar; güncel sürümler bunu düzeltir ama eski temalar sorun çıkarabilir. Tema güncellemesi ve görsel eklentilerinin ayarları bu konuda ilk bakılacak yerdir. E-ticaret sitelerinde ürün galerileri ve varyasyon seçicileri (renk, beden) yükleme sonrası boyut değiştirebilir; galeri alanına sabit oran ver. Kayan menüler ve yapışkan başlıklar (sticky header) doğru uygulanmazsa içeriği zıplatır.
Düzeltme sırası
Önce PageSpeed Insights’ın gösterdiği en büyük kayma kaynaklarını belirle. Genelde ilk iki üç öğeyi düzeltmek puanı büyük ölçüde iyileştirir. Sonra:
- Görsellere boyut ver
- Yazı tiplerini önceden yükle ve yedeğini uyumlu yap
- Reklam ve gömülü alanlara sabit yer ayır
- Sonradan eklenen bannerları düzeni itmeyecek şekilde yerleştir
- Mobilde tekrar test et
Değişikliklerin saha verisine yansıması Search Console’da birkaç hafta sürebilir.
Üçüncü taraf widget’lar ve harici içerik
Harita, yorum kutusu, canlı destek balonu, video oynatıcı ve sosyal medya gömmeleri harici kaynaklardan yüklenir ve boyutları kontrol dışıdır. Bunlar için önceden kapsayıcı kutu tanımla ve kutuya en az beklenen yüksekliği ver. Widget yüklenmezse ya da geç yüklenirse sayfa yine de kararlı kalır. Sayfanın ilk ekranında kritik olmayan widget’ları sayfanın altına taşımak da hem kaymayı hem yükleme süresini azaltır. Yükleme süresi zaten uzun olan bir sitede, her yeni widget bir ek risktir; eklemeden önce faydasını tart.
Sık yapılan hatalar
- Tüm görselleri boyutsuz bırakmak
- Yazı tipi yüklemesini hiç yönetmemek
- Reklamlar için alan ayırmamak
- Sadece masaüstünde test etmek
- Laboratuvar skoruna bakıp gerçek kullanıcı verisini göz ardı etmek
- Çerez bildirimini sayfayı aşağı iten şekilde eklemek
Örnek: bir restoran sitesinde kayma teşhisi
Bir restoran sitesinde menü sayfası açılırken yemek fotoğrafları aşağı iniyor ve rezervasyon düğmesi kayıyor. PageSpeed Insights, kaymaya en çok yemek görsellerinin ve üstte sonradan çıkan bir çerez çubuğunun sebep olduğunu gösteriyor. Düzeltme iki adımda: görsellere genişlik ve yükseklik tanımlamak, çerez çubuğunu sayfanın altında sabit konumlu bir kutuya çevirmek. İkinci sorun, rezervasyon bağlantısının yüklenen üçüncü taraf widget’ı içinde olması; widget için sabit bir yükseklik ayrılıyor. Bu üç küçük değişiklik, sayfanın hissini belirgin biçimde iyileştirir ve ölçümde de görünür.
Mobil menü ve yapışkan öğeler
Mobil menüler, yapışkan üst çubuklar ve yüzen düğmeler (WhatsApp, ara) yanlış uygulandığında düzen kaymasına yol açar. Çubuk sayfa yüklendikten sonra ortaya çıkıp içeriği aşağı itiyorsa bunu önceden yer ayırarak çöz. Kaydırma sırasında görünen ya da gizlenen çubukların yüksekliğini sabit tut. Kullanıcı etkileşiminin sonucu olan değişiklikler (menüye dokunulunca açılması) kayma sayılmaz; kullanıcı dokunmadan olan her hareket kayma sayılır.
Kullanıcı gözüyle kontrol
Metriğin ötesinde bir de basit bir insan testi var: sayfayı telefonundan, yavaş bir bağlantıyla aç ve ilk beş saniyede gözünle takip et. Bir şey zıplıyor mu? Bir düğmeye dokunmak istediğinde yer değiştiriyor mu? Bu test, araçların kaçırdığı sorunları da yakalar. Sonra bir arkadaşına ver ve şikâyet edip etmediğine bak.
CLS düzeltmeleri, çoğunlukla küçük ama titiz işler. Site hızı ve SEO ilişkisi yazımızda genel çerçeveyi bulabilirsin. Sitenin CLS sorunlarını birlikte bulmak ve düzeltmek istersen web tasarım hizmetimizi inceleyip iletişim sayfasından ya da 0540 022 64 22 numarasından WhatsApp ile yazabilirsin.