Cumulative Layout Shift (CLS) Nedir?
Cumulative Layout Shift (CLS) yani Kümülatif Düzen Kayması, Core Web Vital’in hız ve kullanıcı deneyimi ölçüm kriterlerinden biridir. Bir web sitesinde gezinirken aniden ortaya çıkan bir reklam, okuduğunuz içeriğin pozisyon değiştirmesi veya siz tıklamak üzereyken sayfada aşağıya doğru hareket eden bir bağlantı gibi durumlar CLS için birer örnektir.
Bu yazıda, CLS sorununun nedenlerini ve Cumulative Layout Shift sorununun nasıl düzeltileceğine değineceğiz…
Cumulative Layout Shift Nedir?
Basit bir ifadeyle, Cumulative Layout Shift, zayıf kullanıcı deneyimine neden olan içerik düzenindeki kaymayı ifade eder. Yani bir web sitesinin görsel kararlılığıdır da diyebiliriz. Sayfa yükleme sırasında görünüm alanındaki bir öğe başlangıç konumundan hareket ettiğinde bir düzen kayması gerçekleşir. Bu duruma CLS-Cumulative Layout Shift denir.
Örneğin, bir web sitesinde bir bağlantıyı tıklamak üzeresiniz ve aniden bir reklam ortaya çıktı ve tıklamak istediğiniz bağlantının aşağı kaymasına neden oldu. Siz de bağlantıya tıklamak isterken aniden beliren reklama tıkladınız. Bu deneyimi muhtemelen birçok kişi yaşamıştır.
Bu gerçekten kötü bir kullanıcı deneyimidir ve SEO’nuzu olumsuz etkileyebilir. Google için Kullanıcı Deneyimi bir önceliktir ve bu nedenle Google, CLS‘i Sayfa Deneyimi sinyallerinden biri haline getirdi. Bu sinyaller, kullanıcı deneyiminin teknik yönlerini yakalamaya ve ölçmeye çalışır.
Kümülatif Mizanpaj Değişikliği, Temel Web Vitals‘in bir parçasıdır ve içeriğin kararlılığını ölçer. Kümülatif düzen değişikliğine genellikle eşzamansız olarak yüklenen kaynaklar veya mevcut içeriğin üzerine dinamik olarak eklenen DOM öğeleri neden olur.
Bununla birlikte genel olarak CLS nedenleri şunlardır:
- Dinamik boyutlandırma kullanan reklam birimleri
- Boyutsuz resimler ve videolar (duyarlı bir en boy oranını korumak için eksik yükseklik ve genişlik özellikleri)
- Boyutları olmayan iFrame’ler
- Dinamik olarak yeniden boyutlandırılan widget’lar
- Flash Of Styled Text (FOUT) veya Flash of Invisible Text (FOIT) olarak da bilinen yedeklerinden daha büyük veya daha küçük oluşturulan fontlar
- DOM’u güncellemeden önce ağdan yanıt bekleyen işlemler
- İlk sayfa yüklemesinden sonra eklenen içerik
İyi bir CLS puanı kaç olmalı?
Google der ki: “İyi bir kullanıcı deneyimi sağlamak için sayfaların CLS değeri 0,1’den düşük olmalıdır.”
Puanınız ne kadar düşükse, düzeniniz o kadar kararlıdır. Google’ın performans araçları tarafından kullanılan resmi CLS puanları aşağıdaki gibidir:
- İyi: 0.1’in altında CLS
- İyileştirilmesi gerekiyor: 0.1 ile 0.25 arasında CLS
- Zayıf: 0.25’in üzerinde CLS
PageSpeed Insights’ı ziyaret ederek veya Google Search Console’u kontrol ederek web sitenizin CLS puanını görebilirsiniz.
İşte PageSpeed’den bir görüntü:
Search Consol’dan Cumulative Layout Shift durumunuzu görmek için de:
- Consol hesabınıza girin ve sol kenar çubuğundan Önemli Web Verileri (Core Web Vitals) butonuna tıklayın.
- Masaüstü veya mobil için Raporu Aç’ı tıklayın.
- CLS puanı düşük olan URL’lerin bir listesini bu rapordan görebilirsiniz.
CLS nasıl hesaplanır?
CLS hesabı için iki ana faktör vardır: etki oranı (impact fraction) ve mesafe oranı (distance fraction). Google, her düzen kayması için etki oranını ve mesafe oranını hesaplayarak bir sayfanın CLS’sini puanlar.
Diğer Core Web Vital ölçümlerinden farklı olarak, CLS bir zaman ölçüsü olarak hesaplanmaz. CLS puanının hesap formülü şu şekildedir:
CLS = etki oranı * mesafe oranı
Daha detaylı hesaplama ise şu şekilde ilerler; Etki oranını bulmak için önce etki alanını hesaplamak gerekir. Etki alanı, düzen değişikliğinden etkilenen alanı tanımlar.
Etki oranını tanımlamak için, etki bölgesinin alanı görüntü alanına (sayfanın aşağı kaydırmadan ekranda görünen kısmı) bölünür:
etki oranı = etki alanı / görüntü alanı
etki oranı = [330 x 490] / [375 x 667]
etki oranı = [161700] / [250125]
etki oranı = 0,645
Hareket mesafesi, düzen değişiminden önceki ve sonraki mesafeyi tanımlar. Bu, “kayan eleman ne kadar kaydı” sorusunu cevaplamak üzere kullanılır. Mesafe oranını hesaplamak için, maksimum hareket mesafesini görüntü alanı yüksekliğine bölmek gerekir:mesafe oranı=maksimum hareket mesafesi/görüntü alanı yüksekliği
mesafe oranı = 120 / 667
mesafe oranı = 0.179
Bir sonraki adım, CLS puanını hesaplamaktır. CLS, Etki oranının Mesafe oranı ile çarpılmasıyla hesaplanır. Etki oranını sonucu 0.645, mesafe oranını sonucu da 0.79 olarak hesaplandığına göre;
CLS = etki oranı x mesafe oranı
CLS = 0.645 x 0.179
CLS = 0.1154
Yukarıdaki örnekten yola çıkarak kendi siteniz için hesaplama yapabilirsiniz. Fakat aslında bu hesaplama tamamen Google’ı ve diğer geliştiricileri ilgilendiren bir durum ve sizin hesap yapmanız gerekmez. Siz sadece aşağıdaki araçlar yardımıyla CLS sorununa neden olan alanları tespit edip gerekli düzenlemelere odaklanmalısınız.
CLS Ölçümü İçin Kullanılabilecek Araçlar
CLS hem laboratuvar hem de gerçek kullanıcı etkileşimleri ile ölçülebildiğinden, hem CLS laboratuvar puanınıza hem de CLS gerçek kullanıcı verilerinize bakmalısınız.
Laboratuvar Verileri, kullanıcı deneyimini simüle etmek için bazı araçlar kullanmanızı gerektirir. CLS laboratuvar verilerinize aşağıdaki performans araçları ile erişebilirsiniz.
Ayrıca, sayfaların anlık Web Vitals değerlerini görmek için kullanabileceğiniz bir Chrome uzantısı da mevcut: Buradan yükleyebilirsiniz. Bu uzantı, yükleme, etkileşim ve düzen kayma ölçümleri hakkında gerçek zamanlı geri bildirim sağlar.
Gerçek Kullanıcı Verileri, kullanıcı etkileşimlerine dayalı verilerdir. Google ve diğer üçüncü şahıslar tarafından toplanan büyük resmi görmenizi sağlar. Google için Gerçek Kullanıcı Verilerinin ana kaynağı, CrUX olarak da bilinen Chrome Kullanıcı Deneyimi Raporudur.
CrUX verilerine şu araçlarla erişilebilir:
- Google’ın BigQuery
- Google Data Studio
- PageSpeed Insights
- CrUX API
- Google Search Console (Temel Web Vitals raporu).
CLS puanı SEO’yu etkiler mi?
CLS, Mayıs 2021 itibariyle bir sıralama faktörü haline gelecek. Bu da, CLS puanınızın (diğer Web Vitals değerleriyle birlikte) SEO’nuzu etkileyeceği anlamına gelir.
Google, sıralama amacıyla bekleme süresi veya hemen çıkma oranı gibi ölçümleri kullanmadığını iddia etse de, Bing gibi diğer arama motorları, bu ölçümleri sıralama algoritmalarında kullandığını kabul ediyor. Bu nedenlerden dolayı, CLS optimizasyonunu SEO stratejinize dahil etmeniz gerekir.
Cumulative Layout Shift (CLS) Optimizasyonu
Kümülatif Düzen Kaymasını azaltmak için neler yapılabilir? Cumulative Layout Shift (CLS) problemine neden olan faktörleri yukarıda sıralamıştık. Kapsamlı bir liste olmasa da, en yaygın nedenler bunlardır. Buna göre, aşağıdaki önerileri ele alarak CLS sorununu en aza indirebilir ve hatta yeterli optimizasyonla sıfıra bile düşürebilirsiniz.
Peki Cumulative Layout Shift sorunu nasıl düzeltilir? İşte, CLS sorunu için alınabilecek önlemler ve çözüm yolları:
1. Reklam Komut Dosyaları
Reklam göstermek için web sayfanıza bir JavaScript reklam kodu eklemeniz gerekir. Genellikle, reklam görünürlüğünü ve gelirini artırmak için reklam kodunu ekranın üst kısmına eklemeniz gerekir.
Eğer kullandığınız reklamın belli bir boyutu yoksa ve dinamik reklam birimi kodu kullanıyorsanız, reklam açılmaya başladığında içeriğin aşağı kaymasına ve aynı zamanda sayfa yükleme hızının olumsuz etkilenmesine neden olur. Bu da, Google PageSpeed Insight aracında Cumulative Layout Shift sorunu olarak karşınıza çıkar.
Maalesef, harici reklamlar için sabit boyutlar belirlemediğiniz, üst kısımdan kaldırmadığınız ve yer tutucu eklemediğiniz sürece sorun ortadan kalkmaz. Dinamik reklamlar için en büyük reklam boyutunu hesaba katarak reklam kodunu bir <div> içine yerleştirebilir, CSS en boy oranı kutuları veya yer tutucu duyarlı resimler kullanarak reklamı görüntülemek için gereken alanı ayırabilirsiniz.
Böylece reklam boyutları değişse ve reklam içeriği henüz yüklenmemiş olsa bile herhangi bir kayma oluşmaz ve CLS sorunu yaşanmaz.
Alternatif olarak, WP Rocket gibi eklentileri kullanarak WordPress’teki reklam komut dosyasını erteleyebilirsiniz. Ancak bu durum, reklam gösteriminizi ve tıklama oranınızı etkileyecek ve böylece toplam kazancınızın azalmasına neden olacaktır.
2. Görüntülerde en boy oranlarını kullanın
Görsellerden kaynaklı kümülatif düzen kaymasını önlemek için, resimlerinize ve video öğelerinize her zaman genişlik ve yükseklik boyutu niteliklerini ekleyin. Günümüzde tarayıcılar, en boy oranları olarak belirlediğiniz yüksekliği ve genişliği otomatik olarak kullanır.
Sitenize manuel olarak görseller ekliyorsanız, her zaman boyutları dahil ettiğinizden emin olun. Bununla birlikte yer tutucu da kullanabilirsiniz. Birçok popüler cache eklentisi ve diğer optimizasyon eklentileri bu seçeneği sunar. Böylece tek tıkla tüm görseller (iframeler dahil) için yer tutucu ekleyebilirsiniz.
3. İçerik Yüklemeyi Geciktiren Yazı Tipleri
Yazı tipleri, CLS puanı dahil olmak üzere sayfa hızı performans sorunlarının en önemli nedenleri arasındadır. Günümüzde hemen hemen tüm web siteleri, en az bir özel web yazı tipi kullanmaktadır. Bu yazı tiplerinin, varsayılan tarayıcı yazı tiplerinden farklı harf boyutları ve boşlukları olduğundan, özel yazı tipi yüklendiğinde, web sitesi genelinde düzen değişikliklerine neden olur.
Google Yazı Tiplerinden veya diğer özel yazı tiplerinden kullanıyorsanız, bunlar iki şekilde düzen kaymasına neden olabilir:
- Görünmez Metin Flaşı (FOIT)
- Biçimlendirilmemiş Metin Flaşı (FOUT)
Temel olarak sorun, bir ziyaretçi tarayıcısının metni özel yazı tipi yüklenmeden önce görüntülemeye çalışabilmesidir. Özel yazı tipi yüklendikten sonra, metnin stilini günceller, bu da örneğin stilize edilmemiş metinden özel yazı tipine geçerken Cumulative Layout Shift yani Kümülatif Düzen Kayması’na neden olur.
Bu sorunu Search Consol’da, “Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın” şeklinde bir uyarı olarak da görebilirsiniz.
Problemi en aza indirmek mümkün olsa da, tamamen ortadan kaldıramayabilirsiniz. Bunun ana nedeni, özel web yazı tiplerinin hem markalaşma hem de iyi tasarım için gerekli olmasıdır.
Bununla ilgili en etkili önerilerimiz şunlardır:
- Font varlıklarının sayfa oluşturmada daha yüksek önceliğe sahip olması için fontlarınızı önceden yükleyin (rel = preload).
- Yazı tipleriniz gibi statik varlıkları barındırmak için agresif önbelleğe alma ve iyi bir CDN kullanmanızı da öneririz.
- Ek olarak, yazı tipi ailelerinin sayısını sınırlandırabilir ve dosya indirme boyutunu azaltabilirsiniz.
- Diğer seçenek, sistem yazı tiplerini (örneğin, Arial, Sans Serif, Tahoma, Verdana…) kullanmaktır. Bu sadece yazı tipi yükleme sorunlarını çözmekle kalmaz, aynı zamanda HTTP isteklerinin sayısını azaltır ve sitenizi hızlandırır.
- Ek olarak yazı tipi dosyalarını sunucunuzda barındırmak da yazı tipi yüklemesinden kaynaklı CLS sorununa çözüm olabilir.
CLS optimizasyonu hakkında daha fazla kaynak arıyorsanız, Google’ın oldukça kapsamlı kılavuzuna buradan ulaşabilirsiniz. Mutlaka göz atmanızı öneririz.
Cumulative Layout Shift/Kümülatif Düzen Kayması (CLS) konusunu anlamak ve gerekli optimizasyonu yapmak daha iyi bir kullanıcı deneyimi sunmaya yardımcı olacaktır. WordPress kullanıcıları için, yukarıdaki CLS sorunlarının tümünü birkaç dakikada çözmeye yardımcı olacak en iyi eklenti WPRocket’tir. Yüklediğiniz andan itibaren sitenizi optimize etmeye başlar. Daha fazla detay için WP Rocket Kurulumu ve En İyi Ayarları başlıklı içeriğimize göz atabilirsiniz ya da buradan direkt eklenti sitesini ziyaret edebilirsiniz.
