Kümülatif Düzen Kaymasını (CLS) Anlamak ve Optimize Etmek

 

Toplamsal Düzen Kayması (CLS), Google'ın Temel Web Vitals Kullanıcı deneyimi olayını ölçen metrik.

CLS, 2021 yılında bir sıralama faktörü haline geldi ve bu, onun ne olduğunu ve nasıl optimize edileceğini anlamanın önemli olduğu anlamına geliyor.

Birikimli Düzen Kayması Nedir?

CLS, bir kullanıcı sayfada gezinirken veya etkileşimde bulunurken web sayfası öğelerinin beklenmedik şekilde kaymasıdır

Değişime neden olma eğiliminde olan öğeler yazı tipleri, resimler, videolar, iletişim formları, düğmeler ve diğer içerik türleridir.

CLS'yi en aza indirmek önemlidir çünkü sayfalar arasında geçiş yapmak kötü bir kullanıcı deneyimine neden olabilir.

Düşük bir CLS puanı (> 0,1'in altında), çözülebilecek kodlama sorunlarının göstergesidir.

CLS Sorunlarına Ne Sebep Olur?

Toplu Düzen Kayması'nın meydana gelmesinin dört nedeni vardır:

• Boyutları olmayan görseller.
• Boyutları olmayan reklamlar, yerleştirmeler ve iframe'ler.
• Dinamik olarak enjekte edilen içerik.
• FOIT/FOUT'a neden olan Web Yazı Tipleri.
• CSS veya JavaScript animasyonları.

Görüntüler ve videolar HTML'de belirtilen yükseklik ve genişlik boyutlarına sahip olmalıdır. Duyarlı görüntüler için, farklı görünüm alanları için farklı görüntü boyutlarının aynı en boy oranını kullandığından emin olun.

CLS'ye nasıl katkıda bulunduklarını anlamak için bu faktörlerin her birini inceleyelim.

Boyutsuz Görüntüler

Tarayıcılar, görüntüleri indirene kadar görüntünün boyutlarını belirleyemez. Sonuç olarak, bir<img>HTML etiketi, tarayıcı resim için alan ayıramaz. Aşağıdaki örnek video bunu göstermektedir.

Resim indirildikten sonra tarayıcının düzeni yeniden hesaplaması ve resmin sığması için alan ayırması gerekir; bu da sayfadaki diğer öğelerin kaymasına neden olur.

etiketinde genişlik ve yükseklik niteliklerini sağlayarak tarayıcıya görüntünün en boy oranını bildirirsiniz. Bu, tarayıcının görüntü tamamen indirilmeden önce düzende doğru miktarda alan ayırmasını sağlar ve beklenmeyen düzen kaymalarını önler.

Reklamlar CLS'ye Neden Olabilir

İçerikte veya makalelerin en üstünde AdSense reklamlarını uygun stil ve ayarlar olmadan yüklerseniz düzen değişebilir.

Bununla başa çıkmak biraz zordur çünkü reklam boyutları farklı olabilir. Örneğin, 970×250 veya 970×90 reklam olabilir ve 970×90 alan ayırırsanız, 970×250 reklam yükleyebilir ve kaymaya neden olabilir.

Öte yandan, 970x250 boyutunda bir reklam ayırırsanız ve bu reklam 970x90 boyutunda bir banner yüklerse, reklamın etrafında çok fazla beyaz alan olacak ve bu da sayfanın kötü görünmesine neden olacaktır.

Bu bir tercihtir; ya aynı boyutta reklamlar yükleyip artan envanter ve daha yüksek CPM'lerden faydalanmalısınız ya da kullanıcı deneyimi veya CLS metriği pahasına farklı boyutlarda reklamlar yüklemelisiniz.

Dinamik Olarak Enjekte Edilen İçerik

Bu, web sayfasına enjekte edilen içeriktir.

Örneğin, bir makalenin içeriğine yüklenen X'teki (eski adıyla Twitter) gönderiler, gönderi içeriğinin uzunluğuna bağlı olarak keyfi bir yüksekliğe sahip olabilir ve bu da düzenin değişmesine neden olabilir.

Elbette, bunlar genellikle sayfanın alt kısmında yer alır ve ilk sayfa yüklemesini hesaba katmaz, ancak kullanıcı X yazısının yerleştirildiği noktaya ulaşmak için yeterince hızlı kaydırırsa ve yazı henüz yüklenmemişse, bu bir düzen kaymasına neden olur ve CLS metriğinize katkıda bulunur.

Bu değişimi hafifletmenin bir yolu, tweet ebeveyn div etiketine ortalama min-height CSS özelliğini vermektir, çünkü tweet gönderisinin yüksekliğini yüklenmeden önce bilmek imkansızdır, bu nedenle önceden alan ayırabiliriz.

Bunu düzeltmenin bir başka yolu da tweet'i içeren üst div etiketine yüksekliği düzeltmek için bir CSS kuralı uygulamaktır.

#tweet-div {
max-height: 300px;
overflow: auto;
}

