Cumulative Layout Shift (CLS) Nedir?

Cumulative Layout Shift (CLS), web sitenizdeki sayfaların kararlığını ölçmek için kullanılan bir metriktir. CLS skorunun yüksek olması, bir performans sorunu olarak değerlendirilmelidir.

Kullanıcılar bir web sayfasını görüntülediğinde, sayfanın yükleme sürecinde bileşenler (Örneğin, resimler veya metin kutuları) yer değiştirebilir. Eğer bu bileşenlerin yer değiştirmesi, kullanıcı etkileşimleriyle (Örneğin, buton tıklamaları) birlikte ortaya çıkarsa kullanıcıların istemeden yanlış bir yere tıklamasına veya yanlış bir eylem gerçekleştirmesine neden olabilir.

CLS, Google Core Web Vitals içerisindeki en önemli metriklerden biridir. Core Web Vitals; Google’ın kullanıcı deneyimini ölçmek için kullandığı üç metrik barındırır. Bunlara Search Console üzerinden ulaşılabilir. Cumulative Layout Shift dışında Largest Contentful Paint ve First Input Delay de Core Web Vitals tarafından ölçülen metriklerdir. Ancak konumuz bunlar olmadığı için burada diğer iki ölçümün detaylarına girmeyeceğim.

CLS, bir web sayfasındaki anlık kaymaların yarattığı etkinin toplamını (cumulative) ölçer. CLS skoru, 0 ile 1 arasında bir sayıdır. Daha düşük bir CLS skoru, kullanıcıların daha az hatalı etkileşim yaşadığı anlamına gelir. Web geliştiricileri, CLS’yi azaltmak adına sayfa yükleme sürecindeki bileşenlerin boyutlarını, konumlarını ve diğer özelliklerini optimize etmek için çeşitli teknikler kullanabilirler. Aşağıda tüm bu detayları derinlemesine sizler için inceledim.

CLS Neden Önemli?

CLS skorunu azaltmak iki nedenden dolayı son derece önemlidir. Bu iki neden kullanıcı deneyimi ve arama motoru sıralamaları olarak ifade edilebilir. CLS puanınızın yüksek olması;

• Kullanıcı deneyimi açısından kötüdür. Çünkü kullanıcılar sayfada istemedikleri bir etkileşimde bulunabilir. Yanlışlıkla bir butona tıklama olasılıkları artar. Ayrıca sayfayı doğru şekilde görüntüleyemeyebilirler. Özellikle mobil veya düşük hızda internete sahip kullanıcılar için bu büyük bir sorundur.
• Google için Core Web Vitals ve dolayısıyla kullanıcı deneyimi önemli bir sıralama faktörüdür. Eğer web sayfalarınızın CLS skoru yüksekse bu durum sayfalarınızın arama sıralamalarını doğrudan olumsuz etkileyecektir. Bu nedenle kaliteli içeriklerinizle bile hedeflediğiniz sonuçları alamayabilirsiniz.

CLS skorunun düşük olması, web sayfasının daha iyi kullanıcı deneyimi sunmasına yardımcı olur. Böylece kullanıcılarınız sitede daha fazla vakit geçirirler. Ayrıca ilerleyen zamanlarda da sitenize geri dönme olasılıkları artar.

CLS Skorunun Artmasının Nedenleri

CLS’nin temel olarak web sayfalarınızdaki düzen kayması şeklinde tanımlandığını söylemiştik. Bu tür düzen kaynamalarının en büyük nedenlerinden biri, sayfalarınız için sabit bir yükseklik ve genişlik belirlenmemiş olmasıdır. Bu tür durumlarda sayfanıza bir resim veya video eklediğinizde sabit olarak belirlenen bir değer olmadığı için görselin ve kullanıcının sitenize giriş yaptığı ekranın boyutuna göre sayfa düzeni değişebilir. Bunun dışında CLS skorunun artmasına neden olabilecek yaygın nedenler şu şekildedir:

