Kullanıcı deneyimi, web sitelerinin performansı ve site trafiği söz konusu olduğunda son derece önemli bir konudur. Kullanıcı deneyimini iyileştirmenin hem kolay hem karmaşık yolları bulunur.
Google’ın ranking faktörlerinden biri olduğunu açıkladığı Core Web Vitals ögeleri bu noktada kritik öneme sahiptir. Bu ögeler, web sitesine giriş yapan kullanıcıların deneyimlerini genel web site performansı açısından ölçerek bir değerlendirme skoru ortaya çıkarır.
Bu yazımızda Cumulative Layout Shift (CLS) metriğini ele alacak ve bu metriği nasıl iyileştirebileceğinize dair ipuçlarına yer vereceğiz.
Cumulative Layout Shift (CLS) Nedir?
Düzen kayması olarak da adlandırılan Cumulative Layout Shift, web sayfalarında bulunan görsel içeriklerin yüklenme anındaki performansını değerlendiren Core Web Vitals metriğidir.
Sayfa içeriği yüklenirken ortaya çıkan düzen kaymaları, web sitesine giriş yapan kullanıcıların gezinme deneyimlerini olumsuz etkiler.
Bu durum arama motoru botları söz konusu olduğunda da aynıdır: Web sitesini taramak üzere adrese giriş yapan botlar, görsel kaymalarını tespit eder ve kullanıcıların bu durumdan olumsuz etkilenebileceğine işaret eder.
Farklı bir şekilde söylenecek olursa CLS sorunu web sayfalarının yukarı aşağı yönlü kaymalarına neden olur. Bu durum, tahmin edileceği üzere kullanıcıların dikkatini dağıtır. Bu sebeple Google, CLS sorunlarını Core Web Vitals ögelerinden biri olarak işaretlemiş ve bu metriği “hayati” olarak adlandırmıştır.
CLS Neden Önemlidir?
Herhangi bir web sayfasına giriş yapan kullanıcının her zaman bir amacının olduğu söylenebilir. Bu amaç bir bilgi edinmek, alışveriş yapmak, form doldurmak, iletişim bilgilerini öğrenmek ve benzeri olabilir.
Fakat web sitelerinde yer alan bazı sorunlar, kullanıcıların bu tür amaçlarına engel olabilir. Bunun bir sonucu olarak amaç yerine getirilmeden web sitesinden çıkış yapılmasına yol açabilir.
Dijital mecralardaki odak kaymalarının 3 saniye gibi kısa bir zaman dilimine indiği günümüzde kullanıcı dönüşümünü kaçırmamak için tüm web site sorunlarının çözüme kavuşturulması gerekir. CLS de bu sorunlardan biridir.
Web sayfası içerisinde gezinen kullanıcının içerik ve görsel kayması sorunlarıyla karşılaşması, kişilerin istemeden farklı yerlere tıklamalarına neden olabilir. Bu yanlış tıklamanın bir sonucu olarak söz konusu kullanıcı büyük ihtimalle kaybedilecektir.
İyi bir CLS skoru, kullanıcıların düzen kayması sorunlarıyla karşılaşmaması anlamına gelir.
İdeal CLS Skoru Nedir?
CLS skoru için ideal olarak gösterilen değer 0.1 altındadır. 0.1 ve altı CLS skoruna sahip olan web sitelerinde kullanıcılar, genellikle herhangi bir düzen kayması sorunuyla karşı karşıya kalmaz.
0.1 ile 0.25 arasındaki CLS skoru ise web sitesinde ortalama bir durumun yaşandığına işaret eder. Bu tür web sayfalarında düzen kaymaları yer yer görülse de bu durum kullanıcı etkileşimini çok fazla etkilememektedir.
CLS söz konusu olduğunda sorun yaratan değer 0.25 ve üzerindeki değerlerdir. Bu tür web sayfalarında ciddi düzen kaymaları görülür. Bu durum kullanıcı deneyiminin olumsuz etkilendiğine, sorunun bir an önce çözülmesi gerektiğine işaret eder.
CLS Sorunlarının Yaşanmasına Ne Sebep Olur?
Düzen kayması sorununun ortaya çıkmasına neden olan birçok madde sıralanabilir. Bunlardan bazılarını aşağıdaki başlıklarda sizler için bir araya getirdik.
Resim ve Video İçeriklerde Yükseklik ve Genişlik Değerlerinin Verilmemesi
Web sayfası içerisinde bulunan görsel, iframe ve video içeriklerine yükseklik ve genişlik değerlerinin atanmaması, CLS skorunun olumsuz etkilenmesine neden olur. Bu içeriklere söz konusu değerler verilmediğinde sayfa yüklenme anında tarayıcı, diğer içerikleri bu alanlara doğru kaydırabilir. Bu ise doğrudan CLS değerinin yüksek çıkmasına sebep olur.
Reklamlar ve Embed İçerikler
Embed ve reklam içerikleri genellikle web sayfaları yüklendikten sonra dinamik olarak yüklenir. Bu içerikler için web sitesi yöneticileri tarafından sabitlenmiş bir alana yer verilmemesi, sayfada yer alan farklı içeriklerin bu alana kaymasına neden olabilir. Bu durumun bir sonucu olarak CLS skoru olumsuz etkilenir ve artar.
Dinamik İçerikler
Web sayfalarında yer alan ve Javascript ile dinamik olarak güncellenen içerikler de düzen kaymalarının ortaya çıkmasına neden olabilir.
Sayfa Oluşturulduktan Sonra Yüklenen Fontlar
Özellikle yüksek boyutlu font dosyalarının tamamı, sayfa oluşturulurken yüklenemez. Bu da söz konusu dosyaların gecikmeli olarak yüklenmesine ve bu durumun bir sonucu olarak metin boyutu, şekli, yeri ve benzeri ögelerin kaymasına neden olur.
Animasyonlar
CSS ile oluşturulan bazı animasyonlar ve web sayfalarında yer alan geçişler, adreste bulunan farklı ögelerin boyutlarını ve bulundukları konumları değiştirebilir. Bu da düzen kayması sorunlarının ortaya çıkmasına ve kullanıcıların olumsuz etkilenmelerine neden olur.
CLS Skoru Nasıl Ölçülür? CLS Skorunuzu Nasıl Tespit Edebilirsiniz?
Cumulative Layout Shift skorunu ölçmenin en etkili yolları Lighthouse ve Chrome Dev Tools’u kullanmaktır.
Bu araçlar direkt olarak tarayıcılar üzerinden sayfaları yeniden yükler ve sayfa içerisinde yer alan CLS sorunlarını tespit ederek bir CLS skoru ortaya çıkarır.
Aşağıda Chrome Dev Tools kullanarak CLS skorunuzu ölçme adımlarını açıkladık:
- Web sayfasına gidin ve sağ tıklayarak Ögeyi İncele seçeneğine tıklayın.
- Elements, Computed, Layout… şeklinde devam eden üst menüden Lighthouse’u seçin.
- Gerekli tercihleri yaparak Analyze page load seçeneğini tıklayın:
- Aracın işlemi tamamlamasını ve web sayfasını analiz etmesini bekleyin:
- Karşınıza çıkan ekranda yer alan Performance bölümünün altında Cumulative Layout Shift değerini göreceksiniz.
CLS Skorunuzu Nasıl İyileştirebilirsiniz?
Yazımızın bu bölümünde Cumulative Layout Shift skorunuzu iyileştirebilecek bazı teknik aksiyonları sıralayacak ve gerekli yönlendirmeleri yapmaya çalışacağız.
Fakat bu noktada söz konusu aksiyonların alanında uzman ve teknik bilgisi olan kişiler tarafından hayata geçirilmesi gerektiğinin altını çizmeliyiz.
Görsel ve Videoalarınıza Yükseklik ve Genişlik Değerleri Atayın
CLS sorunları genellikle yükseklik ve genişlik değeri atanmamış görsel ve video içerikler sebebiyle ortaya çıkar. Bu sebeple eğer kötü bir CLS skoruna sahipseniz ilk olarak görsel içeriklerinizin söz konusu değerlere sahip olup olmadığını kontrol edin. Bu değerleri ilgili alanlara ekleyin ve CLS skorunun ne derece iyileştiğini gözlemleyin.
Reklam Alanlarını Belirleyin ve Sınırlandırın
Web sayfalarında yer alan reklam alanlarının boyut olarak sınırlandırılması genellikle zor olarak görülür. Durum böyle olsa da ads alanlarını belirlenen bir yükseklik ve genişlik değeriyle sınırlandırarak CSL değerinin olumsuz etkilenmesine engel olabilirsiniz.
Dinamik Olarak Yüklenen İçerikleri Sınırlandırın
Dinamik olarak yüklenen içerikler de CLS sorunlarının ortaya çıkmasına sebep olabilmektedir. Bu konu, içeriklerin web sayfası içerisinde yer alacağı konumun tam olarak bilinememesi sebebiyle çözülmesi zor gibi görünebilir.
Fakat içeriklerin sayfadaki yerlerini belirleyerek gerekli yükseklik ve genişlik değerleri doğru bir şekilde atanırsa dinamik içerikler sebebiyle ortaya çıkan CLS sorunlarının önüne geçilebilir.
Basit Fontlar Tercih Edin ya da Ön Yükleme Yapın
Yazımızın üst bölümlerinde de bahsettiğimiz üzere özel stillere sahip olan fontlar da CLS skorunun kötü etkilenmesine neden olabilir.
Bu sorunu ortadan kaldırmanın en kolay yolu, bilindik tarayıcılar tarafından varsayılan olarak kabul edilen Helvetica gibi fontları kullanmaktır.
Eğer özel stillere sahip fontları kullanmakta ısrarcıysanız fontları preload ile önden yükleyebilir, bu sayede CLS skorunun olumsuz etkilenmesinin önüne geçebilirsiniz.
Sonuç
Cumulative Layout Shift ya da düzen kayması, direkt olarak kullanıcı deneyimini ve dönüşüm oranlarını olumsuz etkileyen bir sorundur. Bu sorunla karşı karşıya kalan web siteleri, farklı bir şekilde söylenecek olursa Google tarafından “hayati” olarak adlandırılan bir metrikte kötü bir performans göstermektedir. Bu durum ise doğrudan web site sıralamasına olumsuz etkide bulunacaktır.
CLS skorunun iyileştirilmesinin Google, kullanıcı deneyimi ve dönüşüm oranları göz önünde bulundurularak değerlendirilmesi gerekir: İyi bir CLS skoru, kullanıcıların istediğine kolaylıkla ulaşabildiği bir web sitesine bir adım daha yakın olmak anlamına gelebilir.
Bu yazımızda CLS’nin ne olduğundan, neden ortaya çıktığından ve nasıl optimize edilebileceğinden detaylı bir şekilde bahsetmeye çalıştık. Sizler de yazımızda yer alan bilgiler ışığında Chrome Dev Tools ya da Lighthouse gibi araçları kullanarak CLS skorunuzu ölçebilirsiniz. Böylece gerekli aksiyonlar için hazırlıklara başlayarak trafik, kullanıcı deneyimi ve dönüşüm gibi hayati metrikleri iyileştirmeye başlayabilirsiniz.