Ancak bu, kaydırma çubuğunun görünmesine neden olacak ve kullanıcıların tweeti görüntülemek için kaydırma yapması gerekecek; bu da kullanıcı deneyimi açısından en iyi seçenek olmayabilir.

Eğer önerilen yöntemlerden hiçbiri işe yaramazsa, tweetin ekran görüntüsünü alıp ona bağlantı verebilirsiniz.

Web Tabanlı Yazı Tipleri

İndirilen web yazı tipleri, Görünmez metin parlaması (FOIT) olarak bilinen duruma neden olabilir.

Bunu engellemenin bir yolu önceden yüklenmiş yazı tiplerini kullanmaktır

<link rel="preload" href="https://www.example.com/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

ve font-display: swap; css özelliğini kullanarak @font-face kural-altında.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
   font-display: swap;
   src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
}

Bu kurallarla, web fontlarını mümkün olduğunca hızlı bir şekilde yüklüyorsunuz ve tarayıcıya web fontlarını yükleyene kadar sistem fontunu kullanmasını söylüyorsunuz. Tarayıcı fontları yüklemeyi bitirir bitirmez, sistem fontlarını yüklenen web fontlarıyla değiştirir.

Ancak, sistem dışı yazı tiplerini kullanırken kaçınılmaz olan Flash of Unstyled Text (FOUT) adı verilen bir efektle yine karşılaşabilirsiniz; çünkü web yazı tiplerinin yüklenmesi biraz zaman alır ve bu süre zarfında sistem yazı tipleri görüntülenir.

Aşağıdaki videoda, kaydırma yapılarak başlık yazı tipinin nasıl değiştirildiğini görebilirsiniz.

Önerilen font yükleme mekanizması uygulandığında FOUT'un görünürlüğü kullanıcının bağlantı hızına bağlıdır.

Kullanıcının bağlantısı yeterince hızlıysa, web yazı tipleri yeterince hızlı yüklenebilir ve fark edilebilir FOUT etkisi ortadan kalkabilir.

Bu nedenle, mümkün olduğunca sistem yazı tiplerini kullanmak harika bir yaklaşımdır; ancak marka stil yönergeleri veya özel tasarım gereksinimleri nedeniyle bu her zaman mümkün olmayabilir.

CSS veya JavaScript Animasyonları

Örneğin, HTML öğelerinin yüksekliğini CSS veya JS ile hareketlendirdiğinizde, öğe dikey olarak genişler ve içeriği aşağı iterek küçülür, bu da düzende kaymaya neden olur.

Bunu önlemek için, canlandırılan öğe için alan ayırarak CSS dönüşümlerini kullanın. Solda bir kaymaya neden olan CSS animasyonu ile CSS kullanan aynı animasyon arasındaki farkı görebilirsiniz.

CLS'ye neden olan CSS animasyon örneği

Toplam Düzen Kayması Nasıl Hesaplanır

Bu, “Etkileme Oranı” ve “Mesafe Oranı” adı verilen iki metriğin/olayın ürünüdür.

CLS = ( Impact Fraction)×( Distance Fraction)

Etki Kesri

Çarpma oranı, dengesiz bir elemanın görüş alanında ne kadar yer kapladığını ölçer.

Görüntü alanı, mobil ekranda gördüğünüz şeydir.

Bir öğe indirilip kaydırıldığında, öğenin ilk kez görüntülendiğinde görünüm alanında kapladığı yerden sayfanın görüntülendiği son konuma kadar kapladığı toplam alan.

Google'ın kullandığı örnek, görüntüleme alanının %50'sini kaplayan ve ardından %25 oranında aşağı inen bir öğedir.

Toplamda %75 değerine Etki Oranı adı verilir ve 0,75'lik bir puan olarak ifade edilir.

Mesafe Kesri

İkinci ölçüm Mesafe Kesri olarak adlandırılır. Mesafe kesri, sayfa öğesinin orijinalden son konuma hareket ettiği alan miktarıdır.

Yukarıdaki örnekte sayfa öğesi %25 hareket etti.

Şimdi Toplam Düzen Puanı, Etki Oranı ile Mesafe Oranı çarpılarak hesaplanır:

0,75 x 0,25 = 0,1875

Hesaplama biraz daha matematik ve diğer değerlendirmeleri içerir. Buradan çıkarılması gereken önemli bir nokta, puanın önemli bir kullanıcı deneyimi faktörünü ölçmenin bir yolu olduğudur.

Etki ve mesafe faktörlerinin ne olduğunu görsel olarak gösteren bir örnek video aşağıdadır:

Toplam Düzen Kaymasını Anlayın

Toplamsal Düzen Kaymasını anlamak önemlidir, ancak hesaplamaları kendiniz nasıl yapacağınızı bilmeniz gerekli değildir.

Ancak bunun ne anlama geldiğini ve nasıl çalıştığını anlamak çok önemlidir, çünkü bu, Core Web Vitals sıralama faktörünün bir parçası haline gelmiştir.