Cumulative Layout Shift (CLS) Nedir? Nasıl Optimize Edilir?

Cumulative Layout Shift (CLS), Google’ın core web vitals metriklerinden bir tanesi olan ve Google tarafından herhangi bir web sayfasının yükleme, yaşam döngüsü içerisinde sayfanın görsel kararlılığının ölçümlenmesinde kullanılan metriğe verilen isimdir.

Bir web sayfasında yer alan elementlerde, sayfanın yaşam süreci boyunca gerçekleşen görünüm kaymaları core web vitals metrikleri dahilinde hesaplanır ve Cumulative Layout Shift metriği ile sunulur.

Google tarafından kullanıcı merkezli sayfa deneyiminin ölçümlenmesinde kullanılan Cumulative layout shift metriği, 2020 yılında Google Lighthouse tarafından sayfalardaki görsel kaymaların hesaplanması amacıyla duyurulmuş ve sayfa performans metriklerine dahil edilmiştir.

Cumulative layout shift metriği ile özellikle tüm kullanıcılar için negatif bir kullanıcı deneyimine neden olan herhangi bir sayfa incelemesi sırasında beklenmeyen şekilde gerçekleşen görüntü kaymaları hesaplanır. Herhangi bir yazı okurken yada sayfadaki bir linke tıklama gerçekleştirecekken ilgili elementin yukarı yada aşağı kayma yaşaması, CLS metriğini tetikler ve kayma yaşayan elementin sayfa içerisinde yaşadığı kaymanın mesafesi ve sayfadaki diğer elementlere etkisi CLS metriğinin genel skorunu oluşturur.

CLS metriğinin Kümülatif Düzen Kayması olarak adlandırılmasının temel sebebi bir sayfanın yükleme ve yaşam döngüsü boyunca sayfada gerçekleşen tüm beklenmeyen kaymaların toplanarak CLS metriğini ve skorunu oluşturmasıdır. Yani sayfanın lifespan olarak adlandırılan yaşam süresi boyunca sayfada gerçekleşen tüm kaymalar (belirli kriterler dahilinde) üst üste toplanarak CLS yani kümülatif düzen kayması skorunu oluşturur.

Cumulative Layout Shift (CLS) Neden Oluşur ?

Cumulative Layout Shift (Kümülatif Düzen Kayması), genellikle sayfalara eklenen reklam, resim vb görsel elementlerin genişlik ve uzunluk (en-boy) limitlerinin tarayıcılara belirtilmemesi ve sayfa üstü elementlerin dinamik olarak sayfaya eklenmesi gibi sebeplerle oluşmaktadır.

Cumulative Layout Shift’in En Yaygın Nedenleri Şunlardır;

• Boyut limitleri (En-Boy) belirtilmemiş görseller.
• Boyutları belirtilmemiş reklamlar, yerleştirmeler (iframe’ler)
• Sayfaya dinamik olarak eklenmiş içerikler (Sayfada yükleme esnasında dinamik olarak eklenen, çalışan elementler)
• Sayfada kullanılan web fontlarının yarattığı FOIT & FOUT Problemleri
• DOM’u güncellemeden önce ağ yanıtı bekleyen eylemler (HTTP/2 ve 3 ile büyük ölçüde azalmıştır)
• Hatalı geliştirmeler, (optimizasyon) kaynaklı CLS problemleri (Örn: Lazy Load ile yüklenen “hero” görsel)

CLS, LCP gibi core web vitals metriklerinin sitenin geliştirme ve ürün (yayın) aşamalarında özellikle farklı cihazlarda farklı sonuçlar vermesi son derece doğal bir durumdur. Genellikle geliştirme süreçlerinde local cache, hızlı internet alt yapısı ve donanımsal açıdan hızlı bilgisayarlarda (tarayıcılarda) gerçekleştirilen testlerde core web vitals (LCP, CLS FID) metrikleri, gerçek kullanıcı datalarına göre farklı sonuçlar verebilmektedir.

Özellikle sitelerin geliştirme sürecinde, ürün aşaması (sitenin canlıya alınması) öncesi localde gerçekleştirilen testlerde bağlantı ve yükleme süreleri çok daha hızlı olduğundan ürün aşamasındaki gerçek kullanıcı (kullanım) datalarına kıyasla bu aşamadaki veriler çok daha hızlı, ortalama üstü şekilde gerçekleşmektedir.

Bu noktada test gerçekleştirdiğiniz ortamda sizin cihazınıza göre farklı sonuçlar veren web sayfası gerçek kullanıcılarda beklenmeyen şekilde negatif sonuçlar verebilir. Özellikle CLS metriği internet hızı, cache, donanım hızı gibi etmenlerden direkt olarak etkilenmektedir. Bu gibi durumların önüne geçmek adına gerçekleştirdiğiniz testlerde yavaş internet hızlarını ve yavaş cihazları simüle ederek testleri gerçekleştirmeniz çok daha faydalı olacaktır.

Cumulative Layout Shift Skoru Nedir?

Cumulative layout shift (Kümülatif Görsel Düzen Kayması) skoru, sayfada gerçekleşen yaşam döngüsü (gezinme süreci) boyunca yaşanan görsel element kaymalarının kümülatif bir şekilde toplanması sonucu oluşan skora verilen isimdir.  Sayfada gerçekleşen gezinme, oturum süreci boyunca yaşanan tüm “beklenmeyen” kaymalar CLS metriğini tetikler ve yaşanan kaymaların ölçümlenen skoru toplanarak final CLS skorunu oluşturur.

CLS skorunda optimize sonuçlar elde edebilmek için sayfada yüklenen görsel elementlerin yükleme süreci içerisindeki kaymalarının engellenmesi gereklidir. Optimal bir CLS skoru için görsel elementler, ilk yüklendikleri sayfa lokasyonundan beklenmeyen şekilde kayarak yer değiştirmemelidir.

İdeal Cumulative Layout Shift (CLS) Skoru Nedir?

İdeal Cumulative Layout Shift (CLS) skoru 0.0 ile 0.10 arasındaki değerlerdir. 0.10 değerinin üstündeki skorlar (değere göre) Google tarafında başarısız, geliştirmeye açık skorlar olarak kabul edilmektedir.

