Cumulative Layout Shift metriğini iyileştirme planlarımız hakkında bilgi edinin ve görüşlerinizi bizimle paylaşın.
Cumulative Layout Shift (CLS), web sayfasının görsel kararlılığını ölçen bir metriktir. Sayfanın ömrü boyunca her kaymanın puanı toplandığı için, bu metriğe kümülatif düzen kayması adı verilir.
Tüm düzen kaymaları kötü kullanıcı deneyimleri olsa da daha uzun süre açık olan sayfalarda daha fazla katkı sağlıyor. Bu nedenle Chrome Hız Metrikleri Ekibi, CLS metriğini sayfada geçirilen süreyi daha nötr olacak şekilde iyileştirmek için kolları sıvadı.
Kullanıcıların yüklemeden sonra, sayfayı kaydırırken veya gezinirken genellikle olumsuz deneyimler yaşadıklarını tespit ettik. Bu nedenle, metriğin tüm sayfa ömrü boyunca kullanıcı deneyimine odaklanması önemlidir. Ancak bunun uzun ömürlü sayfaları (kullanıcıların genellikle uzun süredir açık olan sayfaları) nasıl etkilediği konusunda 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 sayfalık uygulamalardır.
CLS puanı yüksek olan uzun ömürlü sayfaların dahili bir analizi, sorunların çoğunun aşağıdaki kalıplardan kaynaklandığını göstermiştir:
- Kullanıcı ekranı kaydırırken sonsuz kaydırma kaydırma çubuğu içeriği kaydırıyor.
- Herhangi bir yer tutucu veya iskelet kalıbı olmadan, kullanıcı etkileşimine yanıt olarak kullanıcı arayüzünü güncellemesi 500 ms'den uzun süren giriş işleyiciler.
Geliştiricilere bu kullanıcı deneyimlerini geliştirmelerini teşvik etmekle birlikte, metriği iyileştirmeye çalışıyor ve olası yaklaşımlarla ilgili geri bildirim almak için de çalışıyoruz.
Yeni bir metriğin daha iyi olup olmadığına nasıl karar verebiliriz?
Metrik tasarıma geçmeden önce, fikirlerimizi gerçek dünyadaki çok çeşitli web sayfaları ve kullanım alanları üzerinde değerlendirdiğimizden emin olmak istedik. Başlangıç olarak küçük bir kullanıcı araştırması tasarladık.
Öncelikle, çeşitli web sitelerindeki 34 kullanıcı yolculuğunun videolarını ve Chrome izlerini kaydettik. Kullanıcı yolculuklarını seçerken birkaç hedef belirledik:
- Haber ve alışveriş siteleri gibi çeşitli türlerde siteler.
- İlk sayfa yükleme, kaydırma, tek sayfada uygulama gezinmeleri ve kullanıcı etkileşimleri gibi çeşitli kullanıcı yolculukları.
- Sitelerdeki tek tek düzen kaymalarının sayısı ve yoğunluğu.
- Düzen kaymaları dışında, sitelerde az sayıda olumsuz deneyim.
41 iş arkadaşımızdan aynı anda iki video izlemesini istedik ve düzen değişikliği açısından hangi ikilinin daha iyi olduğunu değerlendirdik. Bu derecelendirmeleri kullanarak siteler için idealleştirilmiş bir sıralama sıralaması oluşturduk. Kullanıcı sıralaması sonuçları, çoğu kullanıcı gibi iş arkadaşlarımızın da, özellikle kaydırma ve uygulamalarda gezinme sırasında, yükleme sonrasında yapılan düzen değişiklikleri nedeniyle sinirlendiğine dair şüphelerimizi doğruladı. Bazı sitelerin bu etkinlikler sırasında diğerlerine göre çok daha iyi kullanıcı deneyimlerine sahip olduğunu gördük.
Videolarla birlikte Chrome izlerini kaydettiğimizden, kullanıcı yolculuğundaki her bir düzen kaymasının tüm ayrıntılarına sahip olduk. Bunları kullanarak her bir kullanıcı yolculuğu için her fikrin metrik değerlerini hesapladı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 fikirlerini test ettik?
Aralık stratejileri
Yeni içerik parça parça geldikçe öğeler birden çok kez kayabildiğinden, genellikle sayfalarda birden çok düzen kayması birbirine yakın bir şekilde birbirine bağlanır. Bu da bizi, vardiyaları birlikte gruplandırmaya yönelik teknikleri denememize yöneltti. Bunu başarmak için, üç pencere yaklaşımını inceledik:
- Pencereleri çevirme
- Sürgülü pencereler
- Oturum aralıkları
Bu örneklerin her birinde, sayfada zamanla değişen önem derecesi değişen düzen kaymaları vardır. Her mavi çubuk tek bir düzen kaymasını ve uzunluk da bu kaymanın puanını temsil eder. Resimler, farklı aralıklandırma stratejilerinin zaman içinde düzen kaymalarını nasıl gruplandırdığını göstermektedir.
Pencereleri çevirme
En basit yaklaşım, sayfayı eşit büyüklükte parçalardan oluşan pencerelere bölmektir. Bunlara, açılır pencere adı verilir. Yukarıda dördüncü çubuğun ikinci yuvarlanan pencerede gruplanması gerektiğini fark edeceksiniz, ancak tüm pencereler sabit bir boyutta olduğundan, ilk pencerededir. Yükleme zamanlarında veya sayfadaki kullanıcı etkileşimlerinde küçük farklar varsa aynı düzen kaymaları, azalan pencere sınırlarının farklı kenarlarına denk gelebilir.
Sürgülü pencereler
Aynı uzunluktaki daha fazla olası gruplamayı görmemizi sağlayan yaklaşım, olası aralığı zaman içinde sürekli olarak güncellemektir. Yukarıdaki resimde aynı anda bir kayan pencere gösterilmektedir, ancak bir metrik oluşturmak için olası tüm kayma pencerelere veya bunların bir alt kümesine bakabiliriz.
Oturum aralıkları
Sayfadaki patlamalarla düzen kaymalarının olduğu alanları tanımlamaya odaklanmak istersek, her pencereyi bir vardiyada başlatabilir ve düzen kaymaları arasında belirli bir boyutta boşlukla karşılaşana kadar pencereyi büyütmeye devam edebilirdik. Bu yaklaşım, düzenin birlikte kaymasını gruplar ve değişmeyen kullanıcı deneyiminin büyük bir kısmını yoksayar. Olası sorunlardan biri, düzen kaymalarında boşluk olmaması durumunda, oturum aralıklarına dayalı bir metriğin, mevcut CLS metriğinde olduğu gibi sınırsız olarak büyümesidir. Bu nedenle, bunu bir maksimum pencere boyutuyla da denedik.
Pencere boyutları
Bu metrik, pencerelerin aslında ne kadar büyük olduğuna bağlı olarak çok farklı sonuçlar verebilir. Bu yüzden, birden fazla farklı pencere boyutu denedik:
- Her bir kaydırma kendi penceresi olarak (pencere yok)
- 100 ms.
- 300 ms.
- 1 saniye
- 5 saniye
Özetleme
Farklı pencereleri özetlemek için birçok yöntem denedik.
Yüzdelik dilimler
Maksimum aralık değeri ile 95. yüzdelik dilim, 75. yüzdelik dilim ve ortanca değeri inceledik.
Ortalama
Ortalama aralık değerine baktık.
Bütçe sayısı
Belki de kullanıcıların fark etmediği bir minimum düzen kayması puanı olup olmadığını merak ediyorduk. Puandaki düzen kaymalarını bu "bütçenin" üzerinde sayabiliriz. Çeşitli potansiyel "bütçe" değerleri için, bütçe üzerindeki değişimlerin yüzdesine ve bütçe üzerinden toplam değişim puanına baktık.
Diğer stratejiler
Ayrıca, toplam düzen kaymasının sayfada geçirilen süreye bölünmesiyle elde edilen değer ve en kötü N bağımsız değişimin ortalaması gibi, zaman aralıkları içermeyen birçok stratejiyi de inceledik.
İlk sonuçlar
Genel olarak yukarıdaki fikirlerin permütasyonlarını temel alarak 145 farklı metrik tanımını test ettik. Her metrik için tüm kullanıcı yolculuklarını metrikteki puanına göre sıraladık ve ardından metrikleri ideal sıralamaya ne kadar yakın olduklarına göre sıraladık.
Referans değer elde etmek için, tüm siteleri mevcut CLS puanlarına göre de sıraladık. CLS, diğer 13 stratejiyle beraber 32. sırada yer aldı. Bu nedenle, yukarıdaki stratejilerin çoğu permütasyonundan daha iyiydi. Sonuçların anlamlı olmasını sağlamak için üç rastgele sıralama da ekledik. Beklendiği gibi, rastgele sıralamalar test edilen tüm stratejilerden daha kötü sonuç verdi.
Veri kümesinin aşırı uyum sağlayıp sağlayamadığımızı anlamak için analizimizden sonra bazı yeni düzen kayması videoları ve izleri kaydettik, bunları manuel olarak sıraladık ve metrik sıralamalarının yeni veri kümesi ile orijinal veri kümesi için çok benzer olduğunu gördük.
Sıralamalarda birkaç farklı strateji öne çıktı.
En iyi stratejiler
Stratejileri sıraladığımızda, üç strateji türünün listenin en üstünde yer aldığını tespit ettik. Her biri aşağı yukarı aynı performansa sahipti. Bu nedenle, bu üçüne ilişkin daha ayrıntılı bir analiz yaparak ilerlemeyi planlıyoruz. Bunlar arasında karar verirken kullanıcı deneyimi dışında dikkate almamız gereken faktörlerin olup olmadığını anlamak için geliştiricilerin geri bildirimlerini de bekliyoruz. (Nasıl geri bildirimde bulunacağınızı öğrenmek için aşağıya bakın.)
Uzun pencerelerin yüksek yüzdelik dilimleri
Uzun pencere boyutları için birkaç pencere ayarlama stratejisi işe yaradı:
- 1 saniyelik sürgülü pencereler
- Oturum aralıkları 1 saniyelik boşlukla 5 saniyeyle sınırlandı
- Oturum aralıkları 1 saniyelik boşlukla kapatıldı
Bunların tümü, hem 95. yüzdelik dilimde hem de maksimum yüzdede oldukça iyi bir sıralamaya sahipti.
Ancak bu kadar büyük pencere boyutları söz konusu olduğunda 95. yüzdelik dilimi kullanma konusunda endişelerimiz vardı. Genellikle yalnızca 4-6 pencereye bakıyorduk ve bunun 95. yüzdelik dilimi için yüksek miktarda interpolasyon yapmak gerekiyordu. İnterpolasyonun metrik değer açısından ne yaptığı açık değildir. Maksimum değer çok daha net olduğundan maksimum değeri kontrol etmeye karar verdik.
Uzun boşluklar bulunan oturum aralıklarının ortalaması
Aralarında 5 saniyelik boşluklar bulunan sınırlandırılmamış tüm oturum aralıklarının puanlarının ortalaması gerçekten iyi performans gösterdi. Bu stratejinin birkaç ilginç özelliği vardır:
- Sayfadaki düzen kaymaları arasında boşluk yoksa mevcut CLS ile tam olarak aynı puana sahip uzun bir oturum penceresi olur.
- Bu metrik doğrudan boşta kalma süresini hesaba katmıyordu. Yalnızca sayfada gerçekleşen kaymalara bakıyordu, sayfanın değişmediği zamanlardaki kaymalara bakıyordu.
Kısa pencerelerin yüksek yüzdelik dilimleri
Maksimum 300 ms'lik kayan pencere, oldukça yüksek bir sırada yer alır ve 95. yüzdelik dilimdir. Daha kısa pencere boyutları için, daha büyük pencere boyutlarından daha az yüzdelik dilim interpolasyon vardır, ancak aynı zamanda "tekrarlanan" kayan pencerelerle ilgili endişelerimiz de vardır. İki kare üzerinde bir dizi düzen kayması gerçekleşirse, bunları da içeren birden fazla 300 ms'lik pencere mevcuttur. Maksimum değeri belirlemek, 95. yüzdelik dilimi almaktan çok daha net ve basittir. Yine maksimum tutarı kontrol etmeye karar verdik.
İşe yaramayan stratejiler
Düzen kaymaları olmadan ve düzen kaymaları ile harcanan "ortalama" zaman deneyimine bakmaya çalışan stratejiler çok kötü sonuç verdi. Herhangi bir aralık stratejisindeki ortanca değer veya 75. yüzdelik dilim özetlerinin hiçbiri siteleri iyi sıralamamıştır. Ayrıca, düzenin toplamı zaman içinde kaymamıştır.
Kabul edilebilir düzen değişiklikleri için bir dizi farklı "bütçeyi" değerlendirdik:
- Bütçenin üzerindeki düzen kaymalarının yüzdesi. Farklı bütçeler için bunların hepsi oldukça kötü bir sıralama elde etti.
- Bir miktar aşan ortalama düzen kayması. Bu stratejideki varyasyonların çoğu kötü sonuç verdi, ancak büyük farkla uzun bir oturumun ortalama fazlalığı, uzun boşluklar bulunan oturum aralıklarının ortalamasıyla neredeyse aynıydı. Daha basit olduğu için yalnızca ikincisini kullanmaya karar verdik.
Sonraki adımlar
Büyük ölçekli analiz
Yukarıda belirtilen en iyi stratejileri Chrome'da uyguladık, böylece çok daha büyük bir web sitesi grubu için gerçek dünyadaki kullanım verilerini alabiliriz. Daha büyük ölçekli analiz yapmak için, siteleri metrik puanlarına dayanarak sıralama konusunda benzer bir yaklaşım uygulamayı planlıyoruz:
- Tüm siteleri CLS'ye ve her yeni metrik adayına göre sıralayın.
- CLS ve her adaya göre en farklı siteler hangileri? Bu sitelere baktığımızda beklenmedik bir durumla karşılaşır mıyız?
- Yeni metrik adayları arasındaki en büyük farklar nelerdir? Belirli bir adayın avantajları veya dezavantajları arasında öne çıkan noktalar var mı?
- Yukarıdaki analizi tekrarlayın ancak her sayfa yüklemesinde harcanan zamana göre gruplandırma yapın. Kabul edilebilir düzen değişikliğiyle uzun süreli sayfa yüklemelerinde beklenen bir iyileşme görüyor muyuz? Kısa ömürlü sayfalar için beklenmedik sonuçlar görüyor muyuz?
Yaklaşımımızla ilgili geri bildirim
Web geliştiricilerinden bu yaklaşımlarla ilgili geri bildirim almak isteriz. Yeni yaklaşımları değerlendirirken aşağıdaki noktaları göz önünde bulundurun:
Neler değişmiyor?
Yeni bir yaklaşımla birçok şeyin değişmeyeceğini belirtmek istiyoruz:
- Metrik fikirlerimizin hiçbiri bağımsız karelerin düzen kayması puanlarının hesaplanma şeklini değiştirmez, yalnızca birden fazla kareyi özetleme yöntemimizi değiştirir. Bu, düzen kaymaları için JavaScript API'sinin ve geliştirici araçlarının kullandığı Chrome izlerinde temel etkinliklerin de aynı kalacağı anlamına gelir. Bu nedenle, düzen kayması WebPageTest ve Chrome Geliştirici Araçları gibi araçlarda aynı şekilde çalışmaya devam eder.
- Web verileri kitaplığındaki metrikleri, web.dev'de belgelemeyi ve Lighthouse gibi geliştirici araçlarımızı raporlamayı da içeren metrikleri geliştiricilerin kolayca benimsemesini sağlamak için yoğun bir şekilde çalışmaya devam edeceğiz.
Metrikler arasındaki dengeler
En iyi stratejilerden biri düzen kayması aralıklarını ortalama olarak, geri kalanı ise maksimum aralığı bildirir. Çok uzun bir süre açık olan sayfalar için ortalama değer muhtemelen daha temsili bir değer bildirir, ancak genel olarak geliştiricilerin tek bir pencerede işlem yapması daha kolay olacaktır. Böylece, ne zaman oluştuğunu, kayan öğeleri vb. günlüğe kaydedebilirler. Geliştiriciler için hangisinin daha önemli olduğuyla ilgili geri bildirimlerinizi öğrenmek isteriz.
Kayan pencerelerin mi yoksa oturum pencerelerinin mi anlaşılması daha kolay oldu? Farklılıklar sizin için önemli mi?
Nasıl geri bildirim gönderilir?
Örnek JavaScript uygulamalarımızı veya Core Web Vitals uzantımızı kullanarak yeni düzen kayması metriklerini herhangi bir sitede deneyebilirsiniz.
Lütfen geri bildiriminizi, konu satırında "[Layout Shift Metrics]" yazarak web-vitals-feedback Google grubumuza e-postayla gönderin. Düşüncelerinizi öğrenmek için sabırsızlanıyoruz!