Kümülatif Yerleşim Kayması (CLS)

Kümülatif Yerleşim Kayması (CLS) nedir?

Kümülatif Düzen Kayması (CLS), bir web sayfasının görsel istikrarını ölçmek için Google tarafından geliştirilen bir Core Web Vitals metriğidir. Sayfanın tüm ömrü boyunca meydana gelen tüm beklenmedik düzen kaymalarının toplamını ölçer. Düzen kaymaları, görünür bir öğe bir işlenen kareden diğerine konumunu değiştirdiğinde gerçekleşir.

CLS Nasıl Ölçülür?

CLS puanları, kayma olmadığını gösteren 0 ile çeşitli derecelerde dengesizliği gösteren 0'ın üzerindeki değerler arasında değişir. Formül, her bir kaymanın etki oranını ve mesafe oranını dikkate alarak öğelerin ne kadar hareket ettiğini ve görüntü alanının ne kadarını kapladığını hesaplar.

CLS Puan Yorumlaması

• İyi: 0 - 0,1
• İyileştirme Gerekiyor: 0.1 - 0.25
• Zayıf: 0,25'in üzerinde

CLS Neden Önemlidir?

Beklenmedik düzen değişiklikleri kullanıcının hayal kırıklığına uğramasına yol açabileceğinden, CLS kullanıcı deneyimi için kritik önem taşır. Örneğin, bir kullanıcı bir düğmeye tıklamak üzereyken düzen değişir ve istemeden başka bir şeye tıklamasına neden olursa, bu durum kötü kullanıcı deneyimine ve potansiyel dönüşüm kaybına neden olabilir.

Zayıf CLS'nin Yaygın Nedenleri

1. Boyutları Olmayan Görüntüler:

   • HTML'nize genişlik ve yüksekliklerini belirtmeden görseller eklemek, tarayıcı başlangıçta ne kadar alan ayıracağını bilemediğinden düzen kaymalarına neden olabilir.

2. Reklamlar, Eklemeler ve Boyutsuz İframe'ler:

   • Bu öğeler dinamik olarak yüklenebilir ve boyutları önceden belirtilmezse yerleşim kaymalarına neden olabilir.

3. Dinamik Olarak Enjekte Edilen İçerik:

   • DOM'daki mevcut içeriğin üzerine içerik eklemek, öğeleri aşağı iterek kaymalara neden olabilir.

4. FOIT/FOUT'a Neden Olan Web Yazı Tipleri:

   • Flash of Invisible Text (FOIT) ve Flash of Unstyled Text (FOUT) tarayıcı web fontlarını yüklerken düzen kaymalarına neden olabilir.

CLS'yi En Aza İndirmek için En İyi Uygulamalar

1. Resim ve Videolara Boyut Özellikleri Ekleyin:

   • Yüklenmeden önce mizanpajda yer ayırmak için her zaman HTML'de resimlerin ve videoların genişliğini ve yüksekliğini tanımlayın.

2. Reklamlar ve Eklemeler için Yer Ayırın:

   • Yüklendiklerinde düzen kaymalarını önlemek için reklam alanlarının, iframe'lerin ve yerleştirmelerin boyutlarını ayarlamak üzere CSS kullanın.

3. Mevcut İçeriğin Üzerine Dinamik Olarak İçerik Enjekte Etmekten Kaçının:

   • Katlamanın altına veya zaten ayrılmış bir alana sahip kapsayıcıların içine yeni içerik ekleyin.

4. Yazı Tipi Yükleme Stratejilerini Kullanın:

   • Web yazı tiplerinin nasıl görüntüleneceğini kontrol etmek ve FOIT/FOUT nedeniyle kaymaları en aza indirmek için font-display CSS özelliğini kullanın.

5. Animasyonlar için CSS Dönüşümü kullanın:

   • Yerleşim kaymalarına neden olmadan öğeleri canlandırmak için üst, alt, sol veya sağ yerine dönüştürme özelliğini kullanın.

Sonuç

Kümülatif Düzen Kayması (CLS), istikrarlı ve görsel olarak çekici bir kullanıcı deneyimi sağlamada hayati bir metriktir. Düzen kaymalarına katkıda bulunan faktörleri anlayarak ve bunları en aza indirmek için en iyi uygulamaları uygulayarak web sayfanızın CLS puanını iyileştirebilir ve genel kullanıcı memnuniyetini artırabilirsiniz.

CLS ve diğer Core Web Vitals'ı geliştirme hakkında daha fazla bilgi için Google'ın Web Vitals belgelerini inceleyebilirsiniz.