Cumulative Layout Shift (CLS) Nedir?
Alanım gereği yüzlerce e-ticaret sitesiyle ve e-ticaret yöneticisiyle çalışıyorum. Bu yazımda sizlerle, son iki yıldır karşımıza sıkça çıkan ve Google’ın öncülüğünde ölçümlenen, takip edilen ve nasıl optimum seviyede tutulacağı araştırılan bir kavramdan bahsedeceğim.
Elbette, sitenizin performansını ölçümlemek için LightHouse, PageSpeed Insights, GTmetrix, Google Search Console (Beta) gibi araçlara ihtiyaç duyuyor ve zaman zaman bazı metrikleri değerlendiriyorsunuzdur. Burada karşımıza çıkan metriklerden, önemli bir kullanıcı deneyimi göstergesi olarak nitelendirebileceğimiz bir metrik bulunuyor. Evet bu metrik, CLS.
CLS, terim anlamıyla aslında sayfaya yüklenen elementlerin daha sonrasında bazı etkenler sebebiyle varolan konumundan farklı bir konuma beklenmedik şekilde hareket etmesidir. Bunu bir animasyonla Google çok güzel açıklamış.
Yukarıdaki görselde aslında geri adım butonuna tıklamak isteyen bir son kullanıcı, sayfada gerçekleşen bir düzen değişikliği sonrası maalesef yanlış butona tıklamış ve sonrasında geri adım atamamıştır. Bunu anlayabilmek için son kullanıcı olarak ek bir teknik bilgiye sahip olmamız gerekmez. Fakat bizim ön göremediğimiz değişiklikleri her zaman sitede dolaşarak mı tespit edeceğiz?
İşte tam burada hayatımıza bazı metrikler giriyor. Bu metrikler aslında son kullanıcıya yaşattığımız deneyimin matematiksel karşılığı ve gerçekten ölçümlenebilir bir sürece giriş yapmamızı sağlıyor.
Hiç sitenizin CLS skorunu ölçümlediniz mi?
PageSpeed Insights üzerinden hızlıca bir test gerçekleştirebilirsiniz.
İlk aşama, bu değeri ölçümlemek ve bir sayı elde etmek :). Peki, bu sayıyı nasıl anlamlandıracağız?
Yukarıdaki görselde görebileceğiniz bir oranlama sunuyor Google bize. Bizim test sonucumuza göre, web sitemiz CLS konusunda başarılı. LCP, FCP gibi diğer metriklerimizi de farklı yazılarda sizlerle paylaşmayı hedefliyorum.
CLS Nasıl Hesaplanıyor?
En temel haliyle, bir nesnenin web sitesi düzeninde hareket ettikten sonra ilk konum ve bulunduğu son konum toplamı bize hareketin etki ettiği toplam alanı verir (Görsel 1.4). Sonrasında, bu alan ile nesnenin ilk konumu ve son konumu arasındaki mesafenin çarpımı bize CLS skorunu verir (Görsel 1.5). Bu durumu görselle açıklamak gerekirse:
Birinci görselde, nesnenin hareketi ile birlikte toplam etki alanı telefon ekranımızın 0.75'idir. İkinci görsel ise, hareket mesafesini göstermektedir ve bu da ortalama 0.25'e karşılık gelmektedir. Burada, 0.75 ile 0.25 sayısının çarpımı bize layout shift skorunu vermektedir. Bu senaryoda, 0.1875 gibi bir skora sahip oluyoruz. Tüm site hareketlerini değerlendirerek de CLS skoruna ulaşabilirsiniz.
JavaScript ile CLS Nasıl Ölçümlenebilir?
Öncelikle, gelişmiş web API’leriyle hayatımıza giren Performance Observer web sitemizin performansını JavaScript aracılığıyla ölçümlememize olanak sağlamaktadır.
Performance observer, tarayıcımızın performans ölçümlemek için site üzerindeki hareketlerin ardından oluşan girdilerle tetiklenen bir API’dir. Her performans metriği girişinin ardından aşağıdaki gibi bir hesaplama yapılarak aslında CLS skoruna ulaşılabilir.
let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});// source : https://web.dev/cls/
CLS Ölçümlemenin Diğer Yolları
CLS’yi her zaman sayfa hız analizi için geliştirilmiş ve sonrasında popüler metriklerle performans ölçüm aracına dönüştürülmüş PageSpeed Insights gibi araçlarla ölçmek zorunda değilsiniz. Bunun için, buradaki gibi çok fazla tarayıcı eklentisi geliştirmiştir. Daha küçük olan bu araçlarla testlerinizi ve takiplerinizi yapabilirsiniz.
CLS Skorunu Nasıl İyileştirilebilir?
Bir web sitesi için tasarım mimarisi büyük önem taşımaktadır. Bir mimaride; kullanıcı deneyimi, e-ticaret akışı ya da web sitesinin alanına yönelik bir çok kavram ve etken karşımıza çıkacaktır. Bu etkenlerin tamamı, son kullanıcının — bizim onun için oluşturduğumuz — hedefe daha kolay, hızlı ve kalıcı olarak ulaşmasını sağlamaktır. Bunu sağlamaya çalışırken, genelde metriklerden uzakta kalırız. Sonrasında sitemizin başarısını metriklerle ölçümlemeye çalışıp kulağı maalesef birazcık tersten tutarız.
Mimarimizin en temelinde, düzeni tasarlarken bu düzenin ön gördüğümüz hareketlerini de tasarlayarak bu hareketler için gerekli payları tanımlamamız gerekir. Yazımızdaki daha önce kullandığımız aşağıdaki görseli tekrar hatırlayalım:
Bu görselde, aslında #protip ile başlayan kutucuk senaryoya sonradan dahil oluyor. Fakat o alanın web sitemize yükleneceğini aslında biz mimariyi tasarlarken biliyoruz. Bizim tercihimiz ya da bağlantı sorunları dolayısıyla ilgili alan sahneye sonradan giriyor. Bu sebeple, onun geleceğini bildiğimiz için düzende ona bir hareket alanı tanımlamalıyız.
PlaceHolder ya da yer tutucu adı verebileceğimiz yukarıdaki görseldeki gibi yardımcı alanlar bu tip senaryolarda kurtarıcımız olacaktır.
Web siteleri bildiğiniz gibi dinamik alanlar, eskiden sayfa yeniden yüklenmeden değişiklikler yansımadığı için performans anlamında da bu şekilde sıkıntılarımızın ortada olmadığını düşünüyorum. Zamanla artan internet hızları, gelişen teknolojiler anlık reaksiyonların popülerliğini sıkça arttırmış ve kullanıcı deneyiminde önemli bir yer edinmesini sağlamıştır.
Bu sıkıntıların önüne geçmek için placeholder gibi alanların yanı sıra, kaydırma aksiyonları yerine tooltip, popup gibi yardımcıları da kullanabiliriz. Layout üzerinde daha az etkiye sahip bu araçlar CLS skorumuzu iyileştirmede bize yardımcı olabilir.
CLS’nin düşük olması her zaman mimarimizdeki bir eksikten dolayı olmayabilir. Web ortamında sağlıklı bir deneyim yaşatmak için aşağıdaki kavramlara da dikkat etmenizi hatırlatmak isterim :)
- Kullanılmayan ve gereğinden büyük görsellerden kaçınmalıyız.
- Bir görselin web sitesine gerçekten ihtiyacımız olduğunda yüklenmesini sağlamalıyız.
- Javascript, css, font ve benzeri dosyaların gerçekten minimalist bir yaklaşımda olduğundan emin olmalıyız.
- Düzenli olarak web sitelerimizin performanslarını yardımcı araçlarla takip etmeli ve raporlamalıyız.
Vakit ayırdığınız için teşekkür ederim,
Kaynak : https://web.dev/cls/
