CLS metriğini geliştirme

Uzun ömürlü sayfalar için daha adil olmak amacıyla CLS metriğini iyileştirme planları.

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

Chrome Hız Metrikleri Ekibi olarak, kısa bir süre önce Google’daki ilk araştırmamızı CLS metriğini uzun süre açık olan sayfalar için daha adil hale getirme seçenekleri zaman ekleyin. Pek çok yararlı geri bildirimler aldı. Büyük ölçekli analizi tamamladıktan sonra, metrikte yapmayı planladığımız değişiklik: 1 saniyelik maksimum oturum penceresi boşluk, 5 saniyeyle sınırlı olmalıdır.

Ayrıntılar için okumaya devam edin.

Seçenekleri nasıl değerlendirdik?

Geliştirici topluluğundan gelen tüm geri bildirimleri inceledik ve hesaba katar.

Ayrıca, tablodaki en iyi Chrome'daki seçenekler ve milyonlarca web sayfasındaki metriklerin geniş ölçekli bir analizini yaptı. Biz her bir seçeneğin ne tür sitelerde gelişme gösterdiğini ve seçeneklerin nasıl karşılaştırıldığını kontrol ettik. özellikle de farklı alt ölçeklerden farklı puan alan sitelere bakarak seçenekleri vardır. Genel olarak şu sonuçları elde ettik:

  • Tümü seçenekler, sayfada geçirilen süre ve Düzen kayması puanı.
  • Seçeneklerden hiçbiri sayfa için daha düşük puan elde edilmesiyle sonuçlandı. Herhangi bir bu değişikliğin sitenizin puanlarını kötüleştireceği konusunda endişelenmeniz gerekiyor.

Karar noktaları

Neden oturum aralığı?

Bir önceki gönderimizde birkaç farklı pencere ile stratejiler puanın büyümemesini sağlarken düzen kaymalarını gruplandırmak için Sınırsızdır. Geliştiricilerden aldığımız geri bildirimler büyük ölçüde oturum aralığı stratejisi, düzen kaymalarını en çok birlikte gruplandırır daha iyi anlamanızı sağlar.

Oturum aralıklarını incelemek için aşağıda bir örnek verilmiştir:

Oturum aralığı örneği.

Yukarıdaki örnekte, kullanıcı sayfasını ziyaret edin. Her biri mavi bir çubukla gösterilir. Yukarıda mavi çubukların farklı yükseklikleri vardır; Bunlar, metriğin puanını her bir düzen kaymasını sağlar. Bir oturum penceresi, ilk düzen kaymasıyla başlar ve düzen kayması olmayan bir boşluk oluşana kadar genişlemeye devam eder. Sonraki düzen kayması gerçekleşir, yeni bir oturum penceresi açılır. Paydaşların yönetiminde örnekte düzen kayması yoksa üç oturum aralığı vardır. Şuna benzer: her bir değişimin puanları toplanır, böylece her bir CLS’nin penceresinin puanı, tek tek düzen kaymalarının toplamıdır.

Baş harfine göre 'i seçin. arasında 1 saniyelik bir boşluk olması vardı ve bu boşluk büyük ölçekli analiz. "Oturum Açığı", yukarıdaki örnekte gösterilen değer 1'dir tıklayın.

Neden maksimum oturum aralığı kullanılıyor?

Özetlemeyi daralttık. stratejileri iki seçenek var:

  • Çok büyük oturumlarda tüm oturum aralıklarının ortalama puanı pencereler (arasında 5 saniyelik boşluk bulunan sınırlandırılmamış pencereler).
  • Daha küçük oturum aralıkları için tüm oturum aralıklarının maksimum puanı (5 saniyeyle sınırlıdır, aralarında 1 saniyelik boşluk bulunur).

İlk araştırmadan sonra, her bir metriği Chrome'a ekledik. Böylece, Milyonlarca URL üzerinden büyük ölçekli analiz. Büyük ölçekli analizde aşağıdaki gibi düzen kayması kalıplarına sahip birçok URL buldu:

Ortalamayı aşağı çeken küçük bir düzen kayması örneği

Sağ altta, düzen kaymasının yalnızca tek, çok küçük bir Bu da çok düşük bir puan verir. Bu, ortalama puanın oldukça düşük. Peki, geliştirici bu küçük düzen kaymasını düzeltse ne olur? Ardından Puanı, yalnızca Oturum Aralığı 1'de hesaplanır. Bu, sayfanın puanının neredeyse iki kat arttı. Geliştiriciler için gerçekten kafa karıştırıcı ve caydırıcı yalnızca puanın daha da düştüğünü görmek için düzen kaymalarını iyileştirdiler. Ve bu küçük düzen kaymasının kaldırılması, kullanıcı açısından belli ki o yüzden puanı kötüleştirmemelidir.

Ortalamalarla ilgili bu sorun nedeniyle, daha küçük, sınırlı, maksimum pencereler. Yukarıdaki örnekte, Oturum Penceresi 2 yok sayılır ve yalnızca Oturum Aralığı 1'deki düzen kaymalarının toplamı bildirilebilir.

Neden 5 saniye?

Birden fazla pencere boyutunu değerlendirdik ve iki şey bulduk:

  • Kısa aralıklarda, sayfalar daha yavaş yüklenir ve kullanıcı etkileşimlerine daha yavaş yanıtlar verilir. sayfa düzeni kaymalarını birden fazla pencereye bölerek puanı iyileştirebilir. Biz Yavaşlamalardan kaçınmak için pencereyi yeterince büyük tutmak istedik.
  • Küçük düzen kaymalarının sürekli olduğu bazı sayfalar vardır. Örneğin, Örneğin, her skor güncellemesiyle biraz değişen bir skor sayfası. Bu değişimler can sıkıcı olsa da zaman geçtikçe daha fazla rahatsız edici olmuyor. Bu yüzden pencerenin bu tür düzen kaymaları için sınırlandırıldığından emin olmak istedik.

Bu iki şeyi göz önünde bulundurarak, birçok platformda çeşitli pencere boyutlarını değerlendirdiğimize göre, 5 saniyenin bir reklamın yüklenmesi için iyi bir sınır yardımcı olabilir.

Bu, sayfamın CLS puanını nasıl etkileyecek?

Bu güncelleme bir sayfanın CLS'sini sınırladığı için hiçbir sayfanın puanı daha düşük olmaz kararlaştırıldı.

Analizlerimize göre, kaynakların% 55'inde CLS'de hiçbir değişiklik olmayacak. 75. yüzde birlik dilimde yer alır. Bunun nedeni, sayfalarının şu anda olan düzen kaymaları veya sahip olduğu kaymalar zaten bir tek bir oturum arasında seçim yapabilirsiniz.

Kaynakların geri kalanı için 75. yüzdelik dilimde daha iyi puanlar gelecek bu değişiklik hakkında daha fazla bilgi edinin. Çoğunda hafif bir iyileşme görülürken yaklaşık% 3'ü "iyileştirmeye ihtiyaç var" durumunda oldukları için puanlarının artması veya "kötü" puanı “iyi” olunması puan. Bu sayfalar genellikle sonsuz kaydırıcılar kullanır veya çok sayıda önceki bölümde anlatıldığı gibi, yavaş kullanıcı arayüzü güncellemeleri yayın.

Nasıl deneyebilirim?

Yakında araçlarımızı yeni metrik tanımını kullanacak şekilde güncelleyeceğiz. O zamana kadar, CLS'nin güncellenmiş sürümünü istediğiniz sitede deneyebilirsiniz. JavaScript uygulamalar veya Web Vitals'ın çatalını uzantısıyla ilgili daha fazla bilgi edinebilirsiniz.

Önceki gönderiyi okumaya zaman ayırıp geri bildirim!