Web araçlarında Gelişen Kümülatif Düzen Kayması

Bugün, Chrome’un çeşitli web araçları yüzeylerinde Kümülatif Düzen Kayması (CLS) metriğinin ölçümünü nasıl geliştirdiğimizi paylaşmak istiyoruz. Geliştiriciler için bu değişiklikler, uzun ömürlü sayfalar (sonsuz kaydırmalı veya tek sayfalı uygulamalar gibi) için kullanıcı deneyimini daha iyi yansıtacaktır. CLS’ye yönelik bu güncellemeler, Lighthouse, PageSpeed ​​Insights ve Chrome UX Report gibi araçlara yayılacaktır.

Hepimiz web’de daha az düzen değişikliği görmeyi diliyoruz. CLS metriğinin bir web sayfasının görsel kararlılığını ölçmede yararlı olduğu yer burasıdır. Siteleri, kullanıcıları için şaşırtıcı içerik sıçramalarına katkıda bulunabilecek resimler veya reklamlar gibi içerik için boyutları daha iyi belirlemeye teşvik etmeye yardımcı olur.

Metrik, “kümülatif” olarak adlandırılır çünkü her bir vardiyanın puanı, bir sayfanın ömrü boyunca toplanır. Web’deki tüm düzen değişiklikleri kötü kullanıcı deneyimine neden olurken, Tek Sayfalı Uygulamalar (SPA’lar) veya sonsuz kaydırmalı uygulamalar gibi uzun ömürlü sayfalar doğal olarak zamanla daha fazla CLS biriktirir. Toplamayı vardiyaların en kötü “penceresine” sınırlayarak, CLS artık oturum süresinden bağımsız olarak daha tutarlı bir şekilde ölçülebilir.

CLS metriğini geliştirmede duyurduğumuz gibi, CLS metriğini 5 saniye ile sınırlandırılmış 1 saniyelik bir boşlukla maksimum oturum penceresine ayarlıyoruz; bu güncelleme, uzun ömürlü sayfalar için kullanıcı deneyimini daha iyi yansıtıyor. Bu değişikliğin yerinde olmasıyla, menşelerin %70’i, 75. yüzdelik dilimde herhangi bir CLS değişikliği görmeyi beklememelidir ve menşelerin geri kalan %30’u bir iyileşme görecektir.

Pencereleme ayarını CLS’ye yayma #

Güncellenmiş CLS tanımının, 5 saniye ile sınırlandırılmış, 1 saniye boşluklu bir maksimum oturum penceresi olduğundan bahsetmiştik. Bu araçlar için ne anlama geliyor?

Bugünden itibaren, CLS’deki bu değişiklik, Lighthouse, PageSpeed ​​Insights ve Chrome UX Report dahil olmak üzere Chrome’un bir dizi web araçları yüzeyinde kullanıma sunuldu. Aşağıda, CLS pencereleme ayarlamasının kullanıma sunulmasının bir özetini ve ayrıca hangi araçların orijinal uygulamayla kıyaslama yapma olanağını hâlâ sağladığını görebilirsiniz.

Chrome DevTools da kısa süre içinde pencereleme ayarını desteklemek için güncellenecektir. CLS güncellemesi ayrıca yapıldı. Arama Konsolu ve 1 Haziran 2021’den itibaren yansıtılacaktır.

Çoğu geliştirici için bu değişikliğin, düzeltmeden elde edilen verilerden yararlanmak için herhangi bir işlem yapılması gerekmeden sorunsuz bir şekilde gerçekleşmesi bekleniyor.

“Eski” CLS #

Bir hatırlatma olarak, “eski” CLS sayfanın tüm kullanım ömrü boyunca düzen değişimini ölçer. Bazı geliştiriciler, pencere ayarının yanı sıra CLS’nin eski tanımını da izlemek isteyebilecekleri için, paylaşacağımız iyi bir haberimiz var: Lighthouse ve CrUX’ta “eski CLS”yi kullanıma sunuyoruz.

Lighthouse v8’de, JSON’da şu şekilde bulunur: audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

olarak bulacaksınız experimental_uncapped_cumulative_layout_shift CrUX API’sinde ve şu şekilde experimental.uncapped_cumulative_layout_shift CRUX BigQuery’de.

