Biz (Chrome Hız Metrikleri Ekibi), CLS metriğini uzun süredir açık olan sayfalar için daha adil hale getirmeye yönelik seçeneklerle ilgili ilk araştırmamızı yakın zamanda özetledik. Pek çok yararlı geri bildirim aldık ve geniş ölçekli analizi tamamladıktan sonra, metrikte yapmayı planladığımız değişikliği sonlandırdık: 1 saniye boşluklu maksimum oturum penceresi, 5 saniye ile sınırlıdır.
Detaylar için okumaya devam edin!
Seçenekleri nasıl değerlendirdik? #
Geliştirici topluluğundan aldığımız tüm geri bildirimleri inceledik ve dikkate aldık.
Ayrıca Chrome’da en iyi seçenekleri uyguladık ve milyonlarca web sayfasında metriklerin geniş ölçekli bir analizini yaptık. Her bir seçeneğin ne tür siteleri iyileştirdiğini ve seçeneklerin nasıl karşılaştırıldığını kontrol ettik, özellikle farklı seçenekler tarafından farklı şekilde puanlanan sitelere baktık. Genel olarak şunu bulduk:
- Tüm seçenekler, sayfada geçirilen süre ile düzen kaydırma puanı arasındaki ilişkiyi azalttı.
- Hiçbiri seçeneklerden herhangi biri, herhangi bir sayfa için daha kötü bir puanla sonuçlandı. Bu nedenle, bu değişikliğin sitenizin puanlarını kötüleştireceği konusunda endişelenmenize gerek yok.
Karar noktaları #
Neden bir oturum penceresi? #
Daha önceki gönderimizde, puanın sınırsız büyümemesini sağlarken düzen değişikliklerini birlikte gruplandırmak için birkaç farklı pencereleme stratejisi ele aldık. Geliştiricilerden aldığımız geri bildirimler, düzen değişikliklerini en sezgisel şekilde bir arada gruplandırdığı için ezici bir çoğunlukla oturum penceresi stratejisini destekledi.
Oturum pencerelerini gözden geçirmek için işte bir örnek:
Yukarıdaki örnekte, kullanıcı sayfayı görüntüledikçe zaman içinde birçok düzen kayması meydana gelir. Her biri mavi bir çubukla temsil edilir. Yukarıda mavi çubukların farklı yüksekliklere sahip olduğunu fark edeceksiniz; bunlar, her bir düzen değişikliğinin puanını temsil eder. Bir oturum penceresi, ilk düzen kaymasıyla başlar ve düzen kayması olmayan bir boşluk kalana kadar genişlemeye devam eder. Bir sonraki düzen değişikliği gerçekleştiğinde, yeni bir oturum penceresi başlar. Düzen kayması olmayan üç boşluk olduğundan, örnekte üç oturum penceresi vardır. CLS’nin mevcut tanımına benzer şekilde, her vardiyanın puanları toplanır, böylece her pencerenin puanı, ayrı ayrı düzen kaymalarının toplamı olur.
İlk araştırmaya dayanarak, oturum pencereleri arasında 1 saniyelik bir boşluk seçtik ve bu boşluk, geniş ölçekli analizimizde işe yaradı. Yani yukarıdaki örnekte gösterilen “Oturum Boşluğu” 1 saniyedir.
Neden maksimum oturum penceresi? #
İlk araştırmamızda özetleme stratejilerini iki seçeneğe indirdik:
- bu ortalama çok büyük oturum pencereleri için tüm oturum pencerelerinin puanı (aralarında 5 saniyelik boşluk bulunan kapaksız pencereler).
- bu maksimum daha küçük oturum pencereleri için tüm oturum pencerelerinin puanı (aralarında 1 saniye boşluk olacak şekilde 5 saniye ile sınırlıdır).
İlk araştırmadan sonra, milyonlarca URL üzerinde geniş çaplı bir analiz yapabilmek için her bir metriği Chrome’a ekledik. Büyük ölçekli analizde, bunun gibi düzen kaydırma modellerine sahip çok sayıda URL bulduk:
Sağ altta, Oturum Penceresi 2’de çok düşük bir puan veren yalnızca tek, küçük bir düzen kayması olduğunu görebilirsiniz. Bu, ortalama puanın oldukça düşük olduğu anlamına gelir. Peki ya geliştirici bu küçük düzen değişikliğini düzeltirse? Daha sonra puan, yalnızca Oturum Penceresi 1’de hesaplanır; bu, sayfanın puanı anlamına gelir. neredeyse iki katına çıkar. Geliştiricilerin yalnızca puanın daha da kötüye gittiğini bulmak için düzen değişikliklerini iyileştirmesi gerçekten kafa karıştırıcı ve cesaret kırıcı olurdu. Ve bu küçük düzen değişikliğini kaldırmak, kullanıcı deneyimi için açıkça biraz daha iyidir, bu nedenle skoru kötüleştirmemelidir.
Ortalamalarla ilgili bu sorun nedeniyle, daha küçük, sınırlı, maksimum pencerelerle ilerlemeye karar verdik. Bu nedenle, yukarıdaki örnekte, Oturum Penceresi 2 göz ardı edilecek ve yalnızca Oturum Penceresi 1’deki düzen kaymalarının toplamı rapor edilecektir.
Neden 5 saniye? #
Birden çok pencere boyutunu değerlendirdik ve iki şey bulduk:
- Kısa pencereler için, daha yavaş sayfa yüklemeleri ve kullanıcı etkileşimlerine daha yavaş yanıtlar, düzen kaymalarını birden çok pencereye bölebilir ve puanı iyileştirebilir. Yavaşlamaları ödüllendirmemesi için pencereyi yeterince geniş tutmak istedik!
- Sürekli küçük düzen değişiklikleri akışı olan bazı sayfalar var. Örneğin, her skor güncellemesinde biraz değişen bir spor skoru sayfası. Bu vardiyalar can sıkıcıdır, ancak zaman geçtikçe daha fazla can sıkıcı hale gelmezler. Bu nedenle, bu tür düzen değişiklikleri için pencerenin kapatıldığından emin olmak istedik.
Bu iki şeyi göz önünde bulundurarak, gerçek dünyadaki birçok web sayfasındaki çeşitli pencere boyutlarını karşılaştırarak, 5 saniyenin pencere boyutu için iyi bir sınır olacağı sonucuna vardık.
Bu, sayfamın CLS puanını nasıl etkiler? #
Bu güncelleme bir sayfanın CLS’sini kapsadığından, hiçbir sayfa daha kötü bir puana sahip olmayacak bu değişikliğin bir sonucu olarak.
Ve analizimize göre, Kaynakların %55’i, 75. yüzdelik dilimde CLS’de hiçbir değişiklik görmeyecek. Bunun nedeni, sayfalarının şu anda herhangi bir düzen değişikliğine sahip olmaması veya sahip oldukları geçişlerin zaten tek bir oturum penceresiyle sınırlı olmasıdır.
Kaynakların geri kalanı, bu değişiklikle birlikte 75. yüzdelik dilimde iyileştirilmiş puanlar görecek. Çoğu yalnızca hafif bir iyileşme görecek, ancak yaklaşık %3’ü puanlarının “iyileştirmeye ihtiyaç var” veya “zayıf” bir derecelendirmeden “iyi” bir dereceye kadar yükseldiğini görecek. Bu sayfalar, önceki gönderimizde açıklandığı gibi, sonsuz kaydırıcıları kullanma veya çok sayıda yavaş UI güncellemesine sahip olma eğilimindedir.
Nasıl deneyebilirim? #
Yakında yeni metrik tanımını kullanmak için araçlarımızı güncelleyeceğiz! O zamana kadar, CLS’nin güncellenmiş sürümünü kullanarak herhangi bir sitede deneyebilirsiniz. örnek JavaScript uygulamaları ya da Web Vitals uzantısının çatalı.
Önceki gönderiyi okumak ve geri bildirimde bulunmak için zaman ayıran herkese teşekkürler!