Cumulative Layout Shift (CLS) Nedir?

12/12/2020

Cumulative Layout Shift (CLS) Nedir?

Cumulative Layout Shift terimini önümüzdeki günlerde sıkça duymaya başlayacağınızı belirterek bu içeriğimi sizler ile paylaşmak istiyorum... Cumulative Layout Shift Google'ın arama sonuçlarında değer verdiği ve önümüzdeki aylarda uygulamaya daha çok katkıda sucanacığı bir ölçümleme unsuru. Google'ın bu ölçümlemedeki amacının tamamen ziyaretçi memnuniyetini sağlamak olduğunu ilk satırlarlarımda belirtmek isterim. Kısaca web sitenize ziyaretçinin ilk tıklama yapıldığı an ile web sitenizin tamamen yüklenmesinin bittiği anı ölçen terim CLS ya da Cumulative Layout Shift olarak adlandırılır. Yani Google üzerinde bir arama yaptığınızda çıkan sonuçlar içerisinde birine tıkladığınız an ile tıklama yaptığınız web site sayfasının yüklenmesi arasındaki süreyi hesaplayan değer CLS yani Cumulative Layout Shift'dir.

Google'ın arama sonuçlarında önümüzdeki dönemde daha da önem vereceği, belki de sıralama algoritmasını kökten etkileyecek ve çok hassas olduğu bir konuyu bu yazımda sizler için değerlendireceğim. Cumulative Layout Shift... Bir web sitesine ziyaretçi girdiği andan itibaren ilgili sayfanın yüklenmeye başladığı an ile yüklemesinin bittiği an sırasındaki kaymaları - düzen bozulmalarını ölçen bir algoritmadır. Yani ilgili sayfa yüklenmeye başladıktan sonra diğerlerine göre daha geç yüklenen elemanların ilgili sayfanın düzenini bozup bozmadığını - içeriği okumayı zorlaştıran kaymalar yapıp yapmadığını ölçen hassas bir sistem olarak da açıklayabiliriz.

Örneğin bir web sitesine giriş yaptık, başlık ve içerik alanı saliseler içerisinde ekranda belirdi... Fakat başlık ve içerik arasında bir resim olduğunu düşünelim ve ziyaretçinin resim henüz yüklenmeden içeriği okumaya başladığını varsayalım. Resim yüklemesini tamamladığı anda ilgili içerik aşağı doğru kayacak ve kullanıcı deneyimi için olumsuz bir durum oluşacaktır. Kullanıcı içeriği gözden kaçıracak, yeniden bulmak için sayfayı kaydırma arayışına geçecektir. (Bu aşama ister istemez kötü bir kullanıcı deneyimine yol açmaktadır.) Bu olumsuz durumun gerçekleşmesinin sebebi ilgili görsele en ve boy ölçüsü verilmemesinden kaynaklanmaktadır. Eğer ilgili görselde doğru boyutlar tanımlı olsa idi ilgili alan resim yüklenene kadar resim boyutu kadar açık kalacak ve düzen kayması olmayacaktı. Cumulative Layout Shift için şimdilik en basit örneği bu şekilde verebiliriz.

Web sitenizin Cumulative Layout Shift değerini PageSpeed Insights aracı ya da Chrome'un Geliştirici Araçları bölümünden ölçebilirsiniz.

Bu araçlar ile CLS ölçümü yaptığınızda web sitenizin CLS skoru 0.1'in altında ise harika bir skora sahipsiniz demektir. Eğer bu skor 0.1 ile 0.25 arasında ise biraz geliştirme ile küçük CLS sorunlarınızın üstesinden gelebilirsiniz demektir. Ancak skorunuz 0.25'in üzerinde ise ciddi bir çalışma yaparak web sitenizin CLS skorunu yükseltmeniz gereklidir. CLS web sitenizin görüntüsel sabitliğini ölçer. Bu sabitlik kullanıcı deneyimi yani ziyaretçi memnuniyeti için oldukça önemlidir. Bu bahsettiğim değerler SEO açısından da altın ölçütler olduğu için web sitenizin CLS skorunu 0.1'in altına indirmelisiniz. CLS değeriniz sıfıra ne kadar yakın ise sitenizin SEO performansı için o kadar iyi olacaktır. Bana göre CLS çalışmalarına başladıysanız bu skoru tam olarak sıfır yapana kadar çalışmalara devam etmeniz en doğrusu olacaktır.