1 Haziran’dan sonra, CrUX API istekleri “eski CLS” metriğini döndürecektir:

{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}

8 Haziran’dan sonra, CRUX BigQuery eski ve yeni CLS’yi karşılaştıracak:

WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start

14 Aralık 2021’de “eski CLS” kullanımdan kaldırılacakken, bu verilere güvenmeye 6 aya kadar devam edebileceksiniz.

Lighthouse’da CLS ağırlığını güncelleme #

CLS, Lighthouse’da ilk kez tanıtıldığında, yepyeni bir ışıltılı metrikti. Bu nedenle, geliştiricilerin test etmek, kıyaslamak ve buna göre optimize etmek için zamanları olduğundan emin olmak amacıyla, CLS’ye performans puanında daha az ağırlık verildi.

Şimdi, geliştiricilerin elinde biraz zaman geçirdikten sonra, Lighthouse puanı CLS’nin ağırlığını %5’ten %15’e çıkardı ve bu, Lighthouse puanında Önemli Web Verilerinin en ağır ağırlıklı metrikler olmasını sağlayan metodolojiyle tutarlı.

Lighthouse v8’deki metriklerin güncellenmiş ağırlıklandırmalarını şurada bulabilirsiniz: puanlama hesap makinesi.

Lighthouse 8.0’ın CLS uygulaması, alt çerçevelerden hem pencerelemeyi hem de CLS katkısını içerir. 8.0’dan önce Lighthouse’daki CLS, metrik hesaplamaya alt çerçevelerin CLS’sini dahil etmiyordu, ancak şimdi dahil ediyor. Ve yalnızca doğrulama amacıyla, CrUX tarafından ölçülen CLS alanı da benzer şekilde pencereleme ve alt çerçeveleri işler.

Yine de, laboratuvar ve alan CLS’si arasındaki temel fark, laboratuvar CLS’sinin gözlem penceresinin laboratuvar koşullarında belirlendiği üzere “tam yüklenmiş”te bitmesidir, oysa sahada, gözlem penceresi yükleme sonrası etkinlik de dahil olmak üzere tüm sayfa ömrünü kapsıyor. . Bununla birlikte, pencereleme ayarı bu farkı önemli ölçüde azaltır.

Kendiniz sahada ölçüm yapın #

En son CLS uygulamasını ölçmek isterseniz, bunu aşağıdaki PerformanceObserver snippet’ini kullanarak RUM aracılığıyla saha verileriniz için de kaydedebilirsiniz.

Veya doğrudan güvenerek Web Verileri JavaScript kitaplığıbu değişiklikle birlikte güncellendi.

Ek güncellemeler #

Toplu Düzen Kaydırma güncellemelerinin dışında, web araçlarımızda ölçümlerle ilgili aşağıdaki güncellemeler de yapılmıştır:

• için güncelliyoruz En Büyük İçerikli Boyama metriğinin en son tanımı. CrUX API, PSI, PSI API, Search Console 1 Haziran 2021’de güncellenecektir. CrUX BigQuery, 8 Haziran 2021’de güncellenecektir.
• CrUX’ta, First Contentful Paint üçlü gruplama eşikleri, İyi olarak güncellendi: [0-1.8s]İyileştirme Gerekiyor: (1.8s-3s), Kötü: [3s-∞]

Sonuçlar #

Bu değişikliğin çoğu site için sorunsuz bir geçişi yansıtmasını bekliyoruz ve düzen değişimlerinizi nasıl ölçeceğiniz ve optimize edeceğiniz konusunda ipuçları ve püf noktaları için Web Verileri ve Optimize CLS’ye göz atmanızı öneririz. Her zaman olduğu gibi, web-hayati-geri bildirim grubu metrikler ve araçlara özel geri bildirim forumlarımız hakkında geri bildirim için deniz feneriVe Chrome Kullanıcı Deneyimi Raporu takım sorunları için. Şerefe!

Geri bildirimleri için Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose ve Paul Irish’e teşekkürler.

Barn Images / @barnimages tarafından hazırlanan kahraman görseli on Unsplash