CLS metriğini uzun süreli sayfalara daha adil olacak şekilde iyileştirme planları.
Chrome Hız Metrikleri Ekibi olarak kısa süre önce CLS metriğini uzun süredir açık olan sayfalar için daha adil hale getirme seçenekleri ile ilgili ilk araştırmamızın ana hatlarını çıkardık. Bu süreçte birçok faydalı geri bildirim aldık ve büyük ölçekli analizi tamamladıktan sonra metrikte yapmayı planladığımız değişikliği sonuçlandırdık: 1 saniyelik boşlukla maksimum oturum aralığı, 5 saniyeyle sınırlı.
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 dikkate aldık.
Ayrıca Chrome'da en iyi seçenekleri uyguladık ve milyonlarca web sayfası üzerinde metriklerin geniş ölçekli bir analizini gerçekleştirdik. Özellikle farklı seçeneklerle farklı şekilde puanlanan sitelere bakarak, 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. Genel olarak elde ettiğimiz bulgulara göre:
- Tüm seçenekler, sayfada geçirilen süre ve düzen kayma puanı arasındaki korelasyonu azalttı.
- Seçeneklerin hiçbiri herhangi bir sayfanın daha kötü bir puan almasına neden olmadı. Bu nedenle, bu değişikliğin sitenizin puanlarını düşüreceği konusunda endişe duymanıza gerek yoktur.
Karar noktaları
Neden oturum aralığı?
Önceki yayınımızda, puanın sınırsız büyümesini önlemek için düzen kaymalarını bir arada gruplandırmaya yönelik birkaç farklı aralıklandırma stratejisini ele aldık. Oturum aralığı stratejisini, düzen kaymalarını en sezgisel şekilde bir arada gruplandırdığından geliştiricilerden aldığımız geri bildirimler büyük ölçüde olumlu yönde etkilendi.
Oturum aralıklarını incelemek için aşağıda bir örnek verilmiştir:
Yukarıdaki örnekte, kullanıcı sayfayı görüntüledikçe zaman içinde birçok düzen kayması meydana gelir. Bu değerlerin her biri mavi bir çubukla gösterilir. Yukarıda mavi çubukların farklı yüksekliklere sahip olduğunu görürsünüz. Bunlar, her bir düzen kaymasının puanını temsil eder. 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. 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. Mevcut CLS tanımına benzer şekilde, her vardiyanın puanları toplanır, böylece her pencerenin puanı, bağımsız düzen kaymalarının toplamı olur.
İlk araştırmayı temel alarak, oturum aralıkları arasında 1 saniyelik bir boşluk seçtik ve bu boşluk, büyük ölçekli analizimizde iyi sonuç verdi. Dolayısıyla, yukarıdaki örnekte gösterilen "Oturum Boşluğu" 1 saniyedir.
Maksimum oturum aralığı neden kullanılmalı?
İlk araştırmamızda özetleme stratejilerini iki seçeneğe indirdik:
- Çok büyük oturum pencereleri (aralarında 5 saniyelik boşluk bulunan sınırlanmamış pencereler) için tüm oturum pencerelerinin ortalama puanı.
- Daha küçük oturum aralıkları için tüm oturum aralıklarının maksimum puanı (aralarında 1 saniyelik boşluk olacak şekilde 5 saniyeyle sınırlıdır).
İlk araştırmadan sonra, milyonlarca URL üzerinde büyük ölçekli bir analiz yapabilmek için her bir metriği Chrome'a ekledik. Büyük ölçekli analizde, aşağıdaki gibi düzen kayması kalıplarına sahip birçok URL bulduk:
Sağ altta, Oturum Penceresi 2'de yalnızca çok küçük bir düzen kayması olduğunu görebilirsiniz. Bu kayma, düşük bir puana neden olur. Bu, ortalama puanın oldukça düşük olduğu anlamına gelir. Peki geliştirici bu küçük düzen kaymasını düzeltirse ne olur? Daha sonra puan yalnızca Oturum Aralığı 1'de hesaplanır. Bu, sayfa puanının neredeyse iki katına çıktığı anlamına gelir. Geliştiricilerin düzen kaymalarını iyileştirip puanın düştüğünü görmek gerçekten kafa karıştırıcı ve caydırıcı olacaktır. Ayrıca, bu küçük düzen kaymasının kaldırılması kullanıcı deneyimi için biraz daha iyi olduğu için puanı kötüleştirmemelidir.
Ortalamalarla ilgili bu sorun nedeniyle daha küçük, sınırlı ve maksimum pencerelerle ilerlemeye karar verdik. Dolayısıyla, yukarıdaki örnekte Oturum Penceresi 2 yok sayılır ve yalnızca Oturum Penceresi 1'deki düzen kaymalarının toplamı raporlanır.
Neden 5 saniye?
Birden çok pencere boyutunu değerlendirdik ve iki sonuç bulduk:
- Kısa pencerelerde, sayfalar daha yavaş yüklenir ve kullanıcı etkileşimlerine verilen daha yavaş yanıtlar, düzen kaymalarını birden fazla pencereye böler ve puanı iyileştirebilir. Yavaşlamaları ödüllendirmemesi için pencereyi yeterince büyük tutmak istedik.
- Bazı sayfalarda sürekli olarak küçük düzen kaymaları vardır. Örneğin, her skor güncellemesinde biraz değişen bir maç skoru sayfası. Bu değişimler can sıkıcı olsa da zaman geçtikçe daha da rahatsız edici değildir. Bu nedenle, bu tür düzen kaymaları için pencerenin kapalı olduğundan emin olmak istedik.
Bu iki noktayı 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 durum sayfamın CLS puanını nasıl etkiler?
Bu güncelleme bir sayfanın CLS'sini sınırladığından bu değişiklik sonucunda hiçbir sayfanın puanı daha kötü olmayacak.
Analizimize göre, kaynakların% 55'i 75. yüzdelik dilimde CLS'de hiçbir değişiklik görmemiştir. Bunun nedeni, sayfalarında şu anda herhangi bir düzen kayması olmaması veya sahip oldukları kaymaların zaten tek bir oturum penceresiyle sınırlı olmasıdır.
Kaynakların geri kalanı, bu değişiklikle birlikte 75. yüzdelik dilimde daha yüksek puanlar görecek. Çoğu için yalnızca küçük bir iyileşme görülür ancak yaklaşık% 3'lük bir kesim, "iyileştirme gerekli" veya "kötü" bir puandan "iyi" bir puana sahipken puanlarının yükseldiğini görecektir. Bu sayfalar, önceki yayınımızda açıklandığı gibi sonsuz kaydırıcılar kullanma eğilimindedir veya çok sayıda yavaş kullanıcı arayüzü güncellemesine sahiptir.
Nasıl deneyebilirim?
Yakında yeni metrik tanımını kullanacak şekilde araçlarımızı güncelleyeceğiz. O zamana kadar, örnek JavaScript uygulamalarını veya Web Verileri uzantısının çatalını kullanarak herhangi bir sitede CLS'nin güncellenmiş sürümünü deneyebilirsiniz.
Önceki gönderiyi okumak ve geri bildirimde bulunmak için zaman ayıran herkese teşekkür ederiz!