• Sayfa yüklenirken, bazı bileşenler diğerlerinden daha yavaş yüklenebilir. Bu, sayfa yüklenirken bileşenlerin yer değiştirmesini tetikleyebilir.
• Sayfa yüklenirken, bazı bileşenlerin boyutları değişebilir. Örneğin, resimler veya video bileşenleri yüklendikçe gerçek boyutları kullanıcıya iletilmeye başlanır. Bu sırada diğer bileşenlerin konumlarında kaymalar olabilir.
• Ayrıca sayfadaki uyumsuz bileşenler de CLS skorunun artmasına neden olabilir. Bazı bileşenlerin boyutları veya stilleri, diğer bileşenlerin boyutları veya stilleriyle uyuşmadığında kullanıcılar farklı cihazlarda performans sorunları ile karşılaşabilir.

Tüm bu sorunlar, optimize işlemleri sırasında kolayca çözülebilecek sorunlardır. Örneğin doğru yüklenmeyen görseller için yer tutucular kullanmak mümkündür. Uyuşmayan yazı stilleri, Google’ın desteklediği fontlarla değiştirilebilir. Bu türden basit dokunuşlar, CLS skorunun azalmasına büyük katkılar sağlayacaktır.

CLS Skoru Kaç Olmalı?

CLS skoru 0 ile 1 arasında bir değer alır. Bu değer ne kadar düşükse web sayfalarınızın o kadar iyi bir kullanıcı deneyimi sağladığı anlamına gelir. Google, CLS skoru için aşağıdaki değerleri önermektedir:

• 1 ve altında: Mükemmel
• 1 ile 0.25 arasında: Kabul edilebilir
• 25 ve üzerinde: Kötü

0,1 veya daha düşük bir puan, Google’ın Core Web Vitals yönergelerine göre mükemmel performans anlamına gelse de bunu yakalamak her zaman mümkün olmayabilir. Özellikle uzun içeriklere ve çok fazla görsel vb. ögeye sahip sayfalarınız için bu oldukça zordur. Yine de sayfalarınızın 0.25’i geçmediğinden emin olmak için Core Web Vitals verilerini sürekli takip etmelisiniz.

CLS Skoru Nasıl Öğrenilir?

Cumulative Layout Shift (CLS) skoru, web sayfasının kullanıcı deneyimini belirleyen önemli bir performans göstergesidir. Core Web Vitals metrikleri arasında bulunan bu veriyi öğrenebileceğiniz birçok araç vardır. En yaygın kullanılan araçlar şunlardır:

Google Search Console

Search Console, tüm web site sahiplerinin sitesini eklemesi gereken bir Google aracıdır. Burada sitenizin performansına dair pek çok veriyi bulabilirsiniz. Bunların başında da Core Web Vitals verileri gelir. CLS skorunuzu Search Console üzerinden öğrenmek için sol panelde yer alan Performans raporuna göz atmalısınız. Burada Metrikler sekmesi üzerinden CLS metriğini seçerek web sayfalarınızın CLS skorunu görebilirsiniz.

Chrome Tarayıcı

Google tarafından geliştirilen Chrome tarayıcı SEO performansını analiz etmek için çok sayıda imkanı da kullanıcılara sunar. Bu durum CLS skoru için de geçerlidir. Web sayfanızı Chrome tarayıcısında açtıktan sonra sayfanın herhangi bir yerine sağ tıklayın. Ardından Sayfayı İncele seçeneğine tıklayın. Buradan Lighthouse sekmesine gidin. Performans menüsünde yer alan Testi Başlat butonuna tıkladığınızda CLS skorunuzu görebilirsiniz.

PageSpeed Insights

Bu aracın temel amacı web sayfalarınızın hızını ölçmektir. Ancak Core Web Vitals verilerine buradan da ulaşmanız mümkündür. Araca internet sitesi üzerinden ulaşabilirsiniz. Buradaki kutucuğa URL’nizi girin ve Analiz Et butonuna tıklayın. En üstteki puan site hızınızı gösterir. Aşağıya doğru indikçe CLS skorunuzu da görebilirsiniz.

Google Lighthouse