Cumulative Layout Shift (CLS) Skoru Nasıl Hesaplanır ?

Bir web sayfasında belirli bir viewport (görüş alanı) için oluşan CLS skorunu hesaplamak için tarayıcı, oluşturulan iki kare arasındaki farkı inceleyerek görsel elementlerdeki kayma puanını hesaplar. Bir görsel elementin CLS skorunu tetiklemesi için yükleme süreci içerisindeki ilk frame ile ikinci frame karşılaştırılır ve bu karşılaştırmada görsel elementlerin pozisyonlarındaki değişim ölçümlenir. Karşılaştırma ile herhangi bir görsel elementin pozisyonlamasında beklemeyen bir değişiklik yaşandığı ölçümlenir ise bu durum CLS skorunu tetikler.

Temelde bir web sayfasının belirli bir viewport (görüş alanı) yada tüm sayfa için CLS skoru 2 temel metriğin ürünüdür. Bunlar;  Kayma yaşayan elementin etki oranı (impact fraction) ve kayma yaşayan elementin ne kadar kayma yaşadığıdır (distance fraction).

Layout Shift (Görsel düzen kayması) skorunun hesaplanması için gerçekleştirilen temel işlem aşağıdaki gibidir ;

layout shift score = impact fraction * distance fraction

(CLS Skoru = Etki Oranı * Kaymanın Mesafesi)

CLS için Impact Fraction Nedir ?

Etki oranı (impact fraction), stabil olmayan görsel öğelerin, iki frame (önceki görüntü karesi ve şu anki görüntü karesi) karşılaştırması arasındaki görüntü alanını (viewport) ne oranda etkilediğini ölçümleyen metriğe verilen isimdir. İki frame karşılaştırılırken hareket eden kararsız (stabil olmayan) elemanın viewportda oluşturduğu toplam etki alanı, etki oranıdır (impact fraction).

Üstte yer alan Google’ın görsel örneğinde görülebileceği şekilde ilk görsel kare ile ikinci görsel kare karşılaştırıldığında stabil olmayan metin alanının, yaşadığı kayma sonrası sayfada yarattığı toplam etki alanı, örnekteki viewport için CLS – impact fraction’ı oluşturur.

Yine üstteki görsel örnek için metin alanının sayfada kapladığı alan ilk kare için %50 ise ve ilgili alan ikinci karede %25’lik bir kayma yaşayarak aşağı yönlü yer değiştiriyor ise ise bu alanın ilgili viewport için oluşturduğu impact fraction; Metin alanının ilk karede ve ikinci karede kapladığı toplam alan = 0.50 + ikinci karede yaşadığı kaymanın sayfadaki oranı = 0.25 ile toplamda 0.75 olarak belirlenir.

Üstteki örneğin Impact Fraction hesaplaması = 0.50 (Metin alanının sayfada kapladığı alan) + 0.25 (ilgili alanın ikinci karede yaşadığı toplam kayma) = 0.75

İkinci kare içerisinde belirtilen kırmızı noktalı dikdörtgen, kayma yaşayan öğenin her iki çerçevedeki görünür alanının birleşimini göstermektedir. İlk kare ile ikinci karede kayma yaşayan metin alanının ilk karedeki pozisyonu ile ikinci karedeki pozisyonunun sayfada kapladığı toplam alanının birleşimidir yani sayfadaki toplam etki alanıdır.

CLS için Distance Fraction Nedir?

CLS skorunu oluşturan bir diğer temel metrik olan Distance Fraction (Mesafe Oranı), görüş alanına (viewport) göre kayma yaşayan öğelerin hareket ettiği mesafeyi ölçer. Mesafe oranı, kayma yaşayan herhangi bir öğenin görsel karede (yatay veya dikey olarak) hareket ettiği en büyük mesafenin, görünümün (viewport) en büyük boyutuna (genişlik veya yükseklik, hangisi daha büyükse) bölümüdür.

Google tarafından paylaşılan üstteki örnekte, en büyük görüntü alanı boyutu yüksekliktir (viewport’a göre) ve kayma yaşayan metin alanı, ikinci karede viewport (görüntü alanı) yüksekliğinin %25’i kadar aşağı yönlü hareket etmiştir. Bu durumda üstteki örnek için distance fraction (uzaklık, mesafe oranı) 0.25’dir.

Üstteki örnek için yukarıda belirlediğimiz impact fraction değeri olan 0.75 ile burada belirlediğimiz distance fraction değeri olan 0.25’i çarptığımızda ortaya çıkan 0.1875 değeri bu örnekteki mobil cihaz için web sayfasının CLS skorudur.

Bu örnek için CLS skoru = Impact Fraction 0.75 * Distance Fraction 0.25 = 0.1875

CLS için Viewport Faktörü ve Hesaplama

Sayfa içerisinde var olan ve yükleme, sayfa yaşam döngüsü içerisinde normal şartlar altında stabil olan görsel elementler (text, resim vb), sayfada daha sonra yüklenen ve sayfadaki elementlere kayma yaşatan öğeler sebebiyle yer değiştirebilir. CLS skorlarının hesaplanmasında sık karşılaşılan bu durumda sayfanın yükleme aşamasında daha sonra yüklenen öğe için belirli bir alanın ayrılması ve sayfa görsel düzeninin buna göre belirlenmesi CLS skorunun negatif olmasını engellemek için önemlidir.

Örneğin üstte Google’ın paylaştığı görselde görebileceğiniz şekilde ilk karede, mobil cihaz ekranı için viewport’un (görsel alanın) üst bölümünde kalan gri metin alanı ve altta kalan arka planı yeşil olan metin sabittir, herhangi bir şekilde görsel kayma yaşanmamaktadır. İkinci kareye baktığımızda sabit olan gri karenin hemen altına eklenen click me butonu yine sabit başka bir öğe olan arka planı yeşil metin alanını bir kısmı viewport’un dışında kalacak şekilde kaydırmaktadır.

