Kümülatif Düzen Kayması (CLS), bir web sayfasının görsel kararlılığını ölçen bir ölçümdür. Metrik, kümülatif düzen kayması olarak adlandırılır çünkü her bir kaydırmanın puanı, sayfanın kullanım ömrü boyunca toplanır.
Tüm düzen değişiklikleri kötü kullanıcı deneyimleri olsa da, daha uzun süre açık olan sayfalarda daha fazla birikirler. Bu nedenle Chrome Hız Metrikleri Ekibi, bir sayfada geçirilen süre konusunda daha tarafsız olacak şekilde CLS metriğini iyileştirmek için yola çıktı.
Kullanıcıların yüklendikten sonra sayfalarda gezinirken veya kaydırırken genellikle olumsuz deneyimler yaşadıklarını tespit ettiğimiz için, metriğin tam sayfa ömrü boyunca kullanıcı deneyimine odaklanması önemlidir. Ancak bunun uzun ömürlü sayfaları, yani kullanıcının genellikle uzun süredir açık olduğu sayfaları nasıl etkilediğine dair endişeler duyduk. Daha uzun süre açık kalma eğiliminde olan birkaç farklı sayfa türü vardır; en yaygın olanlarından bazıları, sonsuz kaydırmalı sosyal medya uygulamaları ve tek sayfa uygulamalarıdır.
Yüksek CLS puanlarına sahip uzun ömürlü sayfaların dahili analizi, çoğu sorunun aşağıdaki kalıplardan kaynaklandığını ortaya çıkardı:
- İçeriği değiştiren sonsuz kaydırıcılar kullanıcı kaydırdıkça.
- Giriş işleyicilerin, herhangi bir yer tutucu veya iskelet kalıbı olmaksızın bir kullanıcı etkileşimine yanıt olarak kullanıcı arayüzünü güncellemesi 500 ms’den uzun sürüyor.
Geliştiricileri bu kullanıcı deneyimlerini iyileştirmeye teşvik ederken, aynı zamanda metriği iyileştirmek ve olası yaklaşımlar hakkında geri bildirim almak için çalışıyoruz.
Yeni bir ölçümün daha iyi olup olmadığına nasıl karar veririz? #
Metrik tasarıma dalmadan önce, fikirlerimizi çok çeşitli gerçek dünya web sayfalarında ve kullanım durumlarında değerlendirdiğimizden emin olmak istedik. Başlamak için küçük bir kullanıcı çalışması tasarladık.
Önce videolar kaydettik ve krom izleri çeşitli web siteleri aracılığıyla 34 kullanıcı yolculuğunun Kullanıcı yolculuklarını seçerken birkaç şeyi hedefledik:
- Haber ve alışveriş siteleri gibi çeşitli farklı türde siteler.
- İlk sayfa yükleme, kaydırma, tek sayfalık uygulama gezintileri ve kullanıcı etkileşimleri gibi çeşitli kullanıcı yolculukları.
- Sitelerde bireysel düzen kaymalarının hem sayısı hem de yoğunluğu çeşitliliği.
- Düzen kaymaları dışında sitelerde çok az olumsuz deneyim var.
41 meslektaşımızdan aynı anda iki video izlemelerini istedik ve düzen değişikliği açısından hangisinin daha iyi olduğunu derecelendirdik. Bu derecelendirmelerden, siteler için idealleştirilmiş bir sıralama düzeni oluşturduk. Kullanıcı sıralamasının sonuçları, çoğu kullanıcı gibi iş arkadaşlarımızın da yüklemeden sonra, özellikle kaydırma ve tek sayfalı uygulama gezintileri sırasında düzen değişiklikleri nedeniyle gerçekten hüsrana uğradığına dair şüphelerimizi doğruladı. Bazı sitelerin bu etkinlikler sırasında diğerlerine göre çok daha iyi kullanıcı deneyimi yaşadığını gördük.
Videolarla birlikte Chrome izlerini de kaydettiğimiz için, her bir kullanıcı yolculuğundaki bireysel düzen değişikliklerinin tüm ayrıntılarına sahiptik. Bunları, her bir kullanıcı yolculuğu için her bir fikir için metrik değerleri hesaplamak üzere kullandık. Bu, her bir metrik varyantının kullanıcı yolculuklarını nasıl sıraladığını ve her birinin ideal sıralamadan ne kadar farklı olduğunu görmemizi sağladı.
Hangi metrik fikirleri test ettik? #
Pencereleme stratejileri #
Yeni içerik parça parça geldikçe öğeler birden çok kez değişebildiğinden, genellikle sayfalarda birden çok düzen kayması birbirine yakın bir şekilde bir araya getirilir. Bu, vardiyaları birlikte gruplamak için teknikleri denememize neden oldu. Bunu başarmak için üç pencereleme yaklaşımına baktık:
- Yuvarlanan pencereler
- Sürgülü pencereler
- Oturum pencereleri
Bu örneklerin her birinde, sayfada zaman içinde değişen önem derecelerinde düzen kaymaları vardır. Her mavi çubuk, tek bir düzen kaymasını temsil eder ve uzunluk, bu kaymanın puanını temsil eder. Görüntüler, farklı pencereleme stratejilerinin zaman içinde düzen değişikliklerini nasıl gruplandırdığını göstermektedir.
Yuvarlanan pencereler #
En basit yaklaşım, sayfayı eşit boyutlu parçalardan oluşan pencerelere ayırmaktır. Bunlara yuvarlanan pencereler denir. Yukarıda, dördüncü çubuğun gerçekten ikinci yuvarlanan pencerede gruplandırılması gerektiği gibi göründüğünü fark edeceksiniz, ancak pencerelerin tümü sabit bir boyutta olduğundan, bunun yerine ilk pencerede. Sayfadaki yüklemelerin veya kullanıcı etkileşimlerinin zamanlamasında küçük farklılıklar varsa, aynı düzen kaymaları, yuvarlanan pencere sınırlarının farklı taraflarına düşebilir.
Sürgülü pencereler #
Aynı uzunlukta daha olası gruplamaları görmemizi sağlayan bir yaklaşım, potansiyel pencereyi zaman içinde sürekli olarak güncellemektir. Yukarıdaki görüntü her seferinde bir kayan pencere gösteriyor, ancak bir metrik oluşturmak için tüm olası kayan pencerelere veya bunların bir alt kümesine bakabiliriz.
Oturum pencereleri #
Sayfanın alanlarını birden çok düzen kayması ile tanımlamaya odaklanmak istiyorsak, her pencereyi bir vardiyada başlatabilir ve düzen kaymaları arasında belirli bir boyutta bir boşlukla karşılaşana kadar onu büyütmeye devam edebiliriz. Bu yaklaşım, düzen kaymalarını birlikte gruplandırır ve değişmeyen kullanıcı deneyiminin çoğunu yok sayar. Muhtemel sorunlardan biri, düzen kaymalarında boşluk yoksa, oturum pencerelerine dayalı bir metriğin, tıpkı mevcut CLS metriği gibi sınırsız büyüyebilmesidir. Bu yüzden bunu maksimum pencere boyutuyla da denedik.
Pencere boyutları #
Ölçüm, pencerelerin gerçekte ne kadar büyük olduğuna bağlı olarak çok farklı sonuçlar verebilir, bu nedenle birden fazla farklı pencere boyutu denedik:
- Her vardiya kendi penceresi olarak (penceresiz)
- 100 ms
- 300 ms
- 1 saniye
- 5 saniye
Özetleme #
Farklı pencereleri özetlemek için birçok yol denedik.
Yüzdelikler #
Maksimum pencere değerinin yanı sıra 95. yüzdelik dilim, 75. yüzdelik dilim ve medyana baktık.
Ortalama #
Ortalama pencere değerine baktık.
bütçeler #
Kullanıcıların fark etmeyeceği bazı minimum düzen değiştirme puanı olup olmadığını merak ettik ve puandaki bu “bütçe” üzerinden yerleşim değişikliklerini sayabiliriz. Dolayısıyla, çeşitli potansiyel “bütçe” değerleri için, bütçeyi aşan kaymaların yüzdesine ve bütçeyi aşan toplam kayma puanına baktık.
Diğer stratejiler #
Ayrıca, sayfadaki zamana bölünen toplam düzen kayması ve en kötü N ayrı vardiyanın ortalaması gibi, pencereleri içermeyen birçok stratejiye de baktık.
ilk sonuçlar #
Genel olarak, test ettik 145 farklı metrik tanımı yukarıdaki fikirlerin permütasyonlarına dayanmaktadır. Her metrik için, tüm kullanıcı yolculuklarını metrikteki puanlarına göre sıraladık ve ardından metrikleri ideal sıralamaya ne kadar yakın olduklarına göre sıraladık.
Bir taban çizgisi elde etmek için, tüm siteleri mevcut CLS puanlarına göre de sıraladık. CLS, diğer 13 stratejiyle berabere kalarak 32. sırada yer aldı, bu nedenle yukarıdaki stratejilerin çoğu permütasyonundan daha iyiydi. Sonuçların anlamlı olduğundan emin olmak için üç rastgele sıralama da ekledik. Beklendiği gibi, rastgele sıralamalar test edilen her stratejiden daha kötü sonuç verdi.
Analizimizden sonra, veri kümesi için fazla uygun olup olmadığımızı anlamak için bazı yeni düzen kaydırma videoları ve izleri kaydettik, bunları manuel olarak sıraladık ve yeni veri kümesi ile orijinal veri kümesi için metrik sıralamalarının çok benzer olduğunu gördük.
Sıralamalarda birkaç farklı strateji öne çıktı.
En iyi stratejiler #
Stratejileri sıraladığımızda, listenin başında üç tür strateji olduğunu gördük. Her biri kabaca aynı performansa sahipti, bu yüzden üçü üzerinde daha derin bir analizle ilerlemeyi planlıyoruz. Kullanıcı deneyimi dışında, aralarında karar verirken göz önünde bulundurmamız gereken faktörler olup olmadığını anlamak için geliştirici geri bildirimlerini de duymak isteriz. (Nasıl geri bildirimde bulunacağınızı öğrenmek için aşağıya bakın.)
Uzun pencerelerin yüksek yüzdelik dilimleri #
Birkaç pencereleme stratejisi, uzun pencere boyutlarında iyi çalıştı:
- 1 saniye sürgülü pencereler
- Oturum pencereleri, 1 saniye boşlukla 5 saniye ile sınırlandırıldı
- Oturum pencereleri, 1 saniye boşlukla sınırlandırıldı
Bunların hepsi hem 95. yüzdelik dilimde hem de maksimumda gerçekten iyi sıralandı.
Ancak bu kadar büyük pencere boyutları için, 95. yüzdelik dilimi kullanmak konusunda endişeliydik; genellikle yalnızca 4-6 pencereye bakıyorduk ve bunun 95. yüzdelik dilimini almak çok fazla enterpolasyon demekti. Metrik değer açısından enterpolasyonun ne yaptığı belli değil. Maksimum değer çok daha net, bu yüzden maksimumu kontrol ederek ilerlemeye karar verdik.
Uzun aralıklı oturum pencerelerinin ortalaması #
Aralarında 5 saniyelik boşluklar bulunan tüm sınırsız oturum pencerelerinin puanlarının ortalaması gerçekten iyi performans gösterdi. Bu stratejinin birkaç ilginç özelliği vardır:
- Sayfada düzen değişiklikleri arasında boşluklar yoksa, geçerli CLS ile tam olarak aynı puana sahip uzun bir oturum penceresi olur.
- Bu ölçüm, boşta kalma süresini doğrudan hesaba katmadı; sayfanın değişmediği zamanlarda değil, yalnızca sayfada meydana gelen kaymalara baktı.
Kısa pencerelerin yüksek yüzdelik dilimleri #
Maksimum 300 ms kayan pencere, 95. yüzdelik dilimin yanı sıra çok yüksek sırada yer aldı. Daha kısa pencere boyutu için, daha büyük pencere boyutlarına göre daha az yüzdelik enterpolasyon vardır, ancak “tekrarlanan” kayan pencereler hakkında da endişeliydik – iki çerçeve üzerinde bir dizi düzen kayması meydana gelirse, bunları içeren birden çok 300 ms pencere vardır. Maksimumu almak, yüzde 95’i almaktan çok daha net ve basittir. Bu yüzden yine maksimumu kontrol ederek ilerlemeye karar verdik.
İşe yaramayan stratejiler #
Hem düzen değişiklikleri olmadan hem de düzen değişiklikleriyle harcanan “ortalama” zaman deneyimine bakmaya çalışan stratejiler çok başarısız oldu. Herhangi bir pencereleme stratejisinin medyan veya yüzde 75’lik özetlerinden hiçbiri siteleri iyi bir şekilde sıralamadı. Düzenin toplamı da zaman içinde değişmedi.
Kabul edilebilir düzen değişiklikleri için bir dizi farklı “bütçeyi” değerlendirdik:
- Yerleşim yüzdesi, bir miktar bütçenin üzerine çıkar. Çeşitli bütçeler için bunların hepsi oldukça düşük sıralarda yer aldı.
- Bir miktar fazlalığın üzerinde ortalama düzen kayması. Bu stratejideki varyasyonların çoğu zayıf sonuç verdi, ancak büyük bir aralığın olduğu uzun bir oturumdaki ortalama fazlalık, neredeyse uzun boşlukların olduğu oturum pencerelerinin ortalaması kadar iyi sonuç verdi. Daha basit olduğu için yalnızca ikincisi ile ilerlemeye karar verdik.
Sonraki adımlar #
Daha büyük ölçekli analiz #
Çok daha geniş bir web sitesi grubu için gerçek dünyadaki kullanıma ilişkin verileri alabilmemiz için yukarıda listelenen en önemli stratejileri Chrome’da uyguladık. Daha büyük ölçekli analiz yapmak için siteleri metrik puanlarına göre sıralamak için benzer bir yaklaşım kullanmayı planlıyoruz:
- Tüm siteleri CLS’ye ve her yeni metrik adayına göre sıralayın.
- CLS ve her aday tarafından en farklı şekilde sıralanan siteler hangileridir? Bu sitelere baktığımızda beklenmedik bir şey buluyor muyuz?
- Yeni metrik adayları arasındaki en büyük farklar nelerdir? Farklılıklardan herhangi biri belirli bir adayın avantajları veya dezavantajları olarak öne çıkıyor mu?
- Yukarıdaki analizi tekrarlayın, ancak her sayfa yüklemesinde harcanan süreye göre gruplandırın. Kabul edilebilir düzen kaymasıyla uzun ömürlü sayfa yüklemelerinde beklenen bir gelişme görüyor muyuz? Kısa ömürlü sayfalar için beklenmeyen sonuçlar görüyor muyuz?
Yaklaşımımız hakkında geri bildirim #
Web geliştiricilerinden bu yaklaşımlar hakkında geri bildirim almayı çok isteriz. Yeni yaklaşımları değerlendirirken akılda tutulması gereken bazı şeyler:
Ne değişmiyor #
Yeni bir yaklaşımla pek çok şeyin değişmeyeceğini açıklığa kavuşturmak istiyoruz:
- Metrik fikirlerimizin hiçbiri, tek tek çerçeveler için düzen kaydırma puanlarının hesaplanma şeklini değiştirmez, yalnızca birden çok çerçeveyi özetleme biçimimizi değiştirir. Bu, düzen değişiklikleri için JavaScript API’sinin aynı kalacağı ve geliştirici araçlarının kullandığı Chrome izlemelerindeki temel olayların da aynı kalacağı, dolayısıyla WebPageTest ve Chrome DevTools gibi araçlardaki düzen kaydırma düzeltmelerinin aynı şekilde çalışmaya devam edeceği anlamına gelir.
- Metrikleri geliştiricilerin benimsemesini kolaylaştırmak için çok çalışmaya devam edeceğiz. web-hayati kitaplığıweb.dev’de belgeleme ve Lighthouse gibi geliştirici araçlarımızda raporlama.
Metrikler arasındaki dengeler #
En iyi stratejilerden biri, düzen kaydırma pencerelerini ortalama olarak özetler ve geri kalanı maksimum pencereyi bildirir. Çok uzun süredir açık olan sayfalar için, ortalama muhtemelen daha temsili bir değer bildirecektir, ancak genel olarak geliştiricilerin tek bir pencerede işlem yapması daha kolay olacaktır; ne zaman gerçekleştiğini, değişen öğeleri vb. günlüğe kaydedebilirler. Geliştiriciler için hangisinin daha önemli olduğu konusunda geri bildirim almak isteriz.
Sürgülü veya oturum pencerelerini daha kolay anlıyor musunuz? Farklılıklar sizin için önemli mi?
Geribildirim nasıl verilir? #
Yeni düzen kaydırma metriklerini herhangi bir sitede deneyebilirsiniz. örnek JavaScript uygulamaları veya bizim Core Web Vitals uzantısının çatalı.
Lütfen geri bildiriminizi bize e-posta ile gönderin. web-hayati-geri bildirim Google grubu, “[Layout Shift Metrics]” konu satırında. Ne düşündüğünüzü duymak için gerçekten sabırsızlanıyoruz!