Cumulative Layout Shift (CLS) Nedir?

CLS Skorunu Kötü Etkileyen Örnek:

Başlık

Örnek içerik alanı...

(Sayfa yüklenirken)
Başlık

Örnek içerik alanı...


(Resim yüklendi)

Gördüğünüz gibi sayfa ilk yükleme esnasında içerik alanı belirdi ve kullanıcı görüntüledi, fakat içerik içerisindeki resim yüklemesini tamamladığında içerik alanı aşağı doğru kaydı... İşte bu olumsuz bir CLS skoru olarak hanemize yazılır. Bu sorunun önüne geçmek için web sitemizde kullandığımız tüm görseller ve videolar için width ve height ölçülerini tanımlamamız gerekli...

Doğru Kullanım Sonucu

Başlık
Görsel yüklenirken

Örnek içerik alanı...

(Sayfa yüklenirken)
Başlık
Görsel yüklendikten sonra

Örnek içerik alanı...

(Resim yüklendi)

En ve yükseklik verdiğimiz görsel düzen kaymasına yol açmaz. Düzen kaymalarını sıfıra indirdiğimiz sürece web sitemiz ziyaretçilerini daha çok etkileyecek, onlara yarar sağlayacak ve bu bize artı SEO skoru olarak geri dönecektir.

Cumulative Layout Shift (CLS) Nedir?

Benzer bir örneği başlık + reklam + bir kayıt tuşu içeren örnekten inceleyelim. Bir fuara ait web sitesine girdik ve hemen rezervasyon yap başlığı altında bir tuş ile karşılaştık. Tam bu tuşa basmak isterken başlık ile tuş arasında bulunan reklam görseli açıldı ve tuşun ilk gördüğümüz alandaki yerine ilgili reklam geldi. İlgili alana basmış bulunduğumuz için reklama ait urlyi hiç istemeden ziyaret etmiş olduk... İşte buyrun size kötü bir kullanıcı deneyimi örneği. Burada yapılması gereken ilgili reklam görseline en ve boy ölçüsü vererek yerinin sabitlenmesi idi.

Responsive Bir Tasarımda Görsellere Yükseklik Tanımlamak

Mobil uyumlu bir web sitesinde görsellere sadece 100% genişliği vermek standart görünüm için yeterlidir. Ancak CLS başarısı için görsellere bir yükseklik değeri de vermemiz gerekli. Peki şimdi diyeceksiniz ki enine 100% verdiğimiz bir görsele nasıl piksel cinsinden yükseklik tanımlayabiliriz? Bu sizin tasarım ve çalışma tarzınıza bağlı değişkenlik gösterebilir. Örneğin bir resim için en ölçüsünü yüzde vermek yerine piksel cinsi ile verebilir yine bu piksele uygun gelen karşılığını yükseklik alanına tanımlayabilirsiniz. Bu görsel için maks-width değeri olarak 100% tanımlar iseniz mobil uyum kriterinde ekran taşmalarının önüne geçmiş olur ve yine responsive tasarıma uygun görsel yerleştirimi yapmış olursunuz. Burada taktik ve uygulama size kalmış :) Lakin görseller bir site için en geç yüklenen öğeler oldukları için sayfa yüklenmeden öncesinde de yerlerinin boyutları ile birlikte belirgin halde açılması sağlanmalıdır. CLS için temel kıstas öğelerin yerlerinin yüklenme bitmeden önce de belirli olması ve yükleme bitişinde kayma yapmamasıdır.

Font Tipleri de CLS üzerinde Etkilidir

Modern olarak adlandırılan yani kullanıcı bilgisayarında bulunmayan fontları harici bir siteden yükleme yaparak göstermeyi sağlayan kullanımlarda ilgili font yüklemesi zaman alacağı için yazıların, başlıkların ya da paragrafların görüntülenmesi zaman alabilecektir. Bu da görsellerdeki örneğe benzer şekilde düşük CLS skoru ile karşılaşmanızı sağlayabilir. Bu yüzden harici yüklettiğiniz fontlar için örneğin Google Fontları, swap özelliğini kullanarak ilgili font tipi yüklenene kadar yazıların ön tanımlı font ile görüntülenmesini sağlayabilir ve buna bağlı düzen kaymasının önüne geçebilirsiniz. Benim önerim sadece CLS için değil web sitenizin genel hızı için klasik ya da güvenli - web safe - olarak adlandırılan fontları kullanmanız. bu fontları saydığım zaman keyfiniz kaçabilir ama bu fontları kullanmanız web sitenizin hızı ve CLS gibi skorları için oldukça iyidir. Arial, Tahoma, Verdana, Times gibi font tipleri hemen her bilgisayar ve mobil cihazda yüklü oldukları için harici bir yükleme gerektirmeden hızlı bir şekilde görüntülenirler. Bu yüzden web sitenizde bu fontları tercih etmeniz kullanıcı deneyimi için harika sonuçlar ortaya çıkarabilir.

