Cumulative Layout Shift Nedir ve Nasıl Optimize Edilir

Cumulative Layout Shift (CLS) yani kümülatif düzen kayması, core web vitals metriklerinden biridir. CLS, bir web sitesi indirilmeye devam ederken öğelerin konumlarının kaymasını yani görsel kararlılığını ölçen bir metriktir. Düzen kaymasına sebep olabilecek öğeler; videolar, resimler, formlar, düğmeler ve farklı içerik türleridir.

Cumulative Layout Shift (CLS) Neden Oluşur ?

Cumulative Layout Shift birçok sebepten olabilir:

• Resimler
• Videos
• Reklamlar
• Embed edilen öğeler
• Iframeler
• Dinamik olarak eklenen içerikler
• Web Fontları FOIT & FOUT

Bunların dışında, site hızının çok düşük olması ve HTML üzerinde width ve height değerlerinin girilmemesi görsel kararlılığı kötü yönde etkiler bu da CLS’ in yükselmesine sebep olur.

Kümülatif Düzen Değişimini Anlama

CLS metriğini ölçmek için kullanabileceğimiz toollardan biri Google PageSpeed Insights’tır. Bunun dışında kullanabileceğimiz bir diğer tool ise Google Chrome Lighthouse eklentisidir. Peki CLS’in varlığını tool kullanmadan anlayabilir miyiz? Evet, sitemizi ilk yüklemeye başladığımızda büyük öğelerdeki kaymaları fark edebiliriz daha net bir şekilde fark edebilmek için, siteyi yüklemeyi düşük internet hızında başlatmak yeterlidir.

Sitenizdeki CLS’yi Nasıl İyileştirebilir/Optimize edebiliriz?

Width ve Height Değerleri Verilmeyen Öğeler

CLS sorununu ortadan kaldırmak için öncelikle sitemizde görsel kararlılığı korumamız gerekmektedir. Örnek olarak görsellerden bahsedecek olursak, eğer width ve height değerlerini HTML üzerinde belirlemezseniz sayfa yüklenene kadar görselin olduğu kısıma görselden önce gelen öğe yüklenecektir. Görsel yüklendikten sonra, görsel kendi yerine geçecek ve onun yerine gelen öğe aşağı kayacaktır. Peki görsellerin width height değerlerini HTML üzerinde belirlersek responsive açıdan sıkıntı yaratmayacak mı? diye herkes düşünmeye başladı. Doğru bir düşünce, sadece HTML üzerinden belirlersek mobilde görseller sorun yaratacak. Bundan dolayı img etiketleri için aşağıdaki css kullanmamız gerekli;

img 
{ 
width: 100%; 
height: auto; 
}

Detaylı bilgi için aşağıdaki videoyu izleyebilirsiniz.

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

• FOUT (Flash of Unstyled Text), web sayfasında kullanılan asıl font yüklenene kadar geçici font gelmesi ve bundan dolayı tekrar yüklendiğinde yaşanan kayma CLS metriğini yükseltir ve zarar verir.
• FOIT (Flash of Invisible Text), web sayfasında kullanılan fontun geç yüklenmesinden dolayı sayfa içinde oluşan kayma CLS Metriğini yükseltir.

CLS değerini düşürmek ve bu sorunları onarmak için CSS’in font-display özelliğini ve auto, optional, swap gibi kodları kullanabilirsiniz.

font-display: auto;

Optimize CLS puanı nedir?

CLS’nin SEO Açısından Önemi

SEO sadece doğru içerik planlaması ve anahtar kelime optimizasyonu ile sıralama elde edilen bir konumdan çıkalı uzun yıllar oldu. Artık Google Anahtar kelime üzerinden doğru hedefleme ve kullanıcı deneyimi iyi olan sayfaları ilk sıralara çıkarıyor. Kullanıcı deneyimini ölçümlemek için core web vitals gibi çekirdek güncellemesi ile hayatımıza CLS metriği girdi. Eğer siteniz hızlı yükleniyor ve görsel kararlılığı yüksek ise sitemize giren kullanıcı daha fazla oturum süresi geçiriyor ve buda hemen çıkma (Bounce Rate) oranlarımıza yansıyor.

Daha Fazla Bilgiyi Ulaşmak İstiyorsanız?

web.dev/cls/