Uzun ömürlü sayfalar için daha adil olmak amacıyla CLS metriğini iyileştirme planları.
Yayınlanma tarihi: 7 Nisan 2021
Chrome Hız Metrikleri Ekibi olarak kısa süre önce, CLS metriğini uzun süre açık olan sayfalar için daha adil hale getirme seçenekleriyle ilgili ilk araştırmamızı kısa bir süre önce özetledik. Çok sayıda faydalı geri bildirim aldık ve büyük ölçekli analizi tamamladıktan sonra metrikte yapmayı planladığımız değişikliği tamamladık: 1 saniyelik boşlukla, 5 saniyeyle sınırlı maksimum oturum süresi.
Ayrıntılar 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'daki en iyi seçenekleri uyguladık ve milyonlarca web sayfasındaki metrikleri geniş ölçekli bir şekilde analiz ettik. Her bir seçeneğin hangi tür sitelerde iyileştirme sağladığını ve seçeneklerin karşılaştırmasını kontrol ettik. Özellikle de farklı seçenekler tarafından farklı şekilde puanlanan sitelere baktık. Genel olarak şu sonuçları elde ettik:
- Tüm seçenekler, sayfa üzerinde harcanan süre ile düzen kayması puanı arasındaki korelasyonu azalttı.
- Seçeneklerin hiçbiri herhangi bir sayfa için daha kötü bir puanla sonuçlanmadı. Bu nedenle, bu değişikliğin sitenizin puanlarını düşüreceğinden endişelenmenize gerek yoktur.
Karar noktaları
Neden oturum aralığı?
Önceki gönderimizde, puan sınırsız bir şekilde artmamasını sağlarken düzen değişikliklerini gruplandırmak için birkaç farklı pencere stratejisinden bahsetmiştik. Geliştiricilerden aldığımız geri bildirimler, sayfa düzeni değişikliklerini en sezgisel şekilde gruplandırdığı için oturum aralığı stratejisini büyük oranda destekliyordu.
Oturum aralıklarını incelemek için aşağıdaki örneği inceleyin:
Yukarıdaki örnekte, kullanıcı sayfayı görüntülerken zaman içinde birçok düzen değişikliği gerçekleşmektedir. Her biri mavi bir çubukla temsil edilir. Yukarıda mavi çubukların farklı yüksekliklere sahip olduğunu göreceksiniz. Bu çubuklar, her bir düzen kaymasının puanını temsil eder. Oturum penceresi, ilk düzen kaymasıyla başlar ve düzen kayması olmayan bir boşluk bulunana kadar genişlemeye devam eder. Bir sonraki düzen kayması gerçekleştiğinde yeni bir oturum penceresi başlar. Düzen kayması olmayan üç boşluk olduğundan örnekte üç oturum aralığı vardır. CLS'nin mevcut tanımına benzer şekilde, her kaymanın puanları toplanır. Böylece her pencerenin puanı, tek tek düzen kaymalarının toplamı olur.
İlk araştırmamıza göre oturum aralıkları arasında 1 saniyelik bir boşluk seçtik ve bu boşluk büyük ölçekli analizimizde iyi performans gösterdi. Dolayısıyla, yukarıdaki örnekte gösterilen "Oturum Aralığı" 1 saniyedir.
Maksimum oturum aralığı neden önemlidir?
İlk araştırmamızda özetleme stratejilerini iki seçenekle sınırladık:
- Çok büyük oturum pencereleri (aralarında 5 saniyelik boşluk olan sınırsız pencereler) için tüm oturum pencerelerinin ortalama puanı.
- Daha kısa oturum aralıkları için tüm oturum aralıkları arasından alınan maksimum puan (aralarında 1 saniyelik boşluk olacak şekilde 5 saniyeyle sınırlıdır).
İlk araştırmadan sonra, milyonlarca URL'de geniş ölçekli analiz yapabilmek için her metriği Chrome'a ekledik. Geniş ölçekli analizde, aşağıdaki gibi düzen kaydırma kalıplarına sahip çok sayıda URL bulduk:
Sağ altta, 2. Oturum Penceresi'nde yalnızca tek bir küçük düzen kayması olduğunu ve bu nedenle çok düşük bir puan aldığını görebilirsiniz. Bu da ortalama puanın oldukça düşük olduğu anlamına gelir. Peki, geliştirici bu küçük düzen kaymasını düzeltse ne olur? Daha sonra puan yalnızca Oturum Aralığı 1'de hesaplanır. Bu, sayfanın puanının neredeyse iki kat arttığı anlamına gelir. Sadece skorun düştüğünü görmek için düzen kaymalarını iyileştirmek, geliştiriciler için gerçekten kafa karıştırıcı ve cesaret kırıcı olabilir. Bu küçük düzen kaymasını kaldırmak da kullanıcı deneyimi açısından kesinlikle biraz daha iyi olacaktır. Bu nedenle, puanın düşmesine neden olmayacaktır.
Ortalamalarla ilgili bu sorun nedeniyle, daha küçük, sınırlı maksimum pencerelerle devam etmeye karar verdik. Bu nedenle, yukarıdaki örnekte Oturum Aralığı 2 yoksayılır ve yalnızca Oturum Aralığı 1'deki düzen kaymalarının toplamı raporlanır.
Neden 5 saniye?
Birden fazla pencere boyutunu değerlendirdik ve iki şey bulduk:
- Kısa aralıklarda daha yavaş sayfa yüklemeleri ve kullanıcı etkileşimlerine verilen daha yavaş yanıtlar, düzen kaymalarını birden fazla pencereye bölerek puanı iyileştirebilir. Yavaşlamaların ödüllendirilmemesi için pencereyi yeterince geniş tutmayı istedik.
- Sürekli olarak küçük düzen değişiklikleri olan bazı sayfalar var. Örneğin, her skor güncellemesiyle biraz değişen bir spor skoru sayfası. Bu değişiklikler can sıkıcı olsa da zaman geçtikçe daha da can sıkıcı olmaz. Bu nedenle, bu tür düzen değişiklikleri için pencerenin sınırlandırılmasını 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ırdık ve pencere boyutu için 5 saniyenin iyi bir sınır olacağı sonucuna vardık.
Bu, sayfamın CLS puanını nasıl etkileyecek?
Bu güncelleme, sayfanın CLS'sini sınırlandırdığı için 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ç değişiklik görmeyecektir. Bunun nedeni, sayfalarında şu anda düzen kaydırma olmaması veya mevcut kaydırmaların tek bir oturum aralığına sınırlı olmasıdır.
Bu değişiklikle birlikte, kaynakların geri kalanı 75. yüzdelik dilimde daha iyi puanlar elde edecek. Çoğu kullanıcının puanı yalnızca biraz iyileşecek olsa da yaklaşık% 3'ünün puanı "iyileştirme gerektiriyor" veya "kötü" olarak değerlendirilen sayfalardan "iyi" olarak değerlendirilen sayfalara yükselecek. Bu sayfalarda sonsuz kaydırma çubuğu kullanılır veya önceki gönderimizde açıklandığı gibi çok sayıda yavaş kullanıcı arayüzü güncellemesi bulunur.
Nasıl deneyebilirim?
Yakında araçlarımızı yeni metrik tanımını kullanacak şekilde 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 okumaya zaman ayırıp geri bildirim gönderen herkese teşekkür ederiz.