Cumulative Layout Shift (CLS) Nedir? Nasıl Optimize Edilir?

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.

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.

Cumulative Layout Shift (CLS) Nedir?

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.

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.

CLS Optimizasyonu: Düzen Kaymaları Nasıl Önlenir?

Yüksek bir CLS puanının arkasında yatan temel nedenler genellikle boyutlandırılmamış görseller, dinamik olarak enjekte edilen reklamlar, senkronize yüklenmeyen web fontları ve asenkron (AJAX) çalışan DOM öğeleridir. Başarılı bir CLS optimizasyonu için aşağıdaki teknik adımları sitenizin mimarisine entegre etmelisiniz.

1. Görsel ve Videolara Boyut (Genişlik ve Yükseklik) Niteliklerini Ekleyin

Geçmişte web geliştiricileri, CSS ile görselleri duyarlı (responsive) hale getirmek için HTML içindeki width ve height etiketlerini kullanmayı bırakmıştı. Ancak tarayıcının görsel indirilene kadar sayfada ne kadar boşluk bırakması gerektiğini bilememesine neden olur. Görsel yüklendiğinde ise aniden alanı kaplayarak altındaki tüm içeriği aşağı iter.

Bu sorunu çözmek için <img> ve <video> etiketlerinin içine mutlaka genişlik ve yükseklik değerlerini ekleyin. Modern tarayıcılar, etiketleri kullanarak görselin en-boy oranını (aspect ratio) hesaplar ve görsel yüklenmeden önce sayfada tam olarak o oranda boşluk ayırır.

HTML

<img src="urun-gorseli.jpg" alt="Ürün Detayı">

<img src="urun-gorseli.jpg" width="800" height="600" alt="Ürün Detayı">

Ayrıca CSS tarafında aspect-ratio özelliğini kullanarak da harici konteynerların boyutlarını önceden rezerve edebilirsiniz.

2. Reklamlar, Banner'lar ve Üçüncü Taraf Widget'lar İçin Yer Ayırın

E-ticaret sitelerinde veya içerik platformlarında dinamik olarak yüklenen banner alanları, promosyon çubukları veya Google AdSense reklamları CLS'nin en büyük düşmanlarıdır. Bir reklamın içine yerleştirilen içeriğin (veya iframe'in) nihai boyutunu sunucu yanıt verene kadar kontrol edemeyebilirsiniz.

Bunu önlemek için reklamın veya widget'ın kapsayıcısına (container) CSS ile bir min-height ve min-width ataması yapmalısınız.

Örneğin, sayfanın ortasında 300x250 piksel boyutunda bir reklam alanı planlıyorsanız, o alanı CSS ile önceden şekillendirin:

CSS

.ad-container {

  min-height: 250px;

  min-width: 300px;

  background-color: #f4f4f4; /* Opsiyonel: Yüklenene kadar gri bir yer tutucu */

}

Sayfanın en başına (navigasyonun bile üzerine) yerleştirilen dinamik bildirim çubuklarının (örn: "Kargo Bedava" duyuruları) CLS üzerinde çok daha yıkıcı bir etkisi olduğunu unutmayın. Bu tür alanları ya DOM içinde baştan sabit boyutta render edin ya da sayfa yüklenirken "absolute" pozisyonlandırma ile normal doküman akışının (document flow) dışına çıkarın.

3. Özel Web Fontlarının Yüklenmesini Optimize Edin

Özel yazı tipleri (Google Fonts veya sunucunuzda barındırılan fontlar) indirilirken tarayıcılar iki farklı davranış sergiler:

• FOIT (Flash of Invisible Text): Yazı tipi inene kadar metin görünmez olur.
• FOUT (Flash of Unstyled Text): Yazı tipi inene kadar tarayıcı varsayılan bir sistem fontu (yedek font) gösterir.

Asıl CLS sorunu FOUT durumunda yaşanır. Yedek yazı tipi (örneğin Arial) ile asıl indirilmek istenen yazı tipi (örneğin Montserrat) karakter genişliği ve satır yüksekliği açısından farklılık gösterir. Orijinal font yüklendiğinde metinlerin kapladığı alan aniden değişir, paragraflar daralır veya genişler, ve tüm sayfa düzeninin kaymasına neden olur.

