Cumulative Layout Shift (CLS)

Pergeseran tata letak yang tidak terduga dapat mengganggu pengalaman pengguna dalam berbagai hal, mulai dari menyebabkan pengguna kehilangan posisi saat membaca jika teks bergerak secara tiba-tiba, hingga membuat pengguna mengklik link atau tombol yang salah. Dalam beberapa kasus, hal ini dapat menyebabkan kerusakan serius.

Perpindahan konten halaman yang tidak terduga biasanya terjadi saat resource dimuat secara asinkron atau elemen DOM ditambahkan secara dinamis ke halaman sebelum konten yang ada. Penyebab pergeseran tata letak mungkin adalah gambar atau video dengan dimensi yang tidak diketahui, font yang dirender lebih besar atau lebih kecil daripada penggantian awal, atau iklan atau widget pihak ketiga yang mengubah ukuran secara dinamis.

Perbedaan antara bagaimana situs berfungsi dalam pengembangan dan bagaimana pengalaman penggunanya, memperburuk masalah ini. Contoh:

• Konten yang dipersonalisasi atau konten pihak ketiga sering kali berperilaku berbeda dalam pengembangan dan produksi.
• Gambar pengujian sering kali sudah ada di cache browser developer, tetapi perlu waktu lebih lama untuk dimuat oleh pengguna akhir.
• Panggilan API yang berjalan secara lokal sering kali sangat cepat sehingga penundaan pengembangan yang tidak terlihat dapat menjadi substansial dalam produksi.

Metrik Pergeseran Tata Letak Kumulatif (CLS) membantu Anda mengatasi masalah ini dengan mengukur seberapa sering hal ini terjadi untuk pengguna nyata.

Apa itu CLS?

CLS adalah ukuran burst terbesar dari skor pergeseran tata letak untuk setiap pergeseran tata letak yang tidak terduga yang terjadi selama seluruh siklus proses halaman.

Pergeseran tata letak terjadi setiap kali elemen yang terlihat mengubah posisinya dari satu frame yang dirender ke frame berikutnya. (Detail tentang cara penghitungan masing-masing skor pergeseran tata letak akan dibahas nanti dalam panduan ini.)

Burst pergeseran tata letak, yang dikenal sebagai periode sesi, terjadi saat satu atau beberapa pergeseran tata letak individual terjadi secara berurutan dengan waktu kurang dari 1 detik di antara setiap shift dan maksimum 5 detik untuk total durasi periode.

Burst terbesar adalah periode sesi dengan skor kumulatif maksimum dari semua pergeseran tata letak dalam periode tersebut.

Berapa skor CLS yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus berusaha mendapatkan skor CLS 0,1 atau kurang. Guna memastikan Anda mencapai target ini untuk sebagian besar pengguna, batas yang perlu diukur adalah persentil ke-75 pemuatan halaman, yang disegmentasikan di perangkat seluler dan desktop.

Untuk mempelajari lebih lanjut riset dan metodologi di balik rekomendasi ini, lihat Menentukan nilai minimum metrik Core Web Vitals.

Perubahan tata letak secara mendetail

Pergeseran tata letak ditentukan oleh Layout Instability API, yang melaporkan entri layout-shift setiap kali elemen yang terlihat dalam area tampilan mengubah posisi awalnya (misalnya, posisi atas dan kirinya dalam mode penulisan default) di antara dua frame. Elemen tersebut dianggap sebagai elemen yang tidak stabil.

Perhatikan bahwa pergeseran tata letak hanya terjadi saat elemen yang ada mengubah posisi awalnya. Jika elemen baru ditambahkan ke DOM atau elemen yang ada berubah ukuran, hal ini tidak dihitung sebagai pergeseran tata letak—selama perubahan tersebut tidak menyebabkan elemen lain yang terlihat mengubah posisi awalnya.

Skor pergeseran tata letak

Untuk menghitung skor pergeseran tata letak, browser melihat ukuran area pandang dan pergerakan elemen yang tidak stabil di area pandang antara dua frame yang dirender. Skor pergeseran tata letak adalah hasil dari dua ukuran gerakan tersebut: fraksi dampak dan fraksi jarak (keduanya ditentukan di bawah).

layout shift score = impact fraction * distance fraction

Bagian benturan

fraksi dampak mengukur pengaruh elemen yang tidak stabil terhadap area area pandang antara dua bingkai.

Fraksi dampak untuk frame tertentu adalah kombinasi area yang terlihat dari semua elemen yang tidak stabil untuk frame tersebut dan frame sebelumnya, sebagai pecahan dari total area area pandang.

Pada gambar sebelumnya, ada elemen yang menempati setengah dari area pandang dalam satu bingkai. Kemudian, dalam frame berikutnya, elemen bergeser ke bawah sebesar 25% dari tinggi area pandang. Persegi panjang putus-putus berwarna merah menunjukkan gabungan area elemen yang terlihat di kedua frame, yang, dalam hal ini, adalah 75% dari total area pandang, sehingga fraksi dampak adalah 0.75.

Pecahan jarak

