Cumulative Layout Shift metriğini iyileştirmeyle ilgili planlarımız hakkında bilgi edinin ve bize geri bildirim gönderin.
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 sayfa düzeni değişiklikleri kötü bir kullanıcı deneyimi olsa da daha uzun süre açık kalan sayfalarda daha fazla soruna neden olur. Bu nedenle Chrome Hız Metrikleri Ekibi, CLS metriğini bir sayfada harcanan süreye karşı daha tarafsız olacak şekilde iyileştirmeye karar verdi.
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 bu durumun, kullanıcının genellikle uzun süre açık tuttuğu sayfaları nasıl etkilediğiyle ilgili endişeler duyduk. Daha uzun süre açık kalma eğiliminde olan birkaç farklı sayfa türü vardır. En yaygın olanlardan bazıları, sonsuz kaydırma özelliğine sahip sosyal medya uygulamaları ve tek sayfalık uygulamalardı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 içeriği kaydıran sonsuz kaydırma çubuğu.
- Kullanıcı etkileşimine yanıt olarak kullanıcı arayüzünü güncellemek için herhangi bir yer tutucu veya iskelet kalıbı olmadan 500 ms'den uzun süren giriş işleyiciler.
Geliştiricileri bu kullanıcı deneyimlerini iyileştirmeye teşvik ederken metriği iyileştirmek için de çalışıyoruz ve olası yaklaşımlar hakkında geri bildirim almayı bekliyoruz.
Yeni bir metriğin daha iyi olup olmadığına nasıl karar veririz?
Metrik tasarımına başlamadan önce, fikirlerimizi gerçek dünyadaki çeşitli web sayfalarında ve kullanım alanlarında değerlendirdiğimizden emin olmak istedik. Başlangıç olarak küçük bir kullanıcı çalışması tasarladık.
Öncelikle, çeşitli web sitelerinde 34 kullanıcı yolculuğunun videolarını ve Chrome izlerini 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 uygulama gezinmeleri ve kullanıcı etkileşimleri gibi çeşitli kullanıcı işlemleri.
- Sitelerdeki tek tek düzen kaymalarının sayısı ve yoğunluğu çeşitlidir.
- Sitelerde, düzen değişiklikleri dışında çok az sayıda olumsuz deneyim var.
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 derecelendirmelerden, sitelerin ideal bir sıralama düzenini oluşturduk. Kullanıcı sıralamasının sonuçları, çoğu kullanıcı gibi iş arkadaşlarımızın da özellikle kaydırma ve tek sayfalı uygulama gezinmeleri sırasında yükleme sonrası düzen kaymalarından rahatsız olduğu yönündeki şüphelerimizi doğruladı. Bazı sitelerin bu etkinlikler sırasında diğerlerinden çok daha iyi kullanıcı deneyimleri sunduğunu gördük.
Videolarla birlikte Chrome izlerini de kaydettiğimiz için her kullanıcı yolculuğundaki ayrı düzen değişikliklerinin tüm ayrıntılarına sahiptik. Bu metrikleri, her kullanıcı yolculuğu için her bir fikirle ilgili metrik değerlerini hesaplamak amacıyla 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ı. Bunu başarmak için üç pencere yaklaşımını inceledik:
- Dönen pencereler
- Sürgülü pencereler
- Oturum aralıkları
Bu örneklerin her birinde, sayfanın zaman içinde çeşitli düzeylerde düzen değişiklikleri vardır. Her mavi çubuk tek bir düzen kaymasını, uzunluk ise bu değişimin puanını temsil eder. Resimlerde, farklı pencere stratejilerinin zaman içinde düzen değişikliklerini gruplandırma yöntemleri gösterilmektedir.
Dönen pencereler
En basit yaklaşım, sayfayı eşit boyutlu parçalara ayırmaktır. Bunlara "dönen aralıklar" denir. Yukarıda, dördüncü çubuğun ikinci dönen pencerede gruplandırılmış gibi göründüğünü ancak pencerelerin tümü sabit boyutta olduğu için ilk pencerede olduğunu görebilirsiniz. Sayfadaki yüklemelerin zamanlamasında veya kullanıcı etkileşimlerinde küçük farklılıklar varsa aynı düzen kaymaları, kaydırma aralığı sınırlarının farklı taraflarına düşebilir.
Sürgülü pencereler
Aynı uzunlukta daha fazla olası gruplandırma görmemizi sağlayan bir yaklaşım, olası pencereyi zaman içinde sürekli olarak güncellemektir. Yukarıdaki resimde bir seferde bir kaydırmalı pencere gösterilmektedir ancak bir metrik oluşturmak için tüm olası kaydırmalı pencerelere veya bunların bir alt kümesine bakabiliriz.
Oturum aralıkları
Sayfanın düzen kaymalarının yoğun olduğu alanlarını belirlemeye odaklanmak isteseydik her pencereyi bir kaymada başlatabilir ve düzen kaymaları arasında belirli bir boyuttaki bir boşlukla karşılaşana kadar pencereyi büyütmeye devam edebilirdik. Bu yaklaşım, düzen değişikliklerini birlikte gruplandırır ve değişmeyen kullanıcı deneyiminin çoğunu yoksayar. Olası bir sorun, düzen kaymalarında boşluk yoksa oturum pencerelerine dayalı bir metriğin, mevcut CLS metriği gibi sınırsız şekilde büyüyebileceğidir. Bu nedenle, bunu maksimum pencere boyutuyla da 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 vardiya kendi penceresinde (pencere yok)
- 100 ms
- 300 ms.
- 1 saniye
- 5 saniye
Özetleme
Farklı pencereleri özetlemek için birçok yöntem denedik.
Yüzdelik dilim
En yüksek pencere değerinin yanı sıra %95'lik dilim, %75'lik dilim ve medyanı inceledik.
Ortalama
Ortalama pencere değerine baktık.
Bütçeler
Kullanıcıların fark etmeyeceği minimum bir yerleşim kayması puanı olup olmadığını merak ettik ve puanda bu "bütçe"nin üzerindeki yerleşim kaymalarını sayabileceğimizi düşündük. Bu nedenle, çeşitli potansiyel "bütçe" değerleri için bütçenin üzerindeki değişimlerin yüzdesine ve bütçenin üzerindeki toplam değişim puanına baktık.
Diğer stratejiler
Ayrıca, sayfadaki süreye bölünen toplam düzen kayması ve en kötü N tek düzen kaymasının ortalaması gibi aralık içermeyen birçok stratejiye de baktık.
İlk sonuçlar
Genel olarak, yukarıdaki fikirlerin permütasyonlarına dayalı olarak 145 farklı metrik tanımı test ettik. Her metrik için tüm kullanıcı yolculuklarını metrikteki puanlarına göre, ardından metrikleri ideal sıralamaya ne kadar yakın olduklarına göre sıraladık.
Referans almak için tüm siteleri mevcut CLS puanlarına göre de sıraladık. CLS, diğer 13 stratejiyle birlikte 32. sırada yer aldı. Bu nedenle, yukarıdaki stratejilerin çoğundan 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ümesine aşırı uyum sağlayıp sağlamadığımızı anlamak için analizimizden sonra bazı yeni düzen değişikliği videoları ve izleri kaydettik, bunları manuel olarak sıraladık ve metrik sıralamaları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ı gördük. Her birinin performansı yaklaşık olarak aynıydı. Bu nedenle, üçü hakkında daha derin bir analiz yapmayı planlıyoruz. Ayrıca, bu iki seçenek arasında karar verirken kullanıcı deneyiminin dışında dikkate almamız gereken faktörler olup olmadığını anlamak için geliştiricilerden geri bildirim almak istiyoruz. (Geri bildirimde bulunma hakkında bilgi edinmek için aşağıya bakın.)
Uzun pencerelerin yüksek yüzdelik dilimleri
Uzun pencere boyutlarında iyi çalışan birkaç pencere stratejisi vardır:
- 1 saniyelik sürgülü pencereler
- 1 saniyelik boşlukla 5 saniyeyle sınırlı oturum aralıkları
- 1 saniyelik aralıkla sınırsız oturum aralıkları
Bunların tümü hem 95. yüzdelik dilimde hem de maksimumda çok iyi bir sıralamaya sahip.
Ancak bu kadar 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 bunların 95. yüzdelik dilimini almak çok fazla enterpolasyon gerektiriyordu. Metrik değeri açısından, enterpolasyonun 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ı
Sınırsız tüm oturum pencerelerinin puanlarını 5 saniyelik aralarla ortalamak gerçekten iyi sonuç verdi. Bu stratejinin birkaç ilginç özelliği vardır:
- Sayfada düzen değişiklikleri arasında boşluk yoksa mevcut CLS ile tam olarak aynı puana sahip tek bir uzun oturum aralığı olur.
- Bu metrik, doğrudan boşta kalma süresini hesaba katmaz. Yalnızca sayfada gerçekleşen kaydırmalara bakar, sayfanın kaydırılmadığı zaman noktalarını dikkate almaz.
Kısa pencerelerin yüksek yüzdelik dilimleri
Maksimum 300 ms kaydırmalı pencere, 95. yüzdelik dilimde olduğu gibi çok yüksek bir puan aldı. 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 "yinelenen" pencereler de dikkate alınmıştır. İki kare üzerinde bir dizi düzen kayması gerçekleşirse bunları içeren birden fazla 300 ms'lik pencere vardır. Maksimum değeri almak, 95. yüzdelik dilimi almaktan çok daha net ve basittir. Bu nedenle, maksimum değeri kontrol etmeye devam etmeye karar verdik.
İşe yaramayan stratejiler
Hem düzen kaydırma olmadan hem de düzen kaydırmayla geçirilen sürenin "ortalama" deneyimine bakmaya çalışan stratejiler çok kötü performans gösterdi. Herhangi bir zaman aralığı stratejisinin medyan veya 75. yüzdelik dilim özetlerinden hiçbiri siteleri iyi bir şekilde sıralamamıştır. Zaman içindeki düzen kaymalarının toplamı da değişmedi.
Kabul edilebilir düzen değişiklikleri için çeşitli "bütçeleri" değerlendirdik:
- Bir miktar bütçenin üzerindeki düzen kaymalarının yüzdesi. Çeşitli bütçeler için bunların tümü oldukça düşük bir sıralamaya sahipti.
- Ortalama düzen kayması, bazı fazlalıklardan daha yüksek. 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 ikinci seçeneği kullanmaya karar verdik.
Sonraki adımlar
Büyük ölçekli analiz
Çok daha geniş bir web sitesi grubu için gerçek kullanımla ilgili veriler elde edebilmemiz amacıyla, yukarıda listelenen en iyi stratejileri Chrome'a uyguladık. Daha büyük ölçekli bir analiz yapmak üzere, 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 şey görüyor muyuz?
- Yeni metrik adayları arasındaki en büyük farklar nelerdir? Farklardan 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 kaydırmayla 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 kareler için düzen kayması puanlarının hesaplanma şeklini değiştirmez. Yalnızca birden fazla kareyi özetleme şeklimizi değiştirir. Bu, sayfa düzeni değişiklikleri için JavaScript API'nin aynı kalacağı ve geliştirici araçlarının kullandığı Chrome izlemelerindeki temel etkinliklerin de aynı kalacağı anlamına gelir. Bu nedenle, WebPageTest ve Chrome Geliştirici Araçları gibi araçlardaki sayfa düzeni değişikliği dikdörtgenleri aynı şekilde çalışmaya devam edecektir.
- Metrikleri geliştiricilerin kolayca kullanabilmesi için web-vitals kitaplığına ekleme, web.dev'de belgeleme ve Lighthouse gibi geliştirici araçlarımızda raporlama konusunda yoğun şekilde çalışmaya devam edeceğiz.
Metrikler arasındaki dengeler
En iyi stratejilerden biri, düzen değişikliği aralıklarını ortalama olarak özetler, geri kalanı ise maksimum aralığı raporlar. Çok uzun süre açık kalan sayfalar için ortalama, muhtemelen daha temsili bir değer raporlar ancak genel olarak geliştiricilerin tek bir pencerede işlem yapması daha kolaydır. Bu sayede, işlemin ne zaman gerçekleştiğini ve hangi öğelerin kaydırıldığını 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ının çatalını kullanarak yeni düzen kaydırma metriklerini herhangi bir sitede deneyebilirsiniz.
Lütfen web-vitals-feedback Google grubumuza "[Layout Shift Metrics]" konu satırıyla e-posta göndererek geri bildirimde bulunun. Görüşlerinizi öğrenmek için sabırsızlanıyoruz.