Önemli Web Verileri: Kümülatif Düzen Kayması – Nedir ve SEO için Nasıl İyileştirilir

Google'ın Sayfa Deneyimi güncellemesinin kullanıma sunulmasıyla birlikte, ince ayar yapılan web sitelerinin bazı yeni sıralama fırsatları var.

Özellikle, web siteleri, Google'ın "temel web hayati değerleri" olarak adlandırdığı birkaç yeni performans ölçümüne dayalı olarak bir sıralama artışına hak kazanabilir.

Temel web hayati bilgileri, kullanıcı deneyimini etkileyen bir dizi temel web sayfası işlevidir. Artık stratejik SEO'da rol oynuyorlar ve web sitelerinin Google'da nasıl sıralandığını etkileyebilirler.

Google, üç temel web hayati değeri tanımlamıştır:

• En Büyük İçerikli Boya (LCP)
• İlk Giriş Gecikmesi (FID)
• Kümülatif Düzen Kaydırma (CLS)

Bu makale, Google'ın sayfa deneyimi güncellemesiyle ilgili serimizin bir parçasıdır ve onu Google'ın en son değişikliklerini yansıtacak şekilde güncelliyorum. Burada kümülatif düzen kaymasını veya CLS'yi tartışacağım:

• CLS nedir?
• CLS'yi nasıl ölçersiniz?
• CLS SEO'yu nasıl etkiler?
• CLS puanımı nasıl iyileştiririm?

Kümülatif Düzen Kayması (CLS) Nedir?

CLS, bir tarayıcıda ilk kez oluşturulduktan sonra, genellikle zaten gösterilenin üzerine içeriğin dinamik olarak eklenmesiyle bir web sayfasındaki biçimlendirme değişikliklerini ölçer.

Bir bağlantıya tıklamak ve bu bağlantının "taşınması", beklenmeyen bir konuma tıklamayla sonuçlanması genellikle can sıkıcıdır. Bir web sayfasındaki bu tür bir içerik kararsızlığı, kötü bir kullanıcı deneyimi yaratır.

Google, CLS'yi burada tartışır:

Kümülatif Mizanpaj Kayması (CLS), görsel kararlılığı ölçmek için önemli, kullanıcı merkezli bir ölçümdür, çünkü kullanıcıların beklenmedik mizanpaj değişiklikleriyle ne sıklıkta karşılaştıklarını ölçmeye yardımcı olur; düşük bir CLS, sayfanın keyifli olmasını sağlamaya yardımcı olur.

Beklenmeyen sayfa düzeni değişiklikleri, kullanıcı deneyimine zarar verir. Bir örnek, web sayfasındaki bir düğmenin veya bağlantının değişerek bir kişinin başka bir şeyi tıklamasına neden olmasıdır. Bu, Google'ın bu demosunda görebileceğiniz gibi, yanlışlıkla bir satın alma işlemi gerçekleştirdikleri anlamına geliyorsa, bu gerçekten kötü olabilir:

Daha da önemlisi, Google, tüm düzen kaymalarının kötü olarak kabul edilmediğini açıklığa kavuşturur:

Bir düzen kayması, yalnızca kullanıcı bunu beklemiyorsa kötüdür. Öte yandan, kullanıcı etkileşimlerine (bir bağlantıya tıklamak, bir düğmeye basmak, bir arama kutusuna yazmak ve benzeri) yanıt olarak meydana gelen düzen kaymaları, kayma, ilişkinin olduğu etkileşime yeterince yakın gerçekleştiği sürece genellikle iyidir. kullanıcıya açıktır.

Kullanıcı girişinin 500 milisaniyesi içinde meydana gelen düzen kaymaları hadRecentInput bayrağına sahip olacak, böylece hesaplamalardan hariç tutulabilecekler.

Kümülatif Düzen Kayması (CLS) Nasıl Ölçülür?

CLS, bir sayfa görüntülemenin en kötü "oturum penceresi" sırasında meydana gelen her beklenmeyen düzen kayması için tüm bireysel düzen kaydırma puanlarının toplamı ile ölçülür.

