Cumulative Layout Shift metriğini iyileştirme planlarımız hakkında bilgi edinin ve bize geri bildirimde bulunun.
Cumulative Layout Shift (CLS), web sayfasının görsel kararlılığını ölçen bir metriktir. Her bir değişimin puanı sayfanın kullanım süresi boyunca toplandığından bu metriğe kümülatif düzen kayması adı verilir.
Tüm düzen kaymaları olumsuz kullanıcı deneyimi sağlasa da daha uzun açık sayfalarda daha fazla katkı yapar. Bu nedenle Chrome Hız Metrikleri Ekibi, CLS metriğini bir sayfada geçirilen süreden daha nötr olacak şekilde iyileştirmek için kolları sıvadı.
Kullanıcıların sayfa yüklendikten sonra sayfayı kaydırırken veya gezinirken olumsuz bir deneyim yaşadığı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ının genellikle uzun süre açık olduğu sayfalar) nasıl etkilediğine dair endişeler duyduk. Daha uzun süre açık kalan birkaç farklı sayfa türü vardır. En yaygın olanlardan bazıları sonsuz kaydırma ve tek sayfalık uygulamalara sahip sosyal medya uygulamalarıdır.
CLS puanları yüksek olan uzun ömürlü sayfalar üzerinde yapılan bir analizde, çoğu sorunun aşağıdaki örüntülerden kaynaklandığı tespit edilmiştir:
- Kullanıcı ekranı kaydırırken sonsuz kaydırıcının içeriğin yerini değiştirmesi.
- Herhangi bir yer tutucu veya iskelet kalıbı olmadan, kullanıcı etkileşimine yanıt olarak kullanıcı arayüzünü güncellemek için 500 ms'den uzun süren giriş işleyiciler.
Geliştiricilerin bu kullanıcı deneyimlerini iyileştirmelerine teşvik etmekle birlikte, metriği iyileştirmek ve olası yaklaşımlarla ilgili geri bildirim almak için de çalışıyoruz.
Yeni bir metriğin daha iyi olduğuna nasıl karar verebiliriz?
Metrik tasarımına geçmeden önce, fikirlerimizi gerçek dünyadaki çok çeşitli web sayfaları ve kullanım alanlarında değerlendirdiğimizden emin olmak istedik. Başlangıç olarak küçük bir kullanıcı çalışması tasarladık.
İlk olarak, çeşitli web sitelerinde gerçekleşen 34 kullanıcı yolculuğunun Chrome izlerini ve videolarını kaydettik. Kullanıcı yolculuklarını seçerken birkaç şeyi hedefledik:
- Haber ve alışveriş siteleri gibi çeşitli türde siteler.
- İlk sayfa yükleme, kaydırma, tek sayfalık uygulamada gezinme 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.
- Sitelerde düzen kaymaları dışında az sayıda olumsuz deneyim yaşandı.
41 iş arkadaşımızdan aynı anda iki video izlemelerini istedik ve bu videolar düzen kayması açısından hangisinin daha iyi olduğunu gösterdi. Bu derecelendirmeleri kullanarak sitelerin idealleştirilmiş bir sıralama düzeni oluşturduk. Kullanıcı sıralamasının sonuçları, çoğu kullanıcı gibi meslektaşlarımızın yükleme sonrası, özellikle de kaydırma ve tek sayfalık uygulamada gezinirken hayal kırıklığına uğradığına dair şüphelerimizi doğruladı. Bu etkinlikler sırasında bazı sitelerin diğerlerine göre çok daha iyi kullanıcı deneyimlerine sahip olduğunu gördük.
Videolarla birlikte Chrome izlerini de kaydettiğimizden, her kullanıcı yolculuğundaki her bir düzen değişikliğiyle ilgili tüm ayrıntılara sahip olduk. Bunları, her kullanıcı yolculuğunda her fikrin metrik değerlerini hesaplamak için 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 fikirlerini test ettik?
Aralık oluşturma stratejileri
Yeni içerik parça parça gelirken öğeler birden çok kez kayabildiğinden, genellikle sayfalarda birbirine yakın birden fazla düzen kayması olur. Bu durum, vardiyaları birlikte gruplandırma tekniklerini denememizi sağladı. Bu amaca ulaşmak için üç pencere yaklaşımını inceledik:
- Dönen pencereler
- Kayan pencereler
- Oturum aralıkları
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ı, uzunluk ise bu değişimin puanını temsil eder. Resimlerde, farklı aralık oluşturma stratejilerinin zaman içinde düzen kaymalarını gruplandırma şekli gösterilmektedir.
Dönen pencereler
En basit yaklaşım, sayfayı eşit boyutlarda parçalardan oluşan pencerelere ayırmaktır. Bunlara yuvarlanan pencereler denir. Yukarıda, dördüncü çubuğun gerçekten ikinci yuvarlanan pencerede gruplanması gerektiği gibi göründüğünü, ancak pencerelerin hepsi sabit boyutta olduğu için bunun yerine ilk pencerede bulunduğunu fark edeceksiniz. Sayfadaki yükleme zamanlaması veya kullanıcı etkileşimleri arasında küçük farklar varsa aynı düzen kaymaları, yuvarlanan pencere sınırlarının farklı taraflarında da olabilir.
Kayan pencereler
Aynı uzunluktaki daha fazla olası gruplamayı görmemizi sağlayan bir yaklaşım, potansiyel aralığı zaman içinde sürekli olarak güncellemektir. Yukarıdaki resimde, aynı anda yalnızca bir kayan pencere gösterilmektedir. Ancak metrik oluşturmak için olası tüm kayan pencerelere veya bunların bir alt kümesine bakabiliriz.
Oturum aralıkları
Sayfanın düzen kaymalarının patlama yaptığı alanlarını belirlemeye odaklanmak istersek her pencereyi bir vardiyada başlatabilir ve düzen kaymaları arasında belirli bir boyutta boşlukla karşılaşana kadar büyütmeye devam edebilirdik. Bu yaklaşım, düzen kaymalarını birlikte gruplandırır ve değişmeyen kullanıcı deneyiminin büyük bir kısmını göz ardı eder. Olası sorunlardan biri, düzen kaymalarında boşluk yoksa oturum aralıklarını temel alan bir metriğin, mevcut CLS metriği gibi sınırsız büyüyebilmesidir. Biz de bunu maksimum pencere boyutuyla denedik.
Pencere boyutları
Bu metrik, 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 geçiş 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ğerine, ayrıca 95. yüzdelik dilim, 75. yüzdelik dilim ve ortanca değere baktık.
Ortalama
Ortalama pencere değerine baktık.
Bütçe sayısı
Kullanıcıların fark etmeyecekleri bir minimum düzen kayması puanı olup olmadığını ve sadece bu "bütçenin" üzerindeki düzen kaymalarını puana ekleyebildik. Bu nedenle, çeşitli potansiyel "bütçe" değerleri için bütçe üzerindeki değişimlerin yüzdesine ve bütçe üzerindeki toplam değişim puanına baktık.
Diğer stratejiler
Toplam düzen kaymasının sayfada geçirilen süreye bölümü ve en kötü N bağımsız değişimin ortalaması gibi, pencereler içermeyen birçok stratejiyi de inceledik.
İlk sonuçlar
Genel olarak, yukarıdaki fikirlerin permütasyonlarına dayalı olarak 145 farklı metrik tanımını test ettik. Her bir 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.
Temel çizgisi oluşturmak için tüm siteleri mevcut CLS puanlarına göre sıraladık. CLS, diğer 13 stratejiyle beraber 32. sıraya yerleşti. Bu nedenle, yukarıdaki stratejilerin çoğu permütasyonundan daha iyiydi. Sonuçların anlamlı olması 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ümesine fazla uyum sağlayıp sağlayamayacağımızı anlamak için, analizlerimizden sonra bazı yeni düzen kayması 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, üç strateji türünün listenin en üstünde yer aldığını gördük. Her biri aşağı yukarı aynı performansa sahipti. Bu nedenle, üçü hakkında daha ayrıntılı bir analizle ilerlemeyi planlıyoruz. Kullanıcı deneyimi dışında kalan faktörler arasında karar verirken dikkate almamız gereken faktörler olup olmadığını anlamak için geliştiricilerin geri bildirimlerini de almak isteriz. (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ında birkaç aralıklandırma stratejisi işe yaradı:
- 1 saniyelik sürgülü pencereler
- 1 saniyelik boşlukla 5 saniyeyle sınırlı oturum aralıkları
- Oturum aralıkları 1 saniyelik boşlukla kaldırıldı
Bunların tümü hem 95. yüzdelik dilimde hem de maksimum seviyede gerçekten iyi bir sıralamaya sahipti.
Ancak bu tür büyük pencere boyutları için 95. yüzdelik dilimi kullanma konusunda endişelerimiz vardı. Genellikle yalnızca 4-6 pencereye bakıyorduk ve bunun 95. yüzdelik dilimini almak da çok fazla interpolasyon demekti. İnterpolasyonun, metrik değeri açısından ne yaptığı net değil. Maksimum değer daha net olduğu için maksimum değeri kontrol etme kararı aldık.
Uzun boşluklar içeren oturum aralıklarının ortalaması
Aralarında 5 saniyelik boşluk bulunan tüm sınırlanmamış oturum aralıklarının puanlarının ortalaması çok iyi bir performans gösterdi. Bu stratejinin birkaç ilginç özelliği var:
- Sayfada düzen kaymaları arasında boşluk yoksa, geçerli CLS ile tam olarak aynı puana sahip uzun bir oturum aralığı elde edilir.
- Bu metrikte boşta kalma süresi doğrudan dikkate alınmadı. Sayfa değişmediği zamanlara değil, yalnızca sayfada gerçekleşen kaymalara bakıldı.
Kısa pencerelerin yüksek yüzdelik dilimleri
Maksimum 300 ms'lik kayan pencere, 95. yüzdelik dilimin yanı sıra çok üst sırada sıralanır. Daha kısa pencere boyutu için daha büyük pencere boyutlarına göre daha az yüzdelik interpolasyon söz konusudur, ancak kayan pencerelerde "tekrarlanan" pencereler de dikkate alınmıştır. İki kare üzerinde bir dizi düzen kayması gerçekleşirse bunları içeren birden çok 300 ms'lik pencereler vardır. Maksimum değeri almak, 95. yüzdelik dilimi almaktan çok daha net ve basittir. Böylece yine maksimum değeri kontrol etmeye karar verdik.
İşe yaramayan stratejiler
Hem düzen kaymaları olmadan hem de düzen kaymalarıyla geçirilen "ortalama" deneyime bakmaya çalışan stratejiler çok kötü performans gösterdi. Herhangi bir aralık stratejisine ait ortanca veya 75. yüzdelik dilim özetlerinin hiçbiri, siteleri iyi sıralayamadı. Düzenlerin toplamı da zaman içinde kaymadı.
Kabul edilebilir düzen kaymaları için bir dizi farklı "bütçeyi" değerlendirdik:
- Bir miktar bütçenin üzerindeki düzen kaymalarının yüzdesi. Çeşitli bütçelerde, bunların hepsi oldukça düşük bir sıralamaya sahipti.
- Biraz fazlalıktan ortalama düzen kayması. Bu stratejideki çoğu varyasyon kötü performans gösterdi ancak geniş bir boşluğun bulunduğu uzun bir oturumdaki ortalama fazlası, uzun boşluklar içeren oturum aralıklarının ortalamasına yakındı. Daha basit olduğu için yalnızca ikincisini seçmeye karar verdik.
Sonraki adımlar
Büyük ölçekli analiz
Çok daha büyük web sitelerinin gerçek dünyadaki kullanımına ilişkin verileri alabilmek için Chrome'da yukarıda listelenen en iyi stratejileri uyguladık. Daha büyük ölçekli bir analiz yapmak için, siteleri metrik puanlarına göre sıralarken benzer bir yaklaşım kullanmayı planlıyoruz:
- Tüm siteleri CLS'ye ve her yeni metrik adayına göre sıralayın.
- CLS'ye ve her bir adaya göre en farklı sıralama hangi siteler? Bu sitelere baktığımızda beklenmedik bir durumla karşılaşıyor muyuz?
- Yeni metrik adayları arasındaki en büyük farklar nelerdir? Farklılıklardan herhangi biri, belirli bir adayın avantaj veya dezavantajı olarak öne çıkıyor mu?
- Yukarıdaki analizi tekrarlayın, ancak her sayfa yüklemesinde harcanan zamana göre gruplama yapın. Kabul edilebilir düzen kaymasıyla uzun süreli sayfa yüklemeleri için beklenen bir iyileşme görüyor muyuz? Kısa süreli 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 aklınızda bulundurmanız gereken bazı noktalar:
Neler değişmiyor?
Yeni yaklaşımla birçok şeyin değişmeyeceğini belirtmek istiyoruz:
- Metrik fikirlerimizden hiçbiri, tek tek karelerin düzen kayması puanlarının hesaplanma şeklini değiştirmez, yalnızca birden fazla kareyi özetleme şeklimizi değiştirir. Bu, düzen kaymaları için JavaScript API'sinin aynı kalacağı ve geliştirici araçlarının kullandığı Chrome izlerindeki temel etkinliklerin de aynı kalacağı anlamına gelir. Bu nedenle, WebPageTest ve Chrome DevTools gibi araçlarda düzen kayması aynı şekilde çalışmaya devam edecektir.
- Web-vitals kitaplığına dahil etmek, web.dev'de belgelemek ve Lighthouse gibi geliştirici araçlarımızda raporlamak dahil olmak üzere, metrikleri geliştiricilerin kolayca benimsemelerini sağlamak için yoğun şekilde çalışmaya devam edeceğiz.
Metrikler arasındaki dengeler
En başarılı stratejilerden biri düzen kayması pencerelerini ortalama olarak özetler, geri kalanlar ise maksimum aralığı raporlar. Çok uzun süre açık olan sayfalar için ortalama, muhtemelen daha iyi temsili bir değer bildirecektir, ancak genel olarak geliştiricilerin tek bir pencerede işlem yapması daha kolay olacaktır; ne zaman oluştuğunu, kayan öğeleri vb. günlüğe kaydedebilirler. Hangisinin geliştiriciler için daha önemli olduğu konusunda geri bildirim almak isteriz.
Kaydırma veya oturum aralıklarının anlaşılmasının daha kolay olduğunu düşünüyor musunuz? Farklar sizin için önemli mi?
Nasıl geri bildirim gönderilir?
Örnek JavaScript uygulamalarımızı veya Core Web Vitals uzantısına ait çatalımızı kullanarak herhangi bir sitede yeni düzen kayması metriklerini deneyebilirsiniz.
Lütfen geri bildiriminizi web-vitals-feedback Google grubumuza, konu satırında "[Layout Shift Metrics]" ifadesi bulunan bir e-posta ile gönderin. Düşüncelerinizi öğrenmeyi sabırsızlıkla bekliyoruz.