Bugünden itibaren Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu dahil olmak üzere çeşitli Chrome web aracı platformlarında CLS'de yapılan bir değişiklik kullanıma sunuldu.
Bugün, Cumulative Layout Shift (CLS) metriğinin ölçümünü Chrome'un çeşitli web araç yüzeylerinde nasıl geliştirdiğimizi paylaşmak istiyoruz. Geliştiriciler için bu değişiklikler, uzun ömürlü sayfaların (sonsuz kaydırma veya tek sayfalık uygulamalar gibi) kullanıcı deneyimini daha iyi yansıtacaktır. CLS'deki bu güncellemeler Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu'nu da içeren araçlarda kullanıma sunulacaktır.
Hepimiz web'de daha az düzen kayması görmek isterdik. İşte bu noktada CLS metriğinin, web sayfalarının görsel kararlılığını ölçme konusunda faydalı olduğu kanıtlanmıştır. Sitelerin, içerikte kullanıcıların şaşırtıcı artışlarına katkıda bulunabilecek resim veya reklam gibi boyutlarını daha iyi belirlemeye teşvik eder.
Her bir kaymanın puanı bir sayfanın ömrü boyunca toplandığı için bu metriğe "kümülatif" adı verilir. Web'deki tüm düzen kaymaları kötü kullanıcı deneyimlerine neden olsa da Tek Sayfalı Uygulamalar (SPA'lar) veya sonsuz kaydırma uygulamaları gibi uzun ömürlü sayfalar zaman içinde doğal olarak daha fazla CLS biriktirir. Toplama işlemi en kötü değişim "aralığı" ile sınırlandığında, CLS artık oturum süresinden bağımsız olarak daha tutarlı bir şekilde ölçülebilir.
CLS metriğini geliştirme başlıklı makalede duyurduğumuz gibi, CLS metriğini 1 saniyelik boşlukla, 5 saniyeyle sınırlı bir maksimum oturum aralığına ayarlıyoruz. Bu güncelleme, uzun süreli sayfaların kullanıcı deneyimini daha iyi yansıtmaktadır. Bu değişiklik uygulandığında kaynakların% 70'inde 75. yüzdelik dilimde herhangi bir CLS değişikliği görülmez. Kaynakların geri kalan% 30'unda ise iyileşme görülür.
Aralık düzenlemesini CLS'ye uygulama
Güncellenmiş CLS tanımının, 5 saniyeyle sınırlı olan 1 saniyelik boşluk içeren maksimum oturum penceresi olduğundan bahsettik. Bu durum araçlar için ne anlama geliyor?
Bugünden itibaren CLS'deki bu değişiklik Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu'nu da içeren çok sayıda Chrome web aracı platformunda kullanıma sunulmuştur. Aşağıda, CLS aralığı düzenlemesini kullanıma sunmayla ilgili özet bilgileri ve hangi araçların orijinal uygulamayla karşılaştırma yapma olanağı sağladığını görebilirsiniz.
| Araç | CLS pencere ayarı "canlı" | "Eski" CLS Kullanılabilirliği |
|---|---|---|
| Lighthouse Geliştirici Araçları Paneli | Canary kanalı, 2 Haziran 2021 | Yok |
| Lighthouse KSA | v8, 1 Haziran 2021'de yayınlandı | Lighthouse v8'de totalCumulativeLayoutShift olarak kullanılabilir |
| Lighthouse CI | sürüm 0.7.3, 3 Haziran 2021 | Yok |
| PageSpeed Insights (PSI) | 1 Haziran 2021 | Yok |
| PSI API | 1 Haziran 2021 | lighthouseResult içinde totalCumulativeLayoutShift olarak sunulmaktadır. loadingExperience alanında veriler kullanılamaz |
| Chrome Kullanıcı Deneyimi Raporu (CrUX) - BigQuery | 8 Haziran 2021'de yayınlanan 202105 veri kümesi | 202111'e kadar experimental.uncapped_cumulative_layout_shift olarak kullanılabilir |
| Chrome Kullanıcı Deneyimi Raporu (CrUX) - API | 1 Haziran 2021 | 1 Haziran 2021'den sonra 14 Aralık 2021 experimental_uncapped_cumulative_layout_shift olarak kullanıma sunulacak |
Chrome Geliştirici Araçları da kısa süre içinde pencere düzenlemesini destekleyecek şekilde güncellenecektir. CLS güncellemesi Search Console'da da yapılmıştır ve 1 Haziran 2021 tarihinden itibaren geçerli olacaktır.
Çoğu geliştirici için bu değişikliğin, düzeltmedeki verilerden yararlanmak amacıyla herhangi bir işlem gerektirmeden sorunsuz şekilde gerçekleşmesi beklenir.
"Eski" CLS
"Eski" CLS'nin, sayfanın tüm kullanım ömrü boyunca düzen kaymasını ölçtüğünü hatırlatırız. Bazı geliştiriciler pencere düzenlemesiyle birlikte eski CLS tanımını da izlemek isteyebilecek. Bu nedenle, size iyi bir haberimiz var: Lighthouse ve CrUX'te "eski CLS"yi ortaya çıkarıyoruz.
Lighthouse v8'de, JSON'da audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift olarak bulunur.
CrUX API'de experimental_uncapped_cumulative_layout_shift, CrUX BigQuery'de ise experimental.uncapped_cumulative_layout_shift olarak yer alır.
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 aşağıdaki 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
Bu verileri 6 aya kadar süreyle kullanabilirsiniz. "Eski CLS" 14 Aralık 2021'de kullanımdan kaldırılacaktır.
Lighthouse'da CLS ağırlıklandırmasını güncelleme
CLS Lighthouse'da ilk kullanıma sunulduğunda yepyeni bir parıltı metriğiydi. Bu doğrultuda, geliştiricilerin test etmek, kıyaslamak ve optimizasyon yapmak için yeterli zamana sahip olmaları amacıyla CLS'nin performans puanındaki ağırlığı daha düşüktü.
Lighthouse puanı, geliştiricilerin elinde biraz zaman geçtikten sonra CLS'nin ağırlığını %5'ten %15'e çıkardı. Bu, Lighthouse puanında en fazla ağırlıklı metriklerin Önemli Web Verileri olması metodolojisine uygun olarak CLS'nin ağırlığını %15'e çıkardı.
Lighthouse v8'de metriklerin güncellenmiş ağırlıklarını puan hesaplayıcıda bulabilirsiniz.
Lighthouse 8.0'ın CLS uygulaması, alt çerçevelerden hem pencere aralığı hem de CLS katkısını içerir. 8.0'dan önce Lighthouse'daki CLS, metrik hesaplamasına alt çerçevelerin CLS'sini dahil etmiyordu, ancak şimdi içeriyor. Onay vermek amacıyla, CrUX tarafından ölçülen CLS alanı, pencerelemeyi ve alt çerçeveleri de benzer şekilde ele alıyor.
Yine de laboratuvar ile alan CLS'si arasındaki temel fark, laboratuvar CLS'sinin gözlem penceresinin laboratuvar koşullarında belirlendiği şekliyle "tamamen yüklendi" durumunda bitmesidir. Alanda, gözlem aralığının yükleme sonrası etkinlik de dahil olmak üzere tüm sayfa ömrüne uzanmasıdır. Bununla birlikte, aralık düzenlemesi bu farkı önemli ölçüde azaltır.
Sahada kendiniz ölçüm yapmak
En son CLS uygulamasını ölçmek isterseniz aşağıdaki PerformanceObserver snippet'ini kullanarak bunu RUM aracılığıyla alan verileriniz için de kaydedebilirsiniz.
Alternatif olarak, doğrudan bu değişiklikle güncellenmiş Web Verileri JavaScript kitaplığını da kullanabilirsiniz.
Ek güncellemeler
Cumulative Layout Shift güncellemelerinin yanı sıra web araçlarımızda metriklerle ilgili aşağıdaki güncellemeler de yapılmıştır:
- Largest Contentful Paint metriğinin en son tanımını güncelliyoruz. CrUX API, PSI, PSI API, Search Console 1 Haziran 2021'de güncellenecek. CrUX BigQuery, 8 Haziran 2021'de güncellenecek.
- CrUX'te, İlk Zengin İçerikli Boyama üçlü bağlama eşikleri şu şekilde güncellenmiştir: İyi: [0-1,8 sn], İyileştirme Gerektiriyor: (1,8 sn-3 sn), Yavaş: [3 sn-∞]
Sonuçlar
Bu değişikliğin, çoğu site için sorunsuz bir geçişi yansıtmasını bekliyoruz. Ayrıca, düzen kaymalarınızı ölçme ve optimize etme ile ilgili ipuçları ve püf noktaları için Web Verileri ve CLS'yi Optimize Etme sayfalarına göz atmanızı öneririz. Her zaman olduğu gibi, metrikler ve Lighthouse için araçlara özel geri bildirim forumlarımız ve araç sorunlarıyla ilgili Chrome Kullanıcı Deneyimi Raporu hakkında geri bildirim almak için web-vitals-geri bildirim grubuna ulaşmaktan çekinmeyin. İyi denemeler!
Geri bildirimleri için Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose ve Paul Ireland'a teşekkür ediyoruz.
Unsplash'te Barn Images / @barnimages tarafından hero resim