Bagian lain dari persamaan skor pergeseran tata letak mengukur jarak perpindahan elemen yang tidak stabil terhadap area pandang. fraksi jarak adalah jarak horizontal atau vertikal terbesar yang dipindahkan oleh elemen yang tidak stabil dalam bingkai yang dibagi dengan dimensi terbesar area pandang (lebar atau tinggi, mana saja yang lebih besar).

Pada contoh sebelumnya, dimensi area pandang terbesar adalah tinggi, dan elemen yang tidak stabil telah berpindah sebesar 25% dari tinggi area pandang, sehingga fraksi jarak menjadi 0,25.

Jadi, dalam contoh ini fraksi dampak adalah 0.75 dan fraksi jarak adalah 0.25, sehingga skor pergeseran tata letak adalah 0.75 * 0.25 = 0.1875.

Contoh

Contoh berikutnya mengilustrasikan bagaimana penambahan konten ke elemen yang ada memengaruhi skor pergeseran tata letak:

Dalam contoh ini, kotak abu-abu berubah ukuran, tetapi posisi awalnya tidak berubah sehingga bukan elemen yang tidak stabil.

Tombol "Klik Saya!" sebelumnya tidak ada di DOM, jadi posisi awalnya juga tidak berubah.

Namun, posisi awal kotak hijau berubah, tetapi karena telah dipindahkan sebagian keluar dari area pandang, area yang tidak terlihat tidak dipertimbangkan saat menghitung fraksi dampak. Penyatuan area yang terlihat untuk kotak hijau di kedua bingkai (diilustrasikan dengan persegi panjang bertitik merah) sama dengan area kotak hijau di bingkai pertama—50% dari area pandang. Faksi dampak adalah 0.5.

fraksi jarak diilustrasikan dengan panah ungu. Kotak hijau telah bergerak ke bawah sekitar 14% dari area tampilan sehingga fraksi jarak adalah 0.14.

Skor pergeseran tata letak adalah 0.5 x 0.14 = 0.07.

Contoh berikut menunjukkan bagaimana beberapa elemen yang tidak stabil memengaruhi skor pergeseran tata letak halaman:

Pada frame pertama pada gambar sebelumnya, ada empat hasil permintaan API untuk hewan, yang diurutkan dalam urutan abjad. Di {i>frame<i} kedua, lebih banyak hasil ditambahkan ke daftar yang diurutkan.

Item pertama dalam daftar ("Cat") tidak mengubah posisi awal di antara bingkai, sehingga stabil. Demikian pula, item baru yang ditambahkan ke daftar sebelumnya tidak ada di DOM, jadi posisi awalnya juga tidak berubah. Tapi item berlabel "Dog", "Kuda", dan "Zebra" semuanya akan menggeser posisi awalnya, sehingga menjadikannya elemen yang tidak stabil.

Sekali lagi, persegi panjang putus-putus merah mewakili gabungan ketiga elemen yang tidak stabil' area sebelum dan sesudah, dalam hal ini sekitar 60% dari area area tampilan (fraksi dampak dari 0.60).

Panah mewakili jarak yang dipindahkan elemen yang tidak stabil dari posisi awalnya. "Zebra" , yang diwakili oleh panah biru, telah bergerak paling banyak, sekitar 30% dari tinggi area pandang. Itulah yang membuat fraksi jarak dalam contoh ini 0.3.

Skor pergeseran tata letak adalah 0.60 x 0.3 = 0.18.

Pergeseran tata letak yang diharapkan versus tidak terduga

Tidak semua pergeseran tata letak buruk. Faktanya, banyak aplikasi web dinamis sering mengubah posisi awal elemen pada halaman. Pergeseran tata letak hanya akan berdampak buruk jika pengguna tidak mengharapkannya.

Pergeseran tata letak yang dimulai pengguna

Pergeseran tata letak yang terjadi sebagai respons terhadap interaksi pengguna (seperti mengklik atau mengetuk link, menekan tombol, atau mengetik di kotak penelusuran) umumnya tidak bermasalah, selama pergeseran terjadi cukup dekat dengan interaksi yang hubungannya jelas bagi pengguna.

Misalnya, jika interaksi pengguna memicu permintaan jaringan yang mungkin memerlukan waktu beberapa saat untuk diselesaikan, sebaiknya segera buat beberapa ruang dan tampilkan indikator pemuatan untuk menghindari pergeseran tata letak yang tidak menyenangkan saat permintaan selesai. Jika pengguna tidak menyadari sesuatu sedang dimuat, atau tidak mengetahui kapan resource akan siap, mereka mungkin mencoba mengklik item lain sambil menunggu—sesuatu yang dapat berpindah dari bawah resource.

Pergeseran tata letak yang terjadi dalam waktu 500 milidetik dari input pengguna akan menetapkan tanda hadRecentInput, sehingga dapat dikecualikan dari penghitungan.

Animasi dan transisi

Animasi dan transisi, bila dilakukan dengan baik, adalah cara yang bagus untuk memperbarui konten pada laman tanpa mengejutkan pengguna. Konten yang bergeser secara tiba-tiba dan tidak terduga di halaman hampir selalu menimbulkan pengalaman pengguna yang buruk. Namun, konten yang berpindah secara bertahap dan alami dari satu posisi ke posisi berikutnya sering kali dapat membantu pengguna lebih memahami apa yang terjadi, dan memandu mereka di antara perubahan status.