İlk karede yüklenen DOM içerisinde click me butonu yüklenmediğinden sayfadaki metin alanları herhangi bir kayma yaşamadan ilk karede görüntülenmektedir. Ancak ikinci karede DOM içinden yüklenen click me butonu için sayfada herhangi bir yer ayrılmadığından tarayıcı, ilgili butonu sayfada oluşturduğunda alttaki metin alanı kayma yaşamakta ve bu durum CLS skorunu negatif olarak tetiklemektedir.

Bu örnek için impact fraction hesaplanırken arka planı yeşil olan metin, butondan kaynaklı olarak kayma yaşamakta ancak metin alanının kayma yaşayan bölümünün önemli bir kısmı viewport (görüş alanının) dışında kaldığından bu alanın dışında kalan bölüm impact fraction’a dahil edilmemektedir. Örnekte ilk kare için yeşil alanın viewportdaki etki alanı (kapladığı alan) %50 iken click me butonun sayfaya eklenmesi ile yeşil alan kayma yaşayarak bir bölümü viewport alanın dışında kalsa da viewport da görünen yeşil kısım ve üstteki click me butonun etki alanı birleştirildiğinde (kırmızı alan) içerisine alınmış bu bölüm, yine viewport’un %50 sine etki etmektedir. Bu sebeple bu örnek için impact fraction 0.50 olarak belirlenir.

Aynı örnek için distance fraction üstteki görselde mor ok ile gösterilmiştir. Burada click me butonundan kaynaklanan yeşil arka planlı metin alanının sayfada yaşadığı kayma viewport (görsel alanın) yaklaşık %14’üne tekabül ettiğinden bu örnek için distance fraction 0.14 olarak belirlenir.

Örnek için CLS skoru = 0.50 * 0.14 = 0.07 olarak belirlenir.

Beklenen ve Beklenmeyen Düzen (Görüntü) Kaymaları Arasındaki Fark Nedir?

Stabil olmayan öğelerin neden olduğu Kümülatif Düzen Kaymaları (CLS), yalnızca beklenmeyen düzen kaydırma olayları için geçerli olan kullanıcı merkezli bir performans metriğidir. Bir web sayfasında kullanıcı aksiyonu sonrasında oluşan, herhangi bir girdi sonrası gerçekleşen (beklenen) olaylar yada düzen kaymaları CLS metriğini tetiklemez.

Çünkü bir web sayfasında gerçekleşen tüm görsel düzen değişiklikleri kötü yada hatalı değildir, bazen web sayfası bileşenleri, kullanıcı arayüzünde planlı (beklenen) bir şekilde konumlarını değiştirebilir.

Kullanıcı Aksiyonu ile Oluşan “Beklenen” Element Kaymaları

Google, CLS skoru için beklenen ve beklenmeyen görsel düzen kaymalarını rasyonel olarak ayırt edebilmek adına ölçümlerde aksiyon sonrası olayın gerçekleşme süresi ile alakalı bir sınır belirlemiştir. Bu sınır 500 ms yani 0.5 saniyedir. Layout shift (Görsel düzen kaymasının), kullanıcı aksiyonu sonrası 0.5 saniyede oluştuğu durumda ilgili kayma “hadRecentInput” olarak etiketlenir ve CLS olarak hesaplamaya dahil edilmez. Bunun en temel nedeni CLS metriği ile beklenmeyen görsel düzen kaymalarının ve negatif kullanıcı deneyiminin belirlenmesi olduğundan kullanıcı aksiyonu sonrası 0.5 saniye içerisinde (hızlıca) gerçekleşen aksiyonlar ve kaymalar, beklenen kaymalar (değişimler) olarak CLS metriğini tetiklememektedir.

Bir kullanıcı aksiyonu sonrası 500 ms yani 0.5 saniyeden daha sonra gerçekleşen görsel düzen kaymaları beklenmeyen kayma olarak işaretlenir ve CLS puanını arttırır. Bu sebeple sayfada herhangi bir kullanıcı aksiyonu sonrası network isteği oluşturan, yüklemesi (oluşturması) 500 ms den uzun süren aksiyonlar için kullanıcıya bir yüklemenin gerçekleştiğini belirten bir uyarının sağlanması ve açılacak alan ile alakalı placeholder görevi gören bir yapının sayfa entegre edilmesi önemlidir.

Kullanıcı aksiyonu sonrası yüklenmekte olan öğe için yer tutucu görevi görecek bir placeholder alanının oluşturulması (tıklama ile birlikte) ve bu alanda kullanıcıya bir yüklemenin gerçekleşmekte olduğuna dair bilginin sunulması kullanıcının beklenmeyen bir yükleme ile karşılaşma ve olası hatalı tıklama yapma gibi negatif kullanıcı deneyimi sorunlarını ortadan kaldıracaktır.

Örneğin: Bir kullanıcı web sitesinin ana menüsünden bir alt menü öğesi açarsa, bu, kullanıcı tarafından beklenen bir görsel düzen kaydırma olduğu için Kümülatif Düzen Kaydırma (CLS) puanını artırmaz. Ancak 0.5 saniye sonrasında gerçekleşen farklı bir düzen kayması CLS metriğini tetikler ve CLS puanını arttırır.

Animasyonlar Ve Geçişler

Animasyonlar ve geçişler doğru uygulandığında sayfadaki içeriğin kullanıcıyı şaşırtmadan güncellenmesini sağlar. CLS metriğinin ana konusu olan içeriklerin beklenmeyen şekilde yer değiştirmesi ve güncellenmesi durumu, her zaman kullanıcılar için negatif bir deneyim yarattığından belirli içeriklerde bu durumun önüne geçmek adına animasyonlar ve geçişler kullanılarak sayfadaki içeriklerin pozisyonlarının son derece doğal ve yavaş şekilde güncellenmesi sağlanabilir. Animasyonlar ve geçişler ile kullanıcıların sayfada yaşanan değişimi çok daha rahat takip edebilmesi sağladığından kullanıcı deneyimine pozitif anlamda katkı sağlanır.

Animasyonlar ve geçişler ile sayfadaki görsel elementlerin başlangıç pozisyonları değişebilir ancak buradaki değişim ve geçiş süreçlerinde kullanıcı, bu tür değişiklikleri bildiği ve beklediği için bu tür animasyonlar ve geçişler kullanıcıların web sayfasını ve süreci anlamalarına yardımcı olur.