Lighthouse üzerinden CLS ölçümü yapmak için Chrome tarayıcısını kullanmak zorunda değilsiniz. Google’ın Developer Tools menüsü üzerinden de Lighthouse’a ulaşabilirsiniz. Burada Rapor Oluştur sekmesine tıkladığınızda karşınıza çıkan rapor PageSpeed Insigshts’a benzer. CLS skorunu görmek için sayfayı biraz aşağı kaydırmanız gerekebilir.

CLS Skoru Nasıl İyileştirilir?

CLS, bir web sitesinin görsel kararlılığını ölçmek için kullanılan bir ölçümdür. Yükleme işlemi sırasında beklenmeyen düzen kaymalarının sayısını ölçer ve 0 ile 1 arasında değişen bir puan verir. Yukarıda da belirttiğimiz gibi 1, olabilecek en kötü puandır. Kullanıcılar sayfada hareket eden içerikle etkileşim kurmakta zorlanabileceğinden, yüksek bir CLS puanı kötü bir kullanıcı deneyimine neden olabilir.

CLS’yi iyileştirmek için dinamik içeriğin neden olduğu düzen kaymalarını azaltmaya, düzgün yazı tipi yüklemeye ve gereksiz DOM manipülasyonundan kaçınmaya odaklanmak önemlidir. İşte tam da bunu yapmanıza yardımcı olacak bazı ipuçları şu şekilde sıralanabilir.

Görselleriniz İçin Genişlik ve Yükseklik Ayarı Yapın

Düzen değişiklikleri çoğu zaman zaten yüklenmiş olan içerik, diğer içeriğin yüklenmesi bittikten sonra hareket ettiğinde gerçekleşir. Bununla başa çıkmanın en iyi yolu, kullanacağınız alanı önceden belirlemenizdir. Resimlerin genişlik ve yükseklik niteliklerini açıkça ayarlamak, boyutlandırılmamış resimlerin neden olduğu düzen kaymalarını düzeltmenin en basit yöntemidir. Bunun için aşağıdaki ilk kodu ikincisine dönüştürmeniz yeterli olacaktır:

Google istatistiklerine göre geçtiğimiz yıl taranmış web sayfalarının %72’sinde boyutlandırılmamış en az bir resim yer alıyordu. Sadece bunu yapmanız bile CLS ve kullanıcı deneyimi açısından birçok web sayfasının önüne geçmeniz demektir.

CSS En-Boy Oranı Özelliğini Kullanın

Tarayıcıların birçoğu, görüntülenen ekrana göre görselleri boyutlandırmak için en-boy oranını otomatik optimize eden CSS kodlarını tanır. Bu özelliği kullanarak siz de video ve görsellerin farklı cihazlarda farklı oranlarla görünmesini sağlayabilirsiniz. Bunun için aşağıda verdiğimiz 16-9 oranı için yazılmış ilk koda benzer mevcut kodunuzu ikinci koda dönüştürmeniz gerekir:

Yazı Tipi Yüklemeleri

Tarayıcı, yazı tipinin yüklenmesini beklerken geçici olarak başlıklarınız veya metnin bir bölümü gözükmeyebilir. Benzer şekilde tarayıcı, farklı bir font ile sayfanızı görüntüleyerek sayfa düzeninin bozulmasına neden olabilir. Bundan kaçınmak için CSS @font-face kuralını kullanarak fontları eşzamansız olarak yüklemek en iyisidir.

Yazı tipinin yüklenirken nasıl görüntülenmesi gerektiğini belirtmek için CSS’de font-display özelliğini de kullanabilirsiniz. Örneğin, tarayıcının özel yazı tipinin yüklenmesini beklerken bir yedek yazı tipi görüntülemesini sağlamak için font-display: swap’ı ayarlayabilirsiniz.

JavaScript Yerine CSS Animasyonları Kullanın

Animasyonlar, düzgün yürütülmezlerse düzen kaymalarına neden olabilir. JavaScript animasyonları genellikle dinamik efektler için tercih edilen seçim olsa da tarayıcı ve cihazlara göre farklı tepkiler verebilmektedir. Bunun yerine, donanımla hızlandırılan ve düzen kaymalarına neden olma olasılığı daha düşük olan CSS animasyonlarını kullanmayı düşünün.

