Cumulative Layout Shift (CLS)

Milica Mihajlija
Philip Walton

Dukungan Browser

  • 77
  • 79
  • x
  • x

Sumber

Pergeseran Tata Letak Kumulatif (CLS) adalah metrik Core Web Vitals yang stabil. Metrik ini adalah metrik penting yang berfokus pada pengguna untuk mengukur stabilitas visual karena membantu mengukur seberapa sering pengguna mengalami pergeseran tata letak yang tidak terduga. CLS yang rendah membantu memastikan bahwa halaman menyenangkan.

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

Pergeseran tata letak yang tiba-tiba membuat pengguna mengonfirmasi pesanan dalam jumlah besar yang ingin mereka batalkan.

Gerakan 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 gerakan mungkin berupa gambar atau video dengan dimensi yang tidak diketahui, font yang dirender lebih besar atau lebih kecil daripada penggantiannya, atau iklan atau widget pihak ketiga yang secara dinamis mengubah ukurannya sendiri.

Perbedaan antara fungsi situs dalam pengembangan dan pengalaman penggunanya memperburuk masalah ini. Contoh:

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

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

Apa itu CLS?

CLS adalah ukuran burst skor pergeseran tata letak terbesar untuk setiap pergeseran tata letak yang tidak terduga yang terjadi selama masa aktif halaman.

Pergeseran tata letak terjadi setiap kali elemen yang terlihat mengubah posisinya dari satu frame yang dirender ke frame berikutnya. Lihat Skor pergeseran tata letak untuk mengetahui detail tentang cara pengukuran pergeseran ini.

Bursa pergeseran tata letak, yang dikenal sebagai periode sesi, adalah saat satu atau beberapa pergeseran tata letak individual terjadi secara berurutan dengan waktu kurang dari 1 detik di antara setiap shift, selama periode maksimum 5 detik.

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

Contoh periode sesi. Batang biru mewakili skor setiap pergeseran tata letak individual.

Berapa skor CLS yang baik?

Untuk memberikan pengalaman pengguna yang baik, situs harus memiliki skor CLS 0,1 atau kurang. Untuk memastikan Anda mencapai target ini bagi sebagian besar pengguna, sebaiknya ukur persentil ke-75 pemuatan halaman, yang tersegmentasi di seluruh perangkat seluler dan desktop.

Nilai CLS yang baik adalah 0,1 atau kurang, nilai yang buruk lebih besar dari 0,25, dan apa pun di antaranya perlu perbaikan
Nilai CLS yang baik adalah 0,1 atau kurang. Nilai yang buruk lebih besar dari 0,25.

Untuk mempelajari penelitian dan metodologi di balik rekomendasi ini lebih lanjut, lihat Menentukan nilai minimum metrik Data Web Inti.

Pergeseran 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 yang perubahan posisi awalnya dianggap sebagai elemen yang tidak stabil.

Pergeseran tata letak hanya terjadi saat elemen yang ada mengubah posisi awalnya. Jika elemen baru ditambahkan ke DOM atau elemen yang ada berubah ukuran, elemen tersebut hanya dihitung sebagai pergeseran tata letak jika perubahan tersebut menyebabkan elemen lain yang terlihat mengubah posisi awalnya.

Skor pergeseran tata letak

Untuk menghitung skor pergeseran tata letak, browser mempertimbangkan ukuran area tampilan dan pergerakan elemen yang tidak stabil di area tampilan di antara dua frame yang dirender. Skor pergeseran tata letak adalah hasil kali dari dua ukuran gerakan tersebut: fraksi dampak dan fraksi jarak.

layout shift score = impact fraction * distance fraction

Fraksi dampak

Faksi dampak mengukur bagaimana elemen yang tidak stabil memengaruhi area area tampilan di antara dua frame.

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.

Contoh pecahan dampak dengan satu elemen yang tidak stabil
Jika suatu elemen mengubah posisi, baik posisi sebelumnya maupun posisi saat ini akan berkontribusi pada fraksi dampaknya.

Gambar ini menampilkan elemen yang menempati setengah area pandang dalam satu bingkai. Di frame berikutnya, elemen bergeser ke bawah sebesar 25% dari tinggi area pandang. Persegi panjang putus-putus merah menunjukkan area yang terlihat pada elemen di atas kedua bingkai, yang dalam hal ini adalah 75% dari total area tampilan, sehingga fraksi dampaknya adalah 0.75.

Fraksi jarak

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

Contoh pecahan jarak dengan satu elemen yang tidak stabil
Faksi jarak mengukur seberapa jauh pergerakan elemen di seluruh area pandang.

Dalam contoh ini, dimensi area tampilan terbesar adalah tinggi, dan elemen yang tidak stabil telah berpindah sebesar 25% dari tinggi area tampilan, sehingga menghasilkan fraksi jarak 0.25.

Fraksi dampak 0.75 dan fraksi jarak 0.25 menghasilkan skor perubahan tata letak 0.75 * 0.25 = 0.1875.

