Web araçlarında gelişen Cumulative Layout Shift

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.

Addy Osmani

Elizabeth Sweeny

Yayınlanma tarihi: 2 Haziran 2021

Bugün, Chrome'un çeşitli web araç 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ın (ör. sonsuz kaydırma veya tek sayfalık uygulamalar) kullanıcı deneyimini daha iyi yansıtacaktır. CLS'de yapılan bu güncellemeler Lighthouse, PageSpeed Insights ve Chrome UX Report gibi araçlarda da kullanıma sunulacaktır.

Web'de daha az sayfa düzeni değişikliği görmek hepimizin arzusu. Bu noktada CLS metriğinin web sayfasının görsel kararlılığını ölçmede faydası olmuştur. Bu, sitelerin resim veya reklam gibi içeriklerin boyutlarını daha iyi ayarlamalarına yardımcı olur. Bu da kullanıcılar için içerikte şaşırtıcı sıçramalara yol açabilir.

Her bir değişikliğin puanı sayfanın yayın hayatı boyunca toplandığından metrik "kümülatif" olarak adlandırılır. Web'deki tüm düzen değişiklikleri kötü kullanıcı deneyimlerine neden olsa da tek sayfalık uygulamalar (SPA'lar) veya sonsuz kaydırma uygulamaları gibi uzun süreli sayfalar zaman içinde doğal olarak daha fazla CLS biriktirir. Toplama işlemi en kötü "pencere" 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 bölümünde duyurduğumuz gibi, CLS metriğini 1 saniyelik boşlukla maksimum oturum penceresi olarak ayarlıyoruz. Bu güncelleme, uzun ömürlü sayfalardaki kullanıcı deneyimini daha iyi yansıtmaktadır. Bu değişiklikle birlikte, kaynaklarının% 70'inde 75. yüzdelik dilimde herhangi bir CLS değişikliği görülmesi beklenmez. Kaynakların kalan% 30'unda ise bir iyileşme görülecektir.

CLS'de pencere ayarlaması kullanıma sunuluyor

Güncellenen CLS tanımının, 1 saniyelik boşlukla ve 5 saniyeyle sınırlı maksimum oturum penceresi olduğunu belirtmiştik. 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 dahil olmak üzere Chrome'un çeşitli web araç yüzeylerinde kullanıma sunulmuştur. Aşağıda, CLS aralığı düzenlemesinin kullanıma sunulmasının özetini ve orijinal uygulamaya kıyasla hangi araçların hâlâ karşılaştırma yapabilmesini sağladığını görebilirsiniz.

Chrome DevTools da kısa süre içinde pencere ayarını destekleyecek şekilde güncellenecek. CLS'deki güncelleme Search Console'da da yapıldı ve 1 Haziran 2021'den itibaren geçerli olacak.

Çoğu geliştirici için bu değişikliğin sorunsuz bir şekilde gerçekleşmesi ve düzeltmeyle elde edilen verilerden yararlanmak için herhangi bir işlem yapılması gerekmemesi beklenmektedir.

"Eski" CLS

"Eski" CLS'nin, sayfanın yayın hayatı boyunca düzen değişikliğini ölçtüğünü hatırlatmak isteriz. Bazı geliştiriciler, pencereleme ayarının yanı sıra CLS'nin eski tanımını da izlemek isteyebilir. Bu nedenle, Lighthouse ve CrUX'ta "eski CLS"yi kullanıma sunuyoruz.

Lighthouse v8'de bu değer, JSON'da audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift olarak bulunur.

Bu özelliği CrUX API'de experimental_uncapped_cumulative_layout_shift, CrUX BigQuery'de ise experimental.uncapped_cumulative_layout_shift olarak görürsünüz.

1 Haziran'dan sonra CrUX API istekleri "eski CLS" metriğini döndürecek:

{
  "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

"Eski CLS" 14 Aralık 2021'de kullanımdan kaldırılacağından, bu verilere 6 aya kadar güvenmeye devam edebilirsiniz.

Lighthouse'ta CLS ağırlığını güncelleme

CLS, Lighthouse'ta ilk kez kullanıma sunulduğunda yepyeni ve parlak bir metrikti. Bu nedenle, geliştiricilerin test etme, karşılaştırma ve optimizasyon yapma zamanına sahip olması için CLS, performans puanında daha az ağırlığa sahipti.

Geliştiricilerin kullanımına sunulduktan sonra Lighthouse puanı, CLS'nin ağırlığını% 5'ten %15'e çıkardı. Bu, Core Web Vitals'ın Lighthouse puanındaki en ağırlıklı metrikler olmasını sağlayan metodolojiyle tutarlıdır.

Lighthouse v8'deki metriklerin güncellenmiş ağırlıklarını puanlama hesaplayıcısında bulabilirsiniz.

Lighthouse 8.0'ın CLS uygulaması, hem pencereleme hem de alt çerçevelerden gelen CLS katkısını içerir. 8.0'dan önce Lighthouse'daki CLS, alt çerçevelerin CLS'sini metrik hesaplamasına dahil etmiyordu ancak artık dahil ediyor. CrUX tarafından ölçülen alan CLS'nin de pencereleme ve alt çerçeveleri benzer şekilde işlediğini onaylamak isteriz.

Yine de, laboratuvar ile alan CLS'si arasındaki temel fark, laboratuvar CLS'sinin gözlem aralığının laboratuvar koşullarında belirtildiği gibi "tamamen yüklenen" olarak sona ermesidir. Sahada ise gözlem aralığının, yükleme sonrası etkinliği de içeren sayfa ömrünün tamamı boyunca uzanmasıdır. Bununla birlikte, pencere ayarlaması bu farkı önemli ölçüde azaltır.

Alanda kendiniz ölçüm yapmak

En son CLS uygulamasını ölçmek isterseniz aşağıdaki PerformanceObserver snippet'ini kullanarak RUM üzerinden alan verileriniz için de bunu kaydedebilirsiniz.

Alternatif olarak, doğrudan bu değişiklikle güncellenen Web Verileri JavaScript kitaplığını da kullanabilirsiniz.

Ek güncellemeler

Kümülatif Düzen Değişikliği'ndeki güncellemelerin yanı sıra web araçlarımızda aşağıdaki metriklerle ilgili güncellemeler de yapıldı:

• Largest Contentful Paint metriğinin en son tanımına göre güncelleme yapıyoruz. CrUX API, PSI, PSI API ve Search Console 1 Haziran 2021'de güncellenecek. CrUX BigQuery, 8 Haziran 2021'de güncellenecek.
• CrUX'ta, İlk Zengin İçerikli Boyama üçlü gruplandırma eşikleri şu şekilde güncellendi: İyi: [0-1,8 s], İyileştirme Gerekiyor: (1,8 s-3 s), Kötü: [3 s-∞]

Sonuçlar

Bu değişikliğin çoğu site için sorunsuz bir geçiş olmasını bekliyoruz. Düzen geçişlerinizi ölçme ve optimize etmeyle ilgili ipuçları ve püf noktaları için Web Vitals ve CLS'yi optimize etme başlıklı makaleleri incelemenizi öneririz. Her zaman olduğu gibi, metrikler ve Lighthouse ile ilgili araçlarla ilgili geri bildirim forumlarımız ve araç kullanımıyla ilgili sorunlar için Chrome UX Report hakkında geri bildirim almak için web-vitals-feedback grubuna ulaşabilirsiniz. İyi denemeler!

Geri bildirimde bulunan Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose ve Paul Irish'a teşekkür ederiz.

Unsplash'taki Barn Images / @barnimages tarafından oluşturulan hero resim