Oturum penceresi, bir kullanıcı bir sayfayı ziyaret ederken meydana gelen herhangi bir 5 saniyelik vardiya aralığıdır. Google, en fazla vardiya cezası olan 5 saniyelik aralığı arar ve bu, o sayfa görüntüleme için puandır.

Google, bir düzen kayması puanı hesaplamak için etki oranı ile uzaklık oranını çarpar. Bunları yıkacağım.

Etki oranı, kararsız bir öğenin iki kare arasında ne kadar görüntü alanı kapladığıdır.

Aşağıdaki örnekte, öğenin orijinal görünümün %50'sini kapladığını ancak ardından %25 oranında aşağı kaydırıldığını görebilirsiniz. Her iki çerçeve arasında, öğe görüntü alanının %50 artı %25'ini kaplar ve bu da etki oranının %75 olmasına neden olur.

Google Developers, iki çerçeve arasındaki düzen kayması örneği

Mesafe kesri , kararsız bir elemanın hareket ettiği mesafedir. Aşağıdaki örnek, öğenin görüntü alanı yüksekliğinin %25'ini hareket ettirdiğini göstermektedir.

Görünüm alanında mesafe kayması örneği, Google Developers

Özetlemek gerekirse: CLS, şu şekilde hesaplanan düzen kaydırma puanı ile ölçülür:

Etki oranı * uzaklık oranı = düzen kaydırma puanı

Yukarıdaki örnekleri alırsak, hesaplama şu şekilde olur: 0.75 * 0.25 = 0.1875. Google, bir web sayfasının sitenizdeki tüm sayfalarda veya sayfa görünümlerinde 0,1'den daha düşük bir CLS'ye sahip olması gerektiğini söylüyor. Bu örnek, o hedefin üzerinde olur, bu nedenle kötü puan alır.

Size CLS'nin nasıl puanlandığına dair daha net bir fikir verecek bir örnek: Görünüm alanının içindeki her şey tek bir çerçevede görünüm alanının dışına kaydırılsa, bunun yerleşim puanı 1.0 olur. (GitHub'daki diğer örneklere bakın.)

Sayfanızda görünüm alanında değişen ne kadar çok öğe varsa, puanınız o kadar kötü olabilir.

Google'ın CLS puanı hedefi

Düzen kaydırma puanı hakkında daha fazla bilgiyi burada ve Google'ın eşiklerini nasıl tanımladığını buradan okuyabilirsiniz.

Kümülatif Düzen Kayması (CLS) SEO'yu Nasıl Etkiler?

Diğer temel web hayati öğelerinde olduğu gibi, CLS, hem mobil hem de masaüstünde ziyaretçileriniz için sayfa deneyiminin sorunsuz olmasını sağlamaya yardımcı olur.

İyi bir düzen kaydırma puanı, kullanıcıların web sayfanızla ilgili hayal kırıklığına uğramamasını, yanlışlıkla tıklayıp başka bir sayfaya yönlendirilmemesini ve yanlışlıkla satın alma yapmamasını sağlar. İyi bir kullanıcı deneyimi, SEO'da görmek istediğimiz tüm sonuçlara ulaşmanıza yardımcı olur: sıralamalar, trafik, dönüşümler ve gelir.

Screaming Frog araştırmasına göre, arama sonuçlarının 1. Konumundaki URL'lerin temel web hayati değerlendirmesini geçme olasılığı 9. Konumdaki URL'lere göre %10 daha fazlaydı. Henüz bu faktörlerin sıralama algoritmalarına uygulanmadan önce temel web hayati değerlerine uyun.

CLS'ye bakıldığında, mobil URL'lerin yarısından azı (%46) ve masaüstü URL'lerin yarısından azı (%47) "iyi" CLS puanlarına sahipti. Ortalama CLS puanı mobilde 0.29 ve masaüstünde 0.25'ti. Başka bir deyişle, çoğu sitede CLS iyileştirmesi için yer vardır .