Contoh

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

Contoh pergeseran tata letak dengan beberapa elemen stabil dan _tidak stabil_
Menambahkan tombol ke bagian bawah kotak abu-abu akan mendorong kotak hijau ke bawah dan sebagian keluar dari area tampilan.

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

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

Posisi awal kotak hijau berubah, tetapi telah dipindahkan sebagian dari area tampilan, dan area yang tidak terlihat tidak dipertimbangkan saat menghitung fraksi dampak. Penyatuan area yang terlihat untuk kotak hijau di kedua frame (kotak putus-putus merah) sama dengan luas kotak hijau di frame pertama—50% dari area tampilan. Fraksi dampak adalah 0.5.

Fraksi jarak diilustrasikan dengan panah biru. 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:

Contoh pergeseran tata letak dengan elemen stabil dan _tidak stabil_ serta pemotongan area pandang
Karena semakin banyak nama yang muncul dalam daftar yang diurutkan ini, nama yang ada akan dipindahkan untuk mempertahankan urutan abjad.

Item pertama dalam daftar ("Kucing") tidak mengubah posisi awalnya di antara bingkai, sehingga stabil. Item baru yang ditambahkan ke daftar sebelumnya tidak ada di DOM sehingga posisi awalnya tidak berubah. Namun, item berlabel "", "Kuda", dan "Zebra" mengubah posisi awal mereka, sehingga elemen tersebut tidak stabil.

Sekali lagi, persegi panjang putus-putus merah mewakili area dari tiga elemen yang tidak stabil ini sebelum dan setelah pergeseran, yang dalam hal ini sekitar 60% dari area area pandang (fraksi dampak 0.60).

Panah mewakili jarak yang dipindahkan elemen yang tidak stabil dari posisi awalnya. Elemen "Zebra", yang diwakili oleh panah biru, telah berpindah paling banyak, sekitar 30% dari tinggi area pandang. Hal tersebut menghasilkan 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 yang tidak diharapkan

Tidak semua pergeseran tata letak buruk. Faktanya, banyak aplikasi web dinamis sering kali mengubah posisi awal elemen di halaman. Pergeseran tata letak hanya 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 dapat dilakukan, selama pergeseran terjadi cukup dekat dengan interaksi sehingga hubungannya jelas bagi pengguna.

Misalnya, jika interaksi pengguna memicu permintaan jaringan yang mungkin memerlukan waktu 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 ada sesuatu yang sedang dimuat, atau tidak mengetahui kapan resource akan siap, mereka mungkin mencoba mengklik sesuatu yang lain sambil menunggu, dan elemen lain tersebut mungkin berpindah dari bawahnya ketika yang pertama selesai dimuat.

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

Animasi dan transisi

Animasi dan transisi, jika dibuat dengan baik, adalah cara yang bagus untuk memperbarui konten di halaman tanpa mengejutkan pengguna. Konten yang bergeser secara tiba-tiba dan tidak terduga di halaman hampir selalu menghasilkan pengalaman pengguna yang buruk. Namun, konten yang bergerak secara bertahap dan alami dari satu posisi ke posisi lain 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 animasi dapat menyebabkan masalah kesehatan atau perhatian bagi sebagian pengunjung situs.

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

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

Cara mengukur CLS

CLS dapat diukur di lab atau di lapangan, dan tersedia di alat berikut.

Alat lapangan

Alat lab

Mengukur pergeseran tata letak di JavaScript

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

Contoh berikut menunjukkan cara membuat PerformanceObserver untuk mencatat entri layout-shift ke 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, kelompokkan entri layout-shift tidak terduga yang Anda login ke sesi dan hitung nilai sesi maksimum. Untuk implementasi referensi, lihat kode sumber library JavaScript web vitals.

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

Perbedaan antara metrik dan API

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

Selain pengecualian ini, CLS memiliki lebih banyak kompleksitas karena mengukur seluruh masa aktif halaman:

  • Pengguna mungkin membiarkan tab terbuka dalam waktu yang sangat lama—hari, minggu, bahkan bulan. Faktanya, pengguna mungkin tidak pernah menutup tab.
  • Pada sistem operasi seluler, browser biasanya tidak menjalankan callback penghapusan muatan halaman untuk tab latar belakang, sehingga menyulitkan pelaporan nilai "final".

Untuk menangani kasus tersebut, sebaiknya sistem Anda melaporkan CLS setiap kali halaman berada di latar belakang, selain setiap kali halaman dihapus muatannya. Peristiwa visibilitychange mencakup kedua skenario ini. Sistem analisis yang menerima data ini kemudian harus menghitung nilai CLS akhir di backend.

Alih-alih mengingat dan menangani semua kasus ini sendiri, developer dapat menggunakan library JavaScript web-vitals untuk mengukur CLS, yang memperhitungkan semua yang disebutkan di sini 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

Log perubahan

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

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

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