Cumulative Layout Shift (CLS) Nedir?
descent-override
Google, web sayfalarını sıralarken artık doğrudan “kullanıcı deneyimini” merkeze alan algoritmalar kullanıyor. Bu kullanıcı merkezli yaklaşımın en temel yapı taşlarından biri de Core Web Vitals metrikleridir. Sayfa yükleme hızı, etkileşime hazır olma süresi ve görsel kararlılık, modern SEO stratejilerinin temelini oluşturur.
Core Web Vitals
Cumulative Layout Shift
Cumulative Layout Shift (CLS) Nedir?
0.1 veya daha düşük
1 altı:
1 ile 0.25 arası:
25 üzeri:
Layout Shift Skoru (CLS Puanı) Nasıl Hesaplanır?
Layout Shift Score = Impact Fraction * Distance Fraction
Kararsız Elemanların Tespiti:
Kayma Etkisi (Impact Fraction):
Kayma Mesafesi (Distance Fraction):
CLS Optimizasyonu: Düzen Kaymaları Nasıl Önlenir?
CLS optimizasyonu
1. Görsel ve Videolara Boyut (Genişlik ve Yükseklik) Niteliklerini Ekleyin
<img>
<img src=”urun-gorseli.jpg” alt=”Ürün Detayı”>
<img src=”urun-gorseli.jpg” width=”800″ height=”600″ alt=”Ürün Detayı”>
aspect-ratio
2. Reklamlar, Banner’lar ve Üçüncü Taraf Widget’lar İçin Yer Ayırın
min-height
.ad-container {
min-height: 250px;
min-width: 300px;
background-color: #f4f4f4; /* Opsiyonel: Yüklenene kadar gri bir yer tutucu */
}
3. Özel Web Fontlarının Yüklenmesini Optimize Edin
FOIT (Flash of Invisible Text):
FOUT (Flash of Unstyled Text):
Yazı Tipi Kaymalarını Önlemek İçin Stratejiler:
Font-Display Kullanımı:
Preload (Ön Yükleme):
Size-Adjust:
4. Dinamik İçerikler ve Bağımlı DOM Öğeleri İçin Yer Tutucular (Skeleton Screens) Kullanın
5. Animasyonlarda CSS ‘Transform’ Özelliğini Kullanın
top, bottom, left, right, margin
transform: translateY()
Hemen Çıkma Oranını (Bounce Rate)
SEO
Eğer dijital varlığınızın organik arama sonuçlarındaki performansını artırmak, kullanıcıların sitenizde daha uzun süre kalmasını sağlamak ve dönüşüm (conversion) oranlarını maksimize etmek istiyorsanız, sitenizi kullanıcılar için kusursuz hale getirmeniz gerekir. Core Web Vitals metriklerinin en kritik ve genellikle çözümü en çok teknik müdahale gerektiren Cumulative Layout Shift (Kümülatif Düzen Kayması) konusuna derinlemesine odaklanacağız.
<video>
min-width
font-display: optional
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
@font-face
padding
transform: translateX()
Oturum Sürelerini (Session Duration)
size-adjust, ascent-override
Cumulative Layout Shift (CLS), bir web sayfası yüklenirken ve kullanıcının sayfayla etkileşimi sırasında meydana gelen beklenmedik görsel düzen kaymalarını ölçen bir kullanıcı deneyimi metriğidir. Kısacası CLS, sitenizin yüklenme aşamasındaki “görsel kararlılığını” temsil eder.
CLS optimizasyonu
Bir web sitesini ziyaret ettiğinizi hayal edin. Bir makaleyi okumaya başladınız veya bir e-ticaret sitesinde tam “Sepete Ekle” butonuna tıklamak üzeresiniz. Tam o an, sayfanın üst kısmına gecikmeli olarak bir reklam afişi, bir bülten aboneliği kutusu veya büyük bir görsel yüklenir. Sayfadaki içerik aniden aşağı doğru itilir ve siz yanlışlıkla başka bir bağlantıya veya “İptal” butonuna tıklarsınız.
Sayfa yükleme sırasında görünüm alanındaki (viewport) bir öğe başlangıç konumundan hareket ettiğinde, bu bir düzen kayması (layout shift) olarak adlandırılır. Kullanıcı tarafında yarattığı olumsuz deneyim, yüksek hemen çıkma oranlarına (bounce rate) ve kaybedilen satışlara yol açar.
Google’a göre iyi bir kullanıcı deneyimi sunmak için web sayfalarının 0.1 veya daha düşük bir CLS puanına sahip olması gerekir.
- 1 altı: İyi (Başarılı)
- 1 ile 0.25 arası: Geliştirilmesi Gerekiyor
- 25 üzeri: Zayıf (Kötü)
Layout Shift Skoru (CLS Puanı) Nasıl Hesaplanır?
Tarayıcılar, bir sayfadaki düzen kaymasını hesaplarken iki temel faktörü dikkate alır: Kayma Etkisi (Impact Fraction) ve Kayma Mesafesi (Distance Fraction).
Google’ın resmi formülü şu şekildedir: Layout Shift Score = Impact Fraction * Distance Fraction
- Kararsız Elemanların Tespiti: İlk olarak tarayıcı, sayfa yükleme veya gezinme işlemi sırasında başlangıç konumlarını değiştiren öğeleri (kararsız öğeler) tespit eder.
- Kayma Etkisi (Impact Fraction): Bu metrik, kararsız öğelerin ekranın ne kadarlık bir kısmını etkilediğini ölçer. Örneğin, sayfanın %50’sini kaplayan bir metin bloğu aşağı doğru kayarsa, etki alanı oldukça yüksektir.
- Kayma Mesafesi (Distance Fraction): Kararsız bir öğenin, görünüm alanına (ekrana) oranla ne kadar mesafe kat ettiğini ölçer. Öğenin hareket ettiği mesafe, ekranın en büyük boyutuna (genişlik veya yükseklik) bölünerek bulunur.
Bu iki değerin çarpımı, karşımıza o kayma hareketinin CLS puanını çıkarır. Tüm kaymaların toplamı ise “Kümülatif” yani toplam CLS puanınızı belirler.