Detaylı tanım
Kullanıcı bir butona basmak üzereyken layout kayar ve yanlış butona basılırsa CLS skoru yükselir. CLS'i artıran ana nedenler: width/height attribute'u olmayan resimler, üst kısmından sonradan yüklenen reklam/banner, web fonts yüklenirken metin kayması (FOUT/FOIT). Çözümler: img/iframe'lere boyut attribute, ad slot için reserve space, font-display: optional.
CLS (Cumulative Layout Shift) nasıl çalışır?
CLS tek bir olay değil, tek tek kayma puanlarının toplamıdır. Bir kayma puanı iki çarpanın sonucudur: etki oranı ve mesafe oranı. Etki oranı, yer değiştiren elemanların kayma öncesi ve sonrası kapladığı birleşik alanın görünür ekrana bölünmesidir. Mesafe oranı ise en çok yol alan elemanın kat ettiği mesafenin ekranın ilgili kenarına oranıdır. Tarayıcı bu kaymaları oturum pencerelerinde toplar: ardışık kaymalar arasında bir saniyeden uzun boşluk oluştuğunda yeni pencere açılır ve bir pencere en fazla beş saniye sürer. Sayfanın CLS değeri, tüm pencereler içindeki en yüksek toplamdır. Saha ölçümünde iyi kabul edilen sınır 0,1; 0,25 üzeri kötü sayılır ve değerlendirme kullanıcıların 75. yüzdeliği üzerinden yapılır.
Laboratuvar ve saha ölçümü aynı şeyi söylemez. Lighthouse gibi araçlar sayfanın yalnızca ilk yüklenme anını ölçer; gerçek kullanıcı verisi ise kullanıcının sayfada kaldığı sürenin tamamını kapsar, yani sonsuz kaydırma, geç açılan sohbet balonu, tıklamayla büyüyen bileşen de hesaba girer. Bu yüzden Lighthouse raporunda sıfır görünen bir sayfa saha raporunda eşiğin üstünde çıkabilir. Ayrıca kullanıcı etkileşiminden sonraki kısa süre içinde gerçekleşen kaymalar hesaba katılmaz; menü açmak veya akordeon genişletmek ceza üretmez. Gerçek durumu görmek için web-vitals kütüphanesiyle tarayıcıdan toplanan değerleri analitik olayı olarak göndermek ve sonucu sayfa şablonu, cihaz ve bağlantı türüne göre kırmak gerekir.
Düzeltme tarafında birkaç kalıp işin büyük bölümünü çözer. Görsel ve video için CSS aspect-ratio kullanmak, içerik inmeden önce alanın ayrılmasını sağlar. Yazı tipi değişiminde metnin sıçramaması için yedek yazı tipine size-adjust ve ascent-override ile ölçü uydurulur. Konum animasyonlarında top ve left yerine transform kullanmak kayma üretmez, çünkü düzen yeniden hesaplanmaz. Çerez bandı, duyuru çubuğu ve reklam alanları ya akıştan çıkarılır ya da yüksekliği baştan sabitlenir. Son olarak istemci tarafında sonradan eklenen bileşenler, iskelet kutu yerine gerçek son boyutuyla rezerve edilmelidir; iskeletin boyu farklıysa kullanıcı yine kayma görür ve ölçülen puan düşmez.
Hangi terimlerle karıştırılıyor?
| Karıştırılan terim | Aradaki fark |
|---|---|
| LCP (Largest Contentful Paint) | LCP en büyük görsel ögenin ne zaman göründüğünü, yani hızı ölçer. CLS ise içerik göründükten sonra yerinde durup durmadığını, yani görsel kararlılığı ölçer. |
| INP (Interaction to Next Paint) | INP kullanıcının dokunuşuna sayfanın ne kadar sürede yanıt verdiğini ölçer. CLS yanıt süresiyle değil, beklenmedik konum değişimleriyle ilgilenir; ikisi farklı darboğazlardan doğar. |
| Lighthouse performans skoru | Lighthouse skoru laboratuvar koşullarında üretilen bileşik bir nottur. CLS ise tek başına bir Core Web Vitals metriğidir ve sıralama değerlendirmesinde gerçek kullanıcı verisi üzerinden okunur. |
| Reflow (yeniden düzen hesabı) | Reflow tarayıcının düzeni yeniden hesaplamasıdır ve her zaman görünür bir kayma üretmez. CLS yalnızca kullanıcının ekranında konum değiştiren görünür ögeleri puanlar. |
Sık yapılan hatalar
Yalnızca Lighthouse skoruna güvenmek
Lighthouse sayfanın ilk saniyelerini ölçer, gerçek kullanıcı ise sayfada dakikalarca kalır. Geç yüklenen banner, sonsuz kaydırma ve sohbet bileşeni yalnızca saha verisinde görünür. Karar vermeden önce tarayıcıdan toplanan gerçek kullanıcı ölçümüne bakmak, en azından Search Console ve CrUX raporunu açmak gerekir.
İskelet ekranı çözüm sanmak
İskelet kutu yalnızca yüksekliği gerçek içerikle aynı olduğunda kaymayı önler. Üç satırlık iskeletin yerine beş satırlık metin gelirse altındaki her şey aşağı iner ve puan yine yükselir. Ölçü iskeletten değil son içerikten alınmalı, değişken uzunluktaki metinlerde satır sayısı sınırlanmalıdır.
Kaymayı sadece görsellerde aramak
Boyutsuz görsel bilinen bir nedendir ama tek neden değildir. Sonradan enjekte edilen çerez bandı, kampanya şeridi, yazı tipi değişimi, dinamik fiyat rozeti ve A/B test betikleri de düzeni kaydırır. Kaynağı bulmak için kayma anını kaydeden performans girdilerine bakmak, tahmin yürütmekten daha hızlı sonuç verir.
Ortalama değerle rapor vermek
Eşikler ortalamaya göre değil, kullanıcıların 75. yüzdeliğine göre değerlendirilir. Ortalama, sorunun asıl yaşandığı yavaş cihaz ve zayıf bağlantı grubunu gizler. Aynı şekilde tek bir ana sayfa ölçümü, ürün ve kategori şablonlarındaki sorunu göstermez; ölçüm şablon bazında yapılmalıdır.
CLS (Cumulative Layout Shift) ne zaman kritik hâle gelir?
Mobil ödeme ve form adımlarında kritik hale gelir. Kullanıcı gönder butonuna basmak üzereyken üstte bir kampanya şeridi açılırsa parmağı yanlış ögeye gider, sipariş yarım kalır ve bunun analitikteki tek izi açıklanamayan bir terk olur. Aynı şekilde reklam veya öneri bileşeni yüklenen içerik sayfalarında okuma akışı bozulur. Trafiğin büyük bölümü mobil olan e-ticaret ve teklif formu sayfalarında CLS doğrudan ciroya bağlıdır.
Örnekler
- Ürün listesinde resim boyutu belirtilmeden lazy load yapılırsa CLS bozulur.