Bugünden itibaren Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu gibi Chrome'un çeşitli web aracı platformlarında CLS'de bir değişiklik kullanıma sunuldu.
Bugün, Google Analytics 4'te ölçüm yapmayı nasıl geliştirdiğimizi Cumulative Layout Shift (CLS) çeşitli Chrome web araçlarında kullanabilirsiniz. Geliştiriciler için bu değişiklikler, web sitesinin kullanıcı deneyimini daha iyi uzun ömürlü sayfalar (sonsuz kaydırma veya tek sayfalık uygulamalara sahip olanlar gibi). CLS'de yapılan bu güncellemeler, Lighthouse, PageSpeed Insights ve Chrome Kullanıcı Deneyimi Raporu.
Hepimiz web'de daha az düzen değişikliği görmek isterdik. Bu noktada CLS metriğinin web sayfasının görsel kararlılığını ölçmede faydası olmuştur. Siteleri, içerik boyutlarını daha iyi ayarlamaya teşvik eder, görseller veya reklamlar gibi kullanıcılar için şaşırtıcı içerik artışlarına katkıda bulunabilecek reklamlar.
Metrik "kümülatif" olarak adlandırılmıştır çünkü her bir bağımsız değişimin puanı bir sayfanın yaşam süresi boyunca toplanır. Web'deki düzen kaymaları kötü kullanıcı deneyimine neden olsa da Tek Sayfalı Uygulamalar (SPA'lar) veya sonsuz kaydırma uygulamaları gibi uzun ömürlü sayfalar veya sonsuz kaydırma uygulamaları zaman içinde doğal olarak daha fazla CLS biriktirir. Toplamayı en kötü "pencere" ile sınırlayarak ve CLS artık oturum süresinden bağımsız olarak daha tutarlı şekilde ölçülebilir.
CLS metriğini geliştirme bölümünde duyurduğumuz gibi, CLS metriğini 1 saniyelik boşlukla maksimum oturum penceresi (5 saniyeyle sınırlı), bu güncelleme uzun ömürlü sayfalardaki kullanıcı deneyimini daha iyi yansıtıyor. Bu değişiklik yapıldıktan sonra Kaynakların% 70'inin 75. yüzdelik dilimde CLS değişimi görmeyi beklememesi gerekir. diğer% 30'luk kısımda ise iyileşme görülür.
Pencere düzenlemesini CLS'ye uygulama
Güncellenmiş CLS tanımının, 1 saniyelik boşlukla maksimum oturum penceresi şeklinde olduğundan bahsetmiştik. 5 saniyeyle sınırlanır. Araçlar için bu ne anlama geliyor?
Bugünden itibaren CLS'de yapılan bu değişiklik, Chrome'un çeşitli web araçları platformlarında kullanıma sunulmuştur. Örneğin, Lighthouse, PageSpeed Insights ve Chrome UX Report. Aşağıda CLS aralık düzenlemesi kullanıma sunulmasının özetini, ve hangi araçların orijinal uygulama ile karşılaştırma imkanı sağladığını görebilirsiniz.
| Araç | CLS aralık ayarı "canlı" | "Eski" CLS Kullanılabilirliği |
|---|---|---|
| Lighthouse Geliştirici Araçları Paneli | Canary kanalı, 2 Haziran 2021 | Yok |
| Lighthouse KSA | v8, sürüm 1 Haziran 2021 | Lighthouse v8'de totalCumulativeLayoutShift olarak kullanılabilir |
| Lighthouse CI | Sürüm 0.7.3, 3 Haziran 2021 | Yok |
| Sayfa Hızı Analizleri (PSI) | 1 Haziran 2021 | Yok |
| PSI API'si | 1 Haziran 2021 | lighthouseResult içinde totalCumulativeLayoutShift olarak mevcut. loadingExperience verileri alanında 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 UX Report (CrUX) - API | 1 Haziran 2021 | 1 Haziran 2021 tarihinden sonra
experimental_uncapped_cumulative_layout_shift.
14 Aralık 2021 |
Chrome Geliştirici Araçları da kısa süre içinde pencere ayarlamasını destekleyecek şekilde güncellenecek. CLS güncellemesi Search Console'da da yapılmıştır ve 1 Haziran 2021'den itibaren geçerli olacaktır.
Çoğu geliştirici için bu değişikliğin, düzeltmedeki verilerden yararlanmak için hiçbir işlem yapmanıza gerek kalmadan sorunsuz bir şekilde gerçekleşmesi beklenmektedir.
"Eski" CLS
Hatırlatalım, "eski" CLS, sayfanın tüm kullanım ömrü boyunca düzen kaymasını ölçer. Bazı geliştiriciler aralık ayarlamasıyla birlikte CLS'nin eski tanımını izlemek isteyebilir. harika haberlerimiz var: artık "eski CLS"yi geliştiriyoruz.
Lighthouse v8'de
JSON dosyasında
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift
Bu adı
experimental_uncapped_cumulative_layout_shift.
CrUX API'sinde ve
CrUX BigQuery'de experimental.uncapped_cumulative_layout_shift.
1 Haziran'dan sonra CrUX API istekleri "eski CLS"yi döndürecektir metrik:
{
"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ırır:
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
6 aya kadar bir süre boyunca bu verileri kullanmaya devam edebileceksiniz. "eski CLS" ile 14 Aralık 2021 tarihinde kullanımdan kaldırılacak.
Lighthouse'ta CLS ağırlıklandırmasını güncelleme
CLS, Lighthouse'da ilk kez kullanıma sunulduğunda yeni ve göz alıcı bir metrikti. Bu nedenle, geliştiricilerin testler, karşılaştırmalar ve testler yapmak için CLS'nin performans puanında daha düşük bir ağırlığa sahip olduğunu gördük.
Geliştiricilerin elebet gösterdiği bir süre geçtikten sonra Lighthouse puanının ağırlığı, %5'ten %15'e çıkarıldı. Core Web Vitals'a sahip olma metodolojisiyle tutarlı Lighthouse puanındaki en ağırlıklı metriklerdir.
Lighthouse v8'deki metriklerin güncellenmiş ağırlıklarını puan hesaplayıcıyı kullanın.
Lighthouse 8.0'ın CLS uygulaması, alt çerçevelerden hem pencere hem de CLS katkısını içerir. Lighthouse'daki CLS, 8.0'dan önce alt çerçeveler içermiyordu CLS'ye dahil edilmiştir, ancak şimdi çalışmaktadır. CrUX tarafından ölçülen alan CLS'si, pencere ve alt çerçeveleri de benzer şekilde işler.
Yine de, laboratuvar ile alan CLS'si arasındaki temel fark, laboratuvar CLS'sinin gözlem aralığının "tamamen yüklenmiş" olarak sona ermesidir. Laboratuvar koşullarında belirlendiği gibi, sahada gözlem aralığı, yükleme sonrası etkinlik de dahil olmak üzere sayfanın tüm ömrünü kapsar. Bununla birlikte, aralık düzenlemesi bu farkı önemli ölçüde azaltır.
Alanda kendiniz ölçüm yapmak
En son CLS uygulamasını ölçmek istiyorsanız Bunu, aşağıdaki PerformanceObserver snippet'ini kullanarak RUM aracılığıyla da alan verileriniz için kaydedebilirsiniz.
Ya da doğrudan Web Verileri JavaScript kitaplığı, ve bu değişiklikle güncellenmiştir.
Ek güncellemeler
Cumulative Layout Shift güncellemelerinin dışında Web araçlarımızda metriklerle ilgili aşağıdaki güncellemeler de yapıldı:
- Güncelleme yapıyoruz: Largest Contentful Paint 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üncellenecek.
- CrUX'te, First Contentful Paint üç bölme eşikleri şu şekilde güncellendi: İyi: [0-1,8 sn.], İyileştirme Gerekiyor: (1,8 sn-3 sn), Yetersiz: [3 sn-∞]
Sonuçlar
Bu değişiklik sayesinde, çoğu site için sorunsuz bir geçiş olmasını bekliyoruz. Web Vitals ve CLS'yi optimize edin inceleyin. Her zaman olduğu gibi web-vitals-feedback grubu geri bildirim forumlarımıza ve geri bildirim forumlarımıza Lighthouse ve Chrome kullanıcı deneyimi raporu en iyi uygulamaları görelim. İ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 ederiz.
Barn Images / @barnimages tarafından Unsplash'teki hero resim