Cumulative Layout Shift (CLS) Formülü Nedir? Nasıl Hesaplanır?

Google bu formülü kendi resmi sitesinde şöyle vermiş:
layout shift score = impact fraction * distance fraction
Kayma Etkisi (Impact Fractation) * Kayma Mesafesi (Distance Fraction)

Kayma etkisi bir web sitesi yüklenmeden önceki öğelerin yerleri ile yükleme tamamlandıktan sonraki yerlerin karşılaştırılması olarak belirtilebilir. Kayma mesafesi de ilgili öğenin ilk yükleme başlangıcındaki yeri ile yükleme bittikten sonraki yeri arasındaki mesafeyi ölçer. Bu iki kavramın çarpımı sonucunda da CLS skoru ortaya çıkar.

Web Site Hızı da CLS'yi Dolaylı Olarak Etkiler

Web sitenizin açılma hızı, güçlü bir sunucu kullanması gibi etkenler de CLS skorunuzu etkileyecektir. Yavaş yüklenen sitelerde ister istemez düzen kaymaları oluşacak ve kullanıcı tarafından hissedilebilecektir. Bu yüzden web sitesi yayınlarken üst düzey bir hosting firmasından hizmet almanızı öneririm. Ek olarak web sitenizdeki görsellerin boyutları, animasyon kullanımı çokça javascript kullanımı da CLS skorunuz için olumsuz sonuçlar ortaya çıkarabilir.

Günümüzde bir web sitesinin amacının kullanıcılarını memnun etme olduğunu aklınızdan çıkarmayın. Dolayı ile gereksiz animasyon, görsel vb gibi öğelerin web sitenizi yavaşlatacağını ve kullanıcı deneyimi için olumsuz sonuçlar doğuracağını unutmayın. Web sitenizi kullanıcılarınızı memnun etmek, onlara fayda sağlamak adına tasarlayın. İşte CLS kavramı da bu özetin Google tarafından hayatımıza sokulmuş kavramlarından bir tanesi. Sonraki yazılarımda bu konuda diğer etkisi olan Largest Contentful Paint - First Contentful Paint gibi kavramları da sizler ile paylaşacağım.

CLS konusunda profesyonel destek isterseniz bana ulaşabilirsiniz.