CLS metriğini tetiklemeden sayfa üstü elementleri animasyona sokmak için CSS’in transform özelliğini kullanabilirsiniz.

• Bir elementin yükseklik ve genişlik özelliklerini değiştirmek yerine CSS ile transform: scale() kullanabilirsiniz.
• Bir elementi sağa sola yukarı aşağı oynatmak için elementin yukarı aşağı sağ sol gibi css özelliklerini değiştirmek yerine transform: translate() kullanabilirsiniz.

Cumulative Layout Shift Nasıl Ölçülür ?

Cumulative layout shift skorları, Google’ın Chrome aracılığı ile topladığı gerçek kullanıcı verileri (CruX) ve açılış hızlarını simüle eden sayfa hızı testi araçları ile ölçümlenebilir. CLS skorlarının ölçümlenmesi için aşağıda yer alan araçları kullanabilirsiniz ;

Gerçek Kullanıcı Verilerini Ölçümlemek için:

• Chrome User Experience Report (CruX)
• PageSpeed Insights
• Search Console (Core Web Vitals Bölümü)
• web-vitals JavaScript library

Lab (Simülasyon) Verileri Ölçümlemek için:

• Chrome DevTools
• Lighthouse
• WebPageTest
• SpeedCurve
• Dareboost
• GTMetrix

Cumulative Layout Shift Skoru (CLS) Ölçümlemesinde Yapılan Değişiklikler

Google 2 haziran 2021 tarihinde yayınladığı makale ile uzun süredir testlerini gerçekleştirmekte olduğu CLS metriğinin en doğru ve optimal şekilde ölçümü ile alakalı yeni uygulamaya koyduğu ölçümleme değişikliklerini duyurdu. Aşağıda kaynak linki ve değişikliğin özeti yer alan makaleye göre Google, bu güncelleme ile özellikle yaşam döngüsü uzun olan (infinite scroll, single page apps vb) web sayfaları için CLS skorlarının daha sağlıklı ve doğru şekilde ölçümlenebilmesine yönelik düzenlemeler gerçekleştirdi.

Google daha önce de 7 Nisan’da yayınlandığı makale ile CLS ölçümleri gerçekleştirilirken kullanılan session window sürelerini 5 saniyeye ve layout shiftlerin GAP (boşluk sürelerini de) 1 saniye ile sınırlandırdığını duyurmuştu. Yine o dönemde Google gerçekleştirdiği bu geliştirme ile oturum süresi, yaşam döngüsü çok daha uzun olan web sayfalarında gerçekleşen düzen kaymalarını çok daha doğru ve sağlıklı şekilde ölçümlemeyi amaçladığını belirtmiştir.

7 Nisan 2021 Güncellemesi Kaynak: https://web.dev/evolving-cls/

7 Nisan sonrası son olarak 2 haziran da gerçekleşen ölçümleme değişikliği ile tüm web sayfalarında (single page apps ve infinite scroll olan web sayfaları da dahil olmak üzere) CLS skoru hesaplanırken layout shift’lerin toplamı yalnızca en kötü görsel düzen kaymasını içeren session window’un değerlerinin “kümülatif” toplanması şeklinde değiştirildi.

Yapılan bu değişiklik 2 haziran sonrası ve öncesi süreçte de Google’ın performans ve web vitals ölçüm test araçlarında da aktif hale getirildi. Bundan sonraki süreçte Lighthouse, Pagespeed Insights gibi Google’ın web performans ölçüm araçlarında da CLS metriği yapılan son değişikliğe göre hesaplanacak. Eski CLS ölçümleme yapısı da yine test etmek isteyenler için ayrıca kullanılabilir durumda, özel olarak kullanmak için aşağıda yer alan Google kaynağını ziyaret ederek detaylı bilgi alabilirsiniz.

Son yayınlanan 2 Haziran güncellemesi ile alakalı çok daha detaylı bilgi almak için aşağıda yer alan Google’ın ilgili duyuru makalesini ziyaret edebilirsiniz.

2 Haziran 2021 CLS Ölçümleme Güncellemesi Kaynak: https://web.dev/cls-web-tooling/

Cumulative Layout Shift Nasıl Optimize Edilir ?

Cumulative layout shift (CLS) skorlarının optimizasyonu için yazımızın üst bölümünde değindiğimiz CLS’in ortaya çıkmasına neden olan temel sebeplerin (sorunların) iyileştirilmesi yeterli olacaktır.

Temel Sorunlar ;

• Boyut limitleri (En-Boy) belirtilmemiş görseller.
• Boyutları belirtilmemiş reklamlar, yerleştirmeler (iframe’ler)
• Sayfaya dinamik olarak eklenmiş içerikler (Sayfada yükleme esnasında dinamik olarak eklenen, çalışan elementler)
• Sayfada kullanılan web fontlarının yarattığı FOIT & FOUT Problemleri
• DOM’u güncellemeden önce ağ yanıtı bekleyen eylemler (HTTP/2 ve 3 ile büyük ölçüde azalmıştır)
• Hatalı geliştirmeler, (optimizasyon) kaynaklı CLS problemleri (Örn: Lazy Load ile yüklenen “hero” görsel)

Boyutları Belirtilmemiş Görsellerin Height Width Özellikleri Belirtilmelidir

Tarayıcının HTML DOM içerisinde yer alan görseller için yükleme süreci içerisinde gerekli alanları ayırabilmesi ve görselin yükleme sonrası sayfadaki diğer elementleri kaydırmasını önlemek için sayfada yüklenen tüm görsellerin yükseklik (height) ve genişlik (width) stil özellikleri belirtilmelidir.

Height ve width stil özellikleri belirtilmemiş görsellerin boyutlandırması ve sayfa üstü düzenlenmesi tarayıcı tarafından otomatik olarak sayfa yüklenmesi esnasında gerçekleştirilir ve bu tarz görseller için yüklenene kadar sayfa üzerinde herhangi bir alan ayrılmaz. Bu sebeple ilk yüklendikleri anda sayfa üstünde eklenmeleri gereken alandaki bölüme yerleşerek ilgili bölümde yer alan diğer elementleri bulundukları pozisyondan kaydırırlar.