Gereksiz DOM Manipülasyonundan Kaçının

DOM manipülasyonu, bir web sayfasındaki HTML belgesinin (Document Object Model – DOM) içeriğini değiştirmek veya güncellemek için JavaScript kullanarak yapılan işlemlerdir. Bu işlemler, web sayfasında dinamik içerik oluşturmak, kullanıcı etkileşimlerini yönetmek veya web sayfasının tasarımını değiştirmek için kullanılır.

Ancak DOM manipülasyonu kötü uygulandığında, web sayfasının yükleme süresi ve kullanıcı deneyimi üzerinde olumsuz etkileri olabilir. Özellikle DOM manipülasyonu yapılırken sayfa yüklendikten sonra bileşenlerin boyutları ve pozisyonları değişebilir. Bu, kullanıcının sayfayı görüntülemesi sırasında sayfa içinde kaymalara neden olabilir. Bu hareketler, Cumulative Layout Shift (CLS) skorunu artırarak kullanıcı deneyimini olumsuz etkiler.

Bu kaymaları en aza indirmek için gereksiz DOM manipülasyonundan kaçınmak gerekir. DOM’u değiştirmeniz gerekiyorsa öğeleri yerinde tutmak için mutlak konumlandırma kullanmak gibi düzen üzerindeki etkiyi en aza indirecek önlemleri almanız önerilir.

Dinamik İçeriği Azaltın

Dinamik içeriğin eklenmesi, düşük CLS puanına katkıda bulunan faktörlerden biri olan düzen kaymalarına neden olabilir. Temel olarak dinamik içerik, web sayfalarında kullanıcı etkileşimleri veya otomatik olarak yüklenen içeriklerle oluşturulan veya değiştirilebilen içeriklerdir. Örnek olarak, bir kullanıcının bir form doldurması sonucu gösterilen sonuç sayfası veya bir web sayfasının otomatik olarak yenilenmesi sonucu değişen içerikler verilebilir.

Web sitenizde elbette bu tür içeriklere ihtiyacınız vardır. Ancak her yerde bu tür içerikleri kullanmanız anlamsızdır ve CLS skoruna olumsuz etki eder. Bu nedenle gerçekten ihtiyacınız olmadığı sürece dinamik içerik kullanmaktan kaçınmaya çalışın.

Sonuç

Google’ın arama sonuç sıralamalarını belirlerken en çok önemsediği faktörlerin başında kullanıcı deneyimi gelir. Kullanıcı deneyimi, bir kullanıcının web sayfanızla kurduğu etkileşimin kalitesi ile ilgili bir terimdir. Google, 2021 yılından itibaren Core Web Vitals verileri ile kullanıcı deneyimini ölçmek için 3 temel faktöre odaklanmaktadır. Bunların en önemlilerinden biri de Cumulative Layout Shift, yani CLS’dir.

CLS sorunları, kullanıcıların web sayfanızı doğru şekilde görüntüleyememelerine ve istemeden yanlış yerlere tıklamalarına neden olur. Bu da kullanıcı deneyimini doğrudan baltalayan bir durumdur. Nitekim Google, arama sonuç sayfası sıralamalarında bunu göz önünde bulunduracaktır. Dolayısıyla kaliteli içeriklere sahip olsanız bile düşük bir kullanıcı deneyimi vadettiği için sayfalarınız, potansiyelinden çok daha düşük sıralamalar alacaktır.

Bu nedenle CLS skorunuzu düzenli olarak takip etmeli ve çok yüksek olması durumunda durumu düzeltecek müdahalelerde bulunmalısınız. Çoğu zaman CLS sorunlarını düzeltmek için çok basit birkaç işlem yapmanız yeterlidir. Ancak bu basit işlemler, kısa süre içerisinde SERP’lerde önemli bir oranda yükselmenize yardımcı olacaktır.