Yorumlar
10/Mayıs/2021 (20:32:57) tarihinde Ekim yazdı:
Merhaba, öncelikle detaylı ve temiz anlatımınız için teşekkür ederim. İnternette çokça yabancı kaynak vardı ancak Türkçe olarak ilk defa bu kadar güzel bir içerik gördüm, elinize sağlık.
Cevaplar
11/Mayıs/2021 (12:45:44) tarihinde Mert Şener yazdı:
Merhaba, içeriğin işinize yaramasına ve size bilgi vermesine çok sevindim. İyi günler dilerim :)
Bu yoruma cevap yaz
22/Mart/2021 (23:35:38) tarihinde Yılmaz yazdı:
Bu konu önemli bir konuya benziyor, hata alınca araştırmaya başladım fakat düzgün bir şey bulamadım, en iyi anlatım şu ana kadar gördüklerim arasında sizinki olmuş, lakin kod bilgim olmadığı için çözemeyeceğim. Temayı yapana CLS sıkıntısı var diyorum CLS nedir o da araştırıyor bakalım. Buranın linkini atayım faydası olur diye düşünüyorum :)
Cevaplar
26/Mart/2021 (23:57:52) tarihinde Mert Şener yazdı:
Yüksek boyutlu resimleri optimize edin, ölçülerini verip kaydettikten sonra Tinypng.com sitesi üzerinden resmin boyutlarını düşürün ve sitenize bu son hali ile yükleyin. Google font gibi dışardan yükleme yapan fontlar yerine klasik arial, tahoma gibi fontları tercih edin. Ne kadar az javascript veya dışardan çekmeli kod kullanırsanız o kadar iyidir. Umarım istediğiniz sonuca ulaşırsınız.
Bu yoruma cevap yaz
26/Ocak/2021 (20:13:47) tarihinde Umut can yazdı:
s.a hocam guzel anlatmissiniz tebrik ederim 0,25 oraninda kayma var https://www.kesintisizradyo.com sitesinde neler yapmami onerirsiniz.
Cevaplar
27/Mart/2021 (00:00:19) tarihinde Mert Şener yazdı:
Merhaba, Kullanılmayan veya elzem olmayan tüm javascript dosya kaynaklarını kaldırın. Font tipi olarak arial, tahoma gibi her bilgisayarda yüklü fontları tercih edin. Css ve kullandığınız scriptleri sıkıştırarak tekrar yükleyin. Bu söylediklerim bir miktar fayda sağlayacaktır.
Bu yoruma cevap yaz
03/Ocak/2021 (21:00:19) tarihinde Tuncay yazdı:
Hiçbir türlü verilerde sitemi istenilen puanlara getiremedim. sayfamda 5 tane banner, altında 10 haber ve görseli onun altında da blog yazılarımın ve görsellerinin yer aldığı alan var ama bir türlü istenilen puanları sağlayamıyorum. Sitemde google fontu kullanıyorum, banner ve bazı efektler için javascriptler var, görsellerim de olabildiğince düşük boyutlarda, toplam sayfa boyutu 1mb civarında. Resimleri kaldırsam bu sefer sitem etkisiz görünecek, acaba nerede yanlış yapıyorum ya da önerileriniz nelerdir?
Cevaplar
06/Ocak/2021 (23:17:17) tarihinde Mert Şener yazdı:
Öncelikle ana sayfanızda 5 banner görseli, 10 haber görseli ve yine bunlara yaklaşık sayıda bir blog görseliniz olduğunu anlıyorum... Öncelikle bu görselleri tinypng.com sitesi üzerinden sıkıştırıp tekrar yüklemeyi deneyin. %20-30 arasında boyutlarının küçüleceğini düşünüyorum. Ek olarak banner sayınızı 3 ya da 4e - haber sayınızı 6ya düşürebilirsiniz. Aynı işlemi blog bölümünüze de uygulayabilirsiniz. Sitenizdeki resimlere en ve boy ölçüsü vererek düzen kaymalarına da engel olabilirsiniz. Yazı fontu olarak arial - tahoma gibi klasik bir font tercih etmeniz sitenizin PageSpeed testinden daha yüksek skorlar almasını sağlayacaktır. Son olarak sitenizde bulunan javascriptleri ve css satırlarını tekrar kontrol etmenizi ve kullanılmayan olanları kaldırmanızı öneririm.
Bu yoruma cevap yaz
01/Ocak/2021 (01:47:17) tarihinde Serdar yazdı:
bu skorlara uygun olan 3-4 site örnek vermenizi rica etsek?
Cevaplar
06/Ocak/2021 (22:56:49) tarihinde Mert Şener yazdı:
https://developers.google.com/speed/pagespeed/insights/ linkinden bu siteyi sorgulatabilirsiniz :)
Bu yoruma cevap yaz
25/Aralık/2020 (00:21:24) tarihinde Selin yazdı:
güzel anlatım olmuş, elinize sağlık.
Bu yoruma cevap yaz
20/Aralık/2020 (20:59:22) tarihinde Musa Demir yazdı:
Güzel ve kolay anlaşılır bir yazı. Teşekkür ederiz.
Bu yoruma cevap yaz
Yorum Yazın
Yorumunuz
Eposta (Yayınlanmayacaktır)
İsim
Web Sitesi

Konuyla alakalı ilginizi çekebilicek içerikler:

Google Ads Eğitimi 19 gün önce

Desteğe mi ihtiyacınız Var?

Eticaret ve SEO konularında profesyonel hizmeti bizden alabilirsiniz.

Mert Şener Kimdir?

Eticaret ve SEO alanında 16 yıllık bir tecrübe ile yüzlerce firmaya hizmet vermiş, profesyonel bir geliştiricidir...