Bu sorunun çözümü için HTML içerisinde kullanılan tüm resimler için height width özellik ekleri kullanılabilir veya CSS aspect ratio (en/boy oranı) özelliği ile ilgili görseller için ön yükleme alanı ayrılması sağlanabilir.

Google tarafından paylaşılan bu örnek video’da görebileceğiniz gibi görseller için herhangi bir boy, genişlik özelliği sağlanmadığından tarayıcı yükleme esnasında resimler için gerekli alanı ayırmamaktadır. İlgili durumda yükleme süreci içerisinde geç yüklenen resimler daha sonraki karelerde önceden yüklenen metnin aşağı doğru kaymasına neden olarak CLS metriğini tetiklemektedir.

Google tarafından paylaşılan ikinci örnek olan bu video da görebileceğiniz gibi üstteki örnekte yüklenen görsellerin height ve width özellikleri belirtildiğinde tarayıcı tarafından görseller için yükleme esnasında gerekli alan ayrılmakta ve daha sonra yüklenen görseller, yüklendiğinde sayfanın görsel düzeninde herhangi bir kayma yaşanmamaktadır.

Örnek HTML Uygulaması:

<img src="dijitalzade.jpg" width="640" height="360" alt="Dijitalzade logo" />

Web geliştiricilerinin uzun zamandır kullanmakta olduğu height ve width özelliklerinin kullanımı üstteki gibi gerçekleştirildiğinde resimde gerçekleşecek bozulmaya dikkat edilmeksizin resmin sayfada ölçeklendirmesi genişlik 640 ve yükseklik 360 üzerinden gerçekleştirilecektir. Bu şekilde height ve width attributelarının kullanımı aynı zamanda açılış hızlarına da katkı sağlamaktadır; Height ve width stil özelliklerinin belirtildiği durumda tarayıcının sayfayı oluşturma süreci içerisinde reflow ve re-layout süreçlerini çok daha hızlı tamamlamasını sağlanmaktadır.

HTML ile width ve height stil özelliklerinin belirtilmesinin yanı sıra CSS kullanılarak da ilgili özellikler görseller için belirtilebilir. Özellikle responsive web tasarımın gelişmesi ile CSS üzerinden width, max-width ve height: auto; özelliklerinin kullanılarak resimlerin responsive (duyarlı) hale getirilmesi uygulanmaya başlamıştır.

Örnek:

img {

width: 100%;

height: auto;

}

CSS (stylesheet) kullanılarak verilecek height ve width attributelarının en önemli dezavantajı ilgili uygulamanın hayata geçirilebilmesi için CSS kodlarının sayfada yüklenmesi gerektiğidir. Yani CSS dosyasının network istekleri içerisinde geç yüklendiği durumda görsel en boy özellikleri belirtilmeden yüklenebilir veya görsel okunan CSS kodları sonrası yeniden düzenlenebilir. Bu durum CLS metriğini tetikleyerek, kullanıcı için negatif bir deneyim olduğu gibi sayfanın yükleme süreçlerini de yavaşlatabilmektedir.

CSS Aspect Ratio

Herhangi bir görselin, kutunun (container) en boy özelliklerinin otomatik olarak belirtilen en-boy oranına göre düzenlenmesi için kullanılan bir diğer CSS methodu da CSS Aspect Ratio olarak adlandırılan, CSS en-boy oranı uygulamasıdır.

Genellikle 1/1, 4/3 yada 16/9 şeklinde iki numaranın / ifadesi ile ayrıldığı hali ile kullanılır. CSS aspect ratio uygulamasında x/y şeklinde olan kullanım yapısı için x görselin genişliğini y ise uzunluğunu belirtmek için kullanılır.

Örneğin: 360 pixel yüksekliğinde 16:9 en-boy oranı için y:360 olarak belirtilen bir görselin genişliği, tarayıcı tarafından otomatik olarak 640 pixel olarak bulunur ve görsel buna uygun şekilde sayfada yüklenir. Yine tam tersi durumda 640 pixel genişliği olan bir resim için 16:9 aspect-ratio verildiği durumda yükseklik tarayıcı tarafından otomatik olarak 360 pixel olarak belirlenecektir.

Örnek Kullanım:

img {

width:360px;

aspect-ratio: 16/9;

}

En boy oranını belirtmek, tarayıcının resmin yükleneceği alan için yeterli alanı hesaplamasına ve ayırmasına olanak tanır.

Modern Tarayıcılar, Height & Width ve Aspect Ratio

Günümüz modern tarayıcılarında görsellerin belirtilen height ve width özellikleri (attributeları – attr) otomatik olarak tarayıcıların user-agent stylesheet’i (default CSS’i) içerisinde aspect ratio olarak kullanılmakta ve resimler belirtilen height width oranlarına göre otomatik ölçeklendirilmektedir. Bu sebeple günümüz tarayıcılarında, CLS skorunu ve görsellerin ölçeklendirmesini optimize etmek için height ve width özelliklerinin kullanılması önemlidir.

Örneğin:

<img src=”dijitalzade.png” width=”640″ height=”320″ alt=”dijitalzade SEO”>

şeklinde sayfada çağrılan bir görselin, aspect ratio’su otomatik olarak aşağıdaki gibi düzenlenecektir ;

img { aspect-ratio: attr(width - 640) / attr(height - 320); }

Responsive Görseller ile CLS Engelleme

Responsive (Duyarlı) görseller, html içerisinde srcset ve media özellikleri (attributeları) kullanılarak oluşturulan ve tarayıcıya, birden fazla görsel iletilerek resimlerin en-boy özellikleri ve farklı ekran çözünürlüklerinde hangi görselleri kullanması gerektiği ile alakalı bilgilerin aktarıldığı methoda verilen isimdir.