Yazı Tipi Kaymalarını Önlemek İçin Stratejiler:

• Font-Display Kullanımı: CSS içerisinde font-display: optional kullanarak tarayıcıya fontun anında yüklenmemesi durumunda sistem fontuyla devam etmesini ve düzeni bozmamasını söyleyebilirsiniz.
• Preload (Ön Yükleme): En kritik fontlarınızı <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> HTML etiketi ile sayfa render edilmeden önce indirilmeye zorlayın.
• Size-Adjust: CSS'teki @font-face kuralları içinde size-adjust, ascent-override ve descent-override özelliklerini kullanarak yedek fontun boyutlarını, orijinal fontunuzun boyutlarına metrik olarak eşitleyebilirsiniz. İleri düzey ve son derece etkili bir CLS optimizasyonu yöntemidir.

4. Dinamik İçerikler ve Bağımlı DOM Öğeleri İçin Yer Tutucular (Skeleton Screens) Kullanın

Web sitenizde AJAX veya Fetch API aracılığıyla veritabanından sonradan çekilen içerikler varsa (örneğin; sayfa altına kaydırdıkça yüklenen "Benzer Ürünler" modülü, sonsuz kaydırma özelliği olan bir blog akışı veya kullanıcı yorumları), bu içerikler DOM'a enjekte edildiğinde düzen kaymaları yaratır.

Bunu önlemenin en iyi yolu, sunucudan veri beklenirken o alanlar için iskelet ekranlar (skeleton screens) veya yer tutucular (placeholders) kullanmaktır. Arayüzde içeriğin kaplayacağı alanı önceden gösteren gri kutucuklar veya yükleme animasyonları oluşturarak, gelecek olan içerik için alanı rezerve edebilir ve diğer öğelerin itilmesini engelleyebilirsiniz. Unutmayın, kullanıcıdan bir etkileşim (tıklama gibi) geldikten sonraki ilk 500ms içinde gerçekleşen DOM değişiklikleri CLS puanına dahil edilmez. Ancak sayfa yüklenirken kendiliğinden olan değişimler olumsuz sonuçlar doğurur.

5. Animasyonlarda CSS 'Transform' Özelliğini Kullanın

Sayfa içindeki animasyonlar da düzen kaymasına neden olabilir. CSS ile bir öğeyi hareket ettirmek için top, bottom, left, right, margin veya padding özelliklerini değiştirmek, tarayıcının tüm sayfa düzenini yeniden hesaplamasına (layout recalculation) neden olur.

Bunun yerine, sadece birleştirme (compositing) aşamasında çalışan ve sayfanın doküman akışını etkilemeyen transform: translateY() veya transform: translateX() özelliklerini kullanın.

Eğer web sayfanız iyi bir CLS puanına sahip değilse, zincirleme bir reaksiyon yaratır. Kararsız ve sürekli kayan sayfalar, kullanıcıları sinirlendirir. Kullanıcılar okudukları metni kaybettiklerinde veya yanlış linklere tıkladıklarında sitenizi hızla terk ederler. Bu da doğrudan Hemen Çıkma Oranını (Bounce Rate) artırır ve Oturum Sürelerini (Session Duration) kısaltır. Google'ın yapay zeka destekli sıralama algoritmaları kullanıcı davranışlarını anında tespit eder ve sayfanızın o arama sorgusu için yeterince "kaliteli ve faydalı" olmadığını düşünerek sıralamanızı düşürür.

CLS optimizasyonu sadece teknik bir düzeltme değil; kullanıcılarınıza duyduğunuz saygının ve markanızın dijital vitrininin ne kadar profesyonel olduğunun bir göstergesidir. Başarılı bir SEO stratejisi kurgularken ve web sitenizi yeniden yapılandırırken, kod mimarinizin her aşamasında görsel kararlılığı sağlamayı bir öncelik haline getirmelisiniz.