Screaming Frog, geçiş oranlarını konuma göre bölümlere ayırdı ve arama sonuçları sayfasındaki konumlarda aşağı indikçe "iyi" URL'lerin yüzdesinde bir düşüş buldu. Aşağıdaki örnek mobil sonuçlardır, ancak aynı zamanda masaüstü için verileri de grafiklemişlerdir.

"Çekirdek Web Verileri Değerlendirmesini Kaç Site Geçiyor?"

Kümülatif Düzen Kaydırma (CLS) Puanımı Nasıl İyileştiririm?

Google, CLS puanınızı ölçmenize ve ardından optimize etmenize yardımcı olacak laboratuvar araçları ve saha araçları sunar. CLS için laboratuvar araçları, web sayfalarınız için vahşi ortamda yakalanan gerçek veriler kadar kullanışlı olmayabilir.

Sağlanan araçlar şunları içerir:

• Chrome Kullanıcı Deneyimi Raporu (alan)
• PageSpeed ​​Insights (laboratuvar ve saha)
• Search Console (Önemli Web Verileri raporu) (alan)
• Chrome Geliştirme Araçları (laboratuar)
• Deniz Feneri (laboratuar)
• Web Sayfası Testi (laboratuar)
• WaterFaller.dev (laboratuar)

CLS'yi ölçmenin başka bir yolu web-vitals JavaScript kitaplığını kullanır. Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz.

Düzen kaymalarının yaygın nedenleri arasında şunlar bulunur:

• Boyutsuz resimler
• Boyutları olmayan reklamlar, videolar ve diğer gömülü nesneler veya iframe'ler
• Dinamik olarak enjekte edilen içerik
• Diğer öğeler yüklendikten sonra stillerin uygulandığı geç yüklenen CSS
• Görünmez veya stili olmayan metinlerin yanıp sönmesine neden olan web yazı tipleri
• Sayfada, görünmeden önce diğer öğelerin ağ üzerinden yüklenmesini bekleyen öğeler
• Öğeleri CSS'nin "dönüşüm: ölçek()" yerine "yükseklik" ve "genişlik" ile canlandırma
• Öğeleri CSS'nin "transform: translate()" yerine "üst", "sağ", "alt" veya "sol" olarak canlandırma

CLS'yi iyileştirecek temel ilkeler şunları içerir:

1. Resimler, videolar ve diğer gömülü öğeler veya iframe'ler için her zaman boyut özelliklerini kullanın. Bir öğe dinamik olarak yüklenmişse, içerik yüklenmeden önce kapsayıcı öğelerini aynı boyuta veya en boy oranına göre biçimlendirmek için CSS'yi kullanın. Ardından, içerik bu kapsayıcı öğelere yüklendiğinde sayfa kaymaz.
2. İçeriği asla dinamik olarak mevcut içeriğin üzerine eklemeyin.
3. Öğeleri canlandırmak için CSS kullanıyorsanız, animasyonları "dönüştür" seçeneğini tercih edin.

Ve YouTube'daki Google Chrome Geliştiricilerinden CLS ile ilgili bu videoyu izleyin:

Daha ayrıntılı bilgi mi istiyorsunuz? İsteğe bağlı web seminerimizi izleyin, sonundaki genişletilmiş Soru-Cevap bölümü de dahil olmak üzere Temel Web Verilerini Geliştirmek için 3 Uzman İpucu.

Bu sıralama güncellemesi hakkında daha fazla bilgi için tüm sayfa deneyimi serimizi okuyun:

1. Sayfa Deneyimi Güncellemesi nedir?
2. Mobil Dostu Site Nasıl Yapılır?
3. Araya Giren Geçiş Reklamları ve SEO İçin Neden Kötüler?
4. Kullanıcılar ve Sıralama için HTTPS
5. Temel Web Verilerine Genel Bakış
6. Önemli Web Verileri: LCP (En Büyük İçerikli Boya)
7. Önemli Web Verileri: FID (İlk Giriş Gecikmesi)
8. Önemli Web Verileri: CLS (Kümülatif Düzen Kayması)