Responsive görsel uygulaması ile tarayıcıya, görseller, farklı ekran boyutu limitleri ve bu ekran boyutlarında kullanılacakları genişlikleri ile birlikte sunulur.  Responsive resimler kullanıldığında tarayıcı isteğin gönderildiği, sitenin görüntülendiği ekran çözünürlüğüne göre en uygun resmi seçerek sayfada kullanacaktır. Bu sayede hem tarayıcıya görsel ile alakalı ne kadar alan ayırması gerektiği bilgisi iletilir hem de sayfa için site tarafından en uygun görülen (farklı boyuttaki) görsel tarayıcı tarafından otomatik olarak seçilerek kullanılır.

Örnek Uygulama:

<img width="1000" height="500"
src="image-1000.jpg"
srcset="digi-1000.jpg 1000w,
digi-2000.jpg 2000w,
digi-3000.jpg 3000w"
alt="Resim alt açıklaması"/>

Buradaki örnekte, duyarlı (responsive) görsel uygulamasında klasik img HTML kod satırı içerisinde width ve heigth attributelarına ek olarak srcset ile 3 farklı görsel ve 3 farklı genişlik belirtilmiş durumdadır. Bu şekilde düzenlenmiş bir kod bloğunu görüntüleyen tarayıcı digi-1000jpg resminin 1000 width – genişliğe sahip olduğunu yada digi-2000.jpg resminin 2000 width (genişliğe) sahip olduğunu anlayacak ve yükleme sürecinde bu resimler için gerekli alanı ayıracaktır.

Bu uygulamada srcset içerisinde yer alan 1000w, 2000w, 3000w kullanımlarındaki w ifadesi width’i (genişliği) belirtmek için kullanılır.

Üstteki responsive image uygulaması ile 1000 pixel ekran genişliğinde tarayıcı otomatik olarak digi-1000.jpg resmini seçecek ve bu resim için sayfada 1000 pixel genişliğinde alan ayıracaktır.

Aşağıda medya özniteliğine (attribute’ına) sahip başka bir örnek verilmiştir ;

<picture>

<source media=”(max-width: 800px)” srcset=”digizade-480w-cropped.jpg” width=”480″ height”240″>

<source media=”(min-width: 801px)” srcset=”digizade-1200w.jpg” width=”1200″ height=”800″>

<img src=”digizade-800w.jpg” alt=”Digizade”>

</picture>

Bu uygulamada üstteki responsive görsel uygulamasından farklı olarak <picture> </picture> ve <source media etiketleri kullanılmıştır. Burada source media etiketlerinin kullanılmasının temel amacı tarayıcıya hangi ekran genişliği aralığında hangi görseli kullanacağının bilgisinin sağlanabilmesidir.

Örneğin: <source media="(max-width=800px)" srcset="digizade--480w-cropped.jpg">kod satırı ile tarayıcıya 0 dan maksimum 800 pixel genişliğe kadar olan tüm ekran genişliklerinde srcset= ile belirtilen görseli, belirtilen genişlik ve yükseklik ile kullan bilgisini iletmiş oluyoruz. Buradaki temel amaç özellikle kırpılmış yada ekran çözünürlüğünün altında görsellerin belirli bir ekran genişliği aralığı için kullanabilir olmasını sağlamak ve tarayıcıyı farklı ekran boyutları için yönlendirmektir.

Yine aynı örnekte diğer bir kod satırı olan <source media="(min-width: 801px)" srcset="digizade-1200w.jpg"> ile de minimum 801 pixel’e kadar olan ekran genişliklerinde (yani 800 pixel’in üstündeki tüm ekran çözünürlüklerinde) srcset ile belirtilen digizade-1200w.jpg görselini belirtilen height ve width ile kullan demiş oluyoruz.

Reklamların CLS Optimizasyonu

Web sayfalarında kullanılan reklamlar, genellikle en boy genişlikleri kullanılmaması sebebiyle sayfada çok sayıda düzen kaymasına neden olurlar ve CLS skorunu önemli ölçüde arttırırlar. CTR oranlarının arttırılması ve maksimum dikkat çekiciliğin sağlanabilmesi adına reklam verenler genellikle sayfada dinamik olarak yayınlanan reklamlar kullanırlar buda web sayfaları için pek çok negatif kullanıcı deneyimine ve yüksek CLS’e neden olabilmektedir.

Reklamlar bir web sayfasının CLS skorunu pek çok farklı nedenden dolayı arttırabilirler. Bunlar ;

• Reklam sayfada bir konteyner içerisine dinamik olarak eklenir ve yine dinamik olarak container boyutlarını değiştirirse CLS skorunu arttırabilir.
• Reklamı içeren div, container sayfaya dinamik olarak eklenirse sayfadaki elementlerin kayma yaşamasına sebebiyet verebilir.
• Reklam etiketi sistemi (Ad tag System) reklam’ı içeren container’ı sıfırladığında CLS skoru artabilir.
• Bir site, birinci taraf koduyla reklam kapsayıcısını yeniden boyutlandırdığında CLS skoru artabilir.

Reklamlardan Kaynaklanan CLS Sorunlarının Çözümü

Web sayfalarında kullanılan reklamlardan kaynaklanan CLS sorunlarının çözümü için aşağıdaki iyileştirme önerilerinin hayata geçirilmesi yeterli olacaktır. Bunlar ;

• Sayfada yüklenecek reklamlar için rezerv alanlar oluşturun. (Placeholder, slot uygulaması)
• Sticky olmayan ve gerekli rezerve alan ayrılmayan reklamları, sayfanın mümkün olduğunca üst kısmının dışında, özellikle sayfanın alt bölümlerinde kullanın.
• Reklamlar yüklenmediğinde, reklamlar için ayrılan alanın kullanıcının önünde çökmesine ve kaybolmasına izin vermeyin, bunun yerine ilgili alanı dolduracak bir placeholder uygulayabilirsiniz. Çökmeye yada kaybolmaya izin verdiğiniz durumda ilgili slotun silinmesi veya dinamik olarak daralması vb, sayfada görsel düzen kayması yaşanmasına sebebiyet verebilir.
• Sayfada kullanılacak reklamlar ile alakalı rezerve alan oluştururken, reklamların tarihsel verilerinden faydalanın ve ilgili alanda kullanacağınız tüm reklam boyutları için uygun bir rezerve alanı oluşturun. Örneğin: Sayfanın en üst bölümünde reklam kullanıyorsanız ve burada genellikle en üst seviye olarak 1500×750 bandında reklamlar kullanıyorsanız burada 1500×750 boyutlarında bir rezerv slot oluşturabilirsiniz.

Reklamlar için Statik, Rezerv Alan Oluşturmak

Sayfada yüklenen reklamlar için reklam yüklenme aşamasında iken rezerve alanlar oluşturmak reklamların daha sonra yüklendiğinde sayfada yer alan diğer öğeleri kaydırmalarının önüne geçecektir. Görsellerde de uygulanan klasik bir method olan placeholder sistemine benzer şekilde reklamın yükleneceği genişlik ve uzunluğa uygun bir rezerve alanın HTML içerisinde oluşturulması ve reklamın bu alana entegre edilmesi CLS sorunlarını çözecektir.

Reklamın genişliğine uygun ne çok büyük ne de küçük olacak şekilde bir container yapısı dizayn edilip, ilgili container gerekli stil düzenlemeleri (background-image, color vb) ile düzenlendiğinde reklam sayfa akışı içerisinde daha sonra yüklense dahi herhangi bir kayma yaşanmayacaktır.

Burada dikkat edilmesi gereken nokta reklamın genişliğinin ilgili alanda yayınlanan reklamlardan çok büyük yada küçük olmamasıdır. Küçük olduğu durumda reklam ilgili alanın dışına taşacağından CLS tekrar tetiklenecektir. Büyük olduğu durumda ise reklamdan arta kalan bölümler boşluk olarak görünecek ve negatif kullanıcı deneyimine neden olacaktır. Sitenin belirli bir bölümünde yayınlanan reklamların ekran çözünürlüklerine göre verilerini takip ederek ortalama bir alan genişliği belirleyebilirsiniz.

Google tarafından paylaşılan uygulama Örneği:

Reklamları Mümkün Olduğunca Sayfanın Üst Bölümlerine Yerleştirmeyin

CLS skorlarınızı önemli ölçüde optimize etmek için sticky (yapışkan) olmayan reklamlarınızı mümkün olduğunca sayfaların üst bölümünde kullanmayın. Gerekli rezerve slot alanı oluşturulmamış reklamlar sayfanın üst bölümünde kullanıldığında orta ve alt bölüme kıyasla çok daha fazla öğenin kaymasına sebebiyet vereceğinden CLS skorlarınızın normalden çok daha kötü sonuçlara sahip olmasına sebebiyet verecektir. Bu sorunun önüne geçmek adına stickyve rezerve alan ayrılmamış reklamlarınızı mümkün olduğunca sayfanın orta ve alt bölümlerinde kullanın.

Yerleştirilebilir İçerikler ve Iframe’lerin CLS Optimizasyonu

Yerleştirilebilir widget’lar (öğeler), sayfanıza taşınabilir web içeriği yerleştirmenize olanak tanır (örneğin, YouTube’dan videolar, Google Haritalar’dan haritalar,  Sosyal medya gönderileri vb.). Yerleştirilebilir içerikler ile bir web sayfasında yer alan içerik başka bir web sitesine yerleştirilebilir (Gömülü olarak çalıştırılabilir).

Bu yerleştirmeler çeşitli şekillerde olabilir. Bunlar ;

• Iframe Yerleştirme
• Belirli bir HTML Div’in (container’ın) yerleştirilmesi
• HTML’i değiştiren spesifik bir javascript etiketinin yerleştirilmesi
• Satır içi HTML snippet’i

Yerleştirilebilir (Gömülebilir) öğelerin kullanıldığı web sayfalarının CLS skorları beklenmeyen şekilde artabilir. Çünkü sayfalarda yerleştirilebilir, gömülü şekilde kullanılan içeriklerin div, container (içerik) genişlikleri bilinmediğinden bu tarz gömülü içeriklerin sayfada ne kadar yer kaplacağı tarayıcı tarafından önceden tahmin edilemez bu sebeple bu tarz içerikler için sayfada stabil bir alan ayrılamayabilir. Bu durumda sayfada olması gerekenden fazla alan kaplayan gömülü içerikler yükleme aşamasında sayfada yer alan diğer öğeleri kaydırarak CLS metriğini tetikleyebilirler.

Yerleştirilebilir İçerikler ve Iframe’lerden Kaynaklanan CLS Sorunları Nasıl Çözülür ?

Iframe, yerleştirilmiş içeriğin CLS oluşturmaması için ilgili içeriğin boyutunun önceden bilinmesi ve web sayfasında ilgili alanın önceden ayrılması gereklidir. Yüklenecek iframe içerik için sayfada önceden gerekli alanın oluşturulabilmesi için yüklenecek iframe öğenin nihai yükseklik ve genişliği belirlenmelidir.

Bu noktada yüklenecek iframe içeriğinin yükseklik ve genişliğini belirlemek için chrome devtools vb geliştirici araçlarını kullanabilirsiniz.

Aynı üst bölümde değindiğimiz reklamların CLS sorunun engellenebilmesinde olduğu gibi iframe, yerleştirilebilir içeriklerde de nihai genişlik ve yükseklik belirlendikten sonra gereken alan HTML içerisinde (container’da) oluşturulmalı ve iframe yüklenene kadar ilgili alanda fallback (yedek içerik), placeholder kullanılmalıdır. Placeholder ve rezerve alan uygulaması ile iframe içeriği yüklenene kadar sayfada gerekli alan oluşturulacak ve iframe içeriği yüklendiğinde kullanıcı herhangi bir görsel düzen kayması ile karşılaşmadan içeriği görüntüleyebilecektir.

Google tarafından paylaşılan örnek uygulama:

Sayfada Dinamik İçerik Kullanımı ve CLS Optimizasyonu

Dinamik içerik yüklemesi kaynaklı CLS sorunlarını engellemek için ; Bir kullanıcı aksiyonu olmadıkça, mevcut içeriğin üzerine yeni, dinamik içerik eklemekten kaçının. Herhangi bir kullanıcı aksiyonu sonrası sayfanıza eklenen dinamik içerik, kullanıcı tarafından beklenen, bilinen bir içerik olacağından yazımızın üst bölümünde değindiğimiz gibi CLS metriğini tetiklemeyecektir.

Dinamik içerik eklenmesi kaynaklı CLS sorunları genellikle aşağıda belirtilen sayfa üstü elementlerden kaynaklanmaktadır.

• “Email listemize kayıt olun uyarıları yapan pop-up’lar”
• “Alakalı içeriklerimize göz atın uyarısı yapan pop-up’lar”
• “Android veya IOS uygulamamızı indirin uyarısı veren pop-up’lar”
• “Çerez, bildirim uyarıları”
• “Size özel teklifler, indirimler pop-up’ları” (Genellikle e-ticaret)
• “Şimdi Üye olun, Kupon Kodu vb pop-up’lar”

Google tarafından paylaşılan, gerekli rezerve alan ayrılmamış dinamik içerik örneği:

Sitenizde üstte örneğini verdiğimiz tarzda (dinamik) içerikler paylaşmayı düşünüyorsanız, ADS ve iframe içeriklerde konuştuğumuz gibi bu tarz içeriklerinize özel HTML içerisinde rezerve alan oluşturmalı ve tarayıcıyı yükleyeceğiniz dinamik içeriğin yükseklik ve genişliği ile alakalı bilgilendirmelisiniz. Sayfada belirli bir süre sonra yüklenecek dinamik içerik için önceden yer ayırmak ve içeriğin yüksekliği ve genişliği ile alakalı tarayıcıyı bilgilendirmek, beklenmeyen düzen kaymalarını engelleyecek ve sayfada daha sonra yüklenen dinamik içeriğin kullanıcı da negatif bir deneyim yaşatmasının önüne geçecektir.

Web Fontlarının FOIT & FOUT Problemleri ve CLS Optimizasyonu

Web fontlarının yükleme ve oluşturma süreçlerinde CLS iki şekilde ortaya çıkar ;

• Sayfada kullanılan asıl font dosyası yüklenene kadar fallback (geçici, yedek) olarak çağrılan font dosyasının yüklenen dosya ile değişiminde ortaya çıkan kayma (FOUT – Flash of Unstyled Text)
• Sayfada kullanılacak olan asıl font dosyası yüklenene kadar yedek bir font kullanılmaz ise asıl font’un kullanıldığı alanlar görünmez olur. Devamında yüklenen asıl font dosyası ile görünmeyen alanlar yükleneceğinden sayfada düzen kayması yaşanır ve CLS tetiklenir. (FOIT – Flash of Invisible Text)

Bu sorunların önüne geçmek için CSS’in font-display özelliğini ve swap, auto, optional gibi CSS değerlerini kullanabilirsiniz.

Flash of Invisible Text Sorununun Çözümü

Sayfanın yükleme aşamasında asıl font dosyası yüklenene kadar geçici bir yedek (fallback) font dosyası çağrılmadığında font dosyasının kullanıldığı alanlar kullanıcı için görünmez olur. Bu sorunun önüne geçmek için font’un çağrıldığı CSS dosyası içerisinde font-display: kısmına swap; eklemesi yapabilirsiniz.

Kullanım: Font-display: swap;

Flash of Unstyled Text Sorunun Çözümü

Fout (Flash of Unstyled Text) sorunu, sayfada kullanılan asıl font dosyasının yükleme sürecindeki yedeği olarak kullanılan (swap) font dosyasının, orijinal font dosyası ile değiştiği durumda sayfada yaşanan ani görüntü değişimi, görsel düzen kaymasına verilen isimdir. Fallback (yedek) olarak çağrılan font dosyası ile asıl font dosyası arasında yapısal olarak farklar mevcut ise ilgili durum sayfada düzen kaymasına ve CLS metriğinin tetiklenmesine sebebiyet verebilir.

Bu sorunun çözümü için aşağıdaki uygulamaların hayata geçirilmesi faydalı olacaktır ;

• Sayfada geç olarak olarak yüklenen asıl font dosyası ile yapısal olarak mümkün olduğunca eşleşen, benzeyen uygun bir sistem fallback fontu seçin.
• Yedek font dosyasının stillerini (yazı tipi boyutu, satır yüksekliği, harf aralığı vb.), sayfada eşzamansız yada geç olarak yüklenen olarak yüklenen font dosyasının özelliklerine mümkün olduğunca benzeyecek şekilde yeniden ayarlayın.

FOIT VE FOUT problemleri için ayrı ayrı olarak üstte belirttiğimiz işlemleri hayata geçirebilirsiniz ancak her iki sorun içinde <link rel=”preload” methodu ile kritik font dosyasını preload olarak çağırmak en optimal methodlardan bir tanesidir. Swap da kullanılan fallback dosyası ile ana dosya arasında yaşanan yapısal (dizayn) uyumsuzlukları kaynaklı oluşan kaymalarda (tüm fontlarda kullanmamak ile birlikte) kritik fontlar için preload uygulaması yapılarak kritik fontların sayfa yüklemesinde öncelikli yüklenmesi sağlanabilir.

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2"

Bu örnekte görebileceğiniz şekilde link rel=”preload” uygulaması ile internal (site içi) yada external (harici) olarak barındırılan font dosyalarını öncelikli kaynak olarak sayfada (site genelinde) çağrılabilirsiniz. Bu sayede font dosyalarının site içinde mümkün olduğunca erken yüklenmeleri sağlanacak ve olası FOIT & FOUT kaynaklı CLS sorunlarının önüne geçilecektir.

Kritik font dosyalarına gerçekleştirilecek Link rel=”preload” uygulamasına ek olarak fontların çağrıldığı alanda (font-face) yapılacak font-display:optional; eklemesi ile fontun gerçekten (yalnızca) öncelikli yüklendiği durumda fallback font ile ana fontun değişimi sağlanabilir. Optional uygulaması ile kritik fontun yalnızca hızlı yüklendiği senaryoda gerçekleşecek bir font değişimi ile FOUT kaynaklı CLS sorununun tetiklenmesinin önüne geçilebilir.