Pastikan untuk mematuhi setelan browser prefers-reduced-motion, karena beberapa pengunjung situs dapat mengalami efek buruk atau masalah perhatian dari animasi.

Properti transform CSS memungkinkan Anda menganimasikan elemen tanpa memicu pergeseran tata letak:

• Gunakan transform: scale(), bukan mengubah properti height dan width.
• Untuk memindahkan elemen, jangan mengubah properti top, right, bottom, atau left dan gunakan transform: translate() sebagai gantinya.

Cara mengukur CLS

CLS dapat diukur di lab atau di kolom, dan tersedia di alat berikut:

Alat kolom

• Pengalaman Pengguna Chrome Laporkan
• PageSpeed Insights
• Search Console (Data Web Inti) laporan)
• Library JavaScript web-vitals

Alat lab

• Chrome DevTools
• Mercusuar
• PageSpeed Insights
• WebPageTest

Mengukur pergeseran tata letak di JavaScript

Untuk mengukur pergeseran tata letak di JavaScript, gunakan Layout Instability API.

Contoh berikut menunjukkan cara membuat PerformanceObserver untuk mencatat entri layout-shift ke dalam konsol:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Mengukur CLS di JavaScript

Untuk mengukur CLS di JavaScript, Anda perlu mengelompokkan entri layout-shift yang tidak terduga ini ke dalam sesi, dan menghitung nilai sesi maksimum. Anda dapat melihat kode sumber library JavaScript web vitals yang berisi penerapan referensi tentang cara penghitungan CLS.

Pada umumnya, nilai CLS saat ini pada saat halaman dihapus muatannya adalah nilai CLS akhir untuk halaman tersebut, tetapi ada beberapa pengecualian penting seperti yang disebutkan di bagian berikutnya. Library JavaScript web vitals memperhitungkan ini sebanyak mungkin, dalam batasan Web API.

Perbedaan antara metrik dan API

• Jika halaman dimuat di latar belakang, atau berada di latar belakang sebelum browser melukis konten apa pun, halaman tersebut tidak boleh melaporkan nilai CLS apa pun.
• Jika halaman dipulihkan dari back/forward cache, nilai CLS-nya harus direset ke nol karena pengguna mengalami hal ini sebagai kunjungan halaman yang berbeda.
• API tidak melaporkan entri layout-shift untuk pergeseran yang terjadi dalam iframe, tetapi metrik melakukannya sebagaimana entri tersebut merupakan bagian dari pengalaman pengguna halaman. Hal ini dapat ditampilkan sebagai perbedaan antara CrUX dan RUM. Untuk mengukur CLS dengan benar, Anda harus mempertimbangkannya. Sub-frame dapat menggunakan API untuk melaporkan entri layout-shift-nya ke frame induk untuk agregasi.

Selain pengecualian tersebut, CLS memiliki beberapa kompleksitas tambahan karena mengukur seluruh masa aktif halaman:

• Pengguna mungkin membiarkan tab terbuka untuk waktu yang sangat lama—berhari-hari, minggu, bulan. Bahkan, pengguna mungkin tidak pernah menutup tab.
• Pada sistem operasi seluler, browser biasanya tidak menjalankan callback penghapusan muatan halaman untuk tab latar belakang, sehingga sulit untuk melaporkan URL "akhir" dengan sejumlah nilai.

Untuk menangani kasus tersebut, CLS harus dilaporkan setiap kali halaman berada di latar belakang—selain saat halaman dihapus muatannya (peristiwa visibilitychange mencakup kedua skenario ini). Dan sistem analisis yang menerima data ini kemudian harus menghitung nilai CLS akhir di backend.

Daripada mengingat dan menangani sendiri semua kasus ini, developer dapat menggunakan library JavaScript web-vitals untuk mengukur CLS, yang memperhitungkan semua yang disebutkan di atas kecuali kasus iframe:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

Cara meningkatkan CLS

Untuk panduan selengkapnya tentang cara mengidentifikasi pergeseran tata letak di kolom dan menggunakan data lab untuk mengoptimalkannya, lihat panduan kami untuk mengoptimalkan CLS.

Referensi lainnya

• Panduan Tag Google Publisher tentang meminimalkan pergeseran tata letak
• Memahami Pergeseran Tata Letak Kumulatif oleh Annie Sullivan dan Steve Kobes di #PerfMatters (2020)

Log perubahan

Terkadang, bug ditemukan dalam API yang digunakan untuk mengukur metrik, dan terkadang dalam definisi metrik itu sendiri. Akibatnya, perubahan terkadang harus dilakukan, dan perubahan ini dapat muncul sebagai peningkatan atau regresi dalam laporan internal dan dasbor Anda.

Untuk membantu Anda mengelolanya, semua perubahan pada penerapan atau definisi metrik ini akan ditampilkan di Log perubahan ini.

Jika memiliki masukan untuk metrik ini, Anda dapat memberikannya di grup Google untuk masukan web-vitals-feedback.