Cumulative Layout Shift (CLS)

Pemuatan gambar/iklan yang lambat, operasi asinkron, perubahan DOM dinamis, dan sebagainya

mengukur seberapa besar layout halaman web berubah,

sehingga dapat memeriksa ketidakstabilan visual yang berpotensi menyebabkan pengguna melakukan klik yang salah; ini adalah metrik performa berfokus pada pengguna.

"Skor CLS yang baik adalah 0,1 atau kurang"

Melalui Layout Instability API, disediakan nilai pengukuran bernama Layout Shift Score

- Layout Shift Score = impact fraction (seberapa besar objek yang berpindah) * distance fraction (seberapa jauh perpindahannya)

- Perubahan layout yang terjadi karena tindakan pengguna tidak masalah - jika ada input pengguna dalam 500 ms terakhir, `hadRecentInput` akan disetel sehingga dapat dikeluarkan dari perhitungan

- Alih-alih mengubah `height`/`width`, gunakan `transform:scale()`

- Alih-alih mengubah `top,right,bottom,left`, gunakan `transform: translate()`

Cara meningkatkan CLS

- Selalu tentukan ukuran untuk gambar/video atau cadangkan posisinya terlebih dahulu dengan CSS Aspect Ratio Boxes dan sejenisnya

- Jangan menambahkan konten baru di atas konten yang sudah ada, kecuali untuk interaksi pengguna

- Untuk perubahan antarstatus, gunakan animasi seperti CSS Transform

[kunggom]

Sering bikin kesal ketika tepat saat mau menekan sesuatu, tata letaknya tiba-tiba sedikit berubah dan jadi salah sentuh; akhirnya sekarang ada juga cara untuk mengukur hal ini secara kuantitatif. Menurut saya pribadi, kalau ini dipakai untuk mengukur homepage situs media, kemungkinan angkanya akan sangat mengenaskan.

[xguru]

Media Korea punya terlalu banyak iklan, dan iklan-iklannya sendiri lambat serta berkedip-kedip, jadi rasanya mengukur hal itu sendiri jadi tidak terlalu bermakna...

Ngomong-ngomong, saya memakai https://github.com/disjukr/just-news dan Tampermonkey, jadi untuk media Korea saya hanya melihat isi artikelnya saja. Situs webnya terlalu berantakan.

[kunggom]

Dulu saya bahkan pernah mencoba membuat program dengan Python untuk [secara otomatis mengubah tautan artikel media menjadi tautan artikel berita portal]. Agak konyol, source code-nya malah hilang (saya keliru menyimpan di RAM drive lalu reboot), dan setelah sempat kena mode sadar diri(?) saya pun jadi menghentikannya.

[xguru]

Metrik performa yang berfokus pada pengguna

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

load dan DOMContentLoaded yang selama ini digunakan bukan metrik yang baik

First contentful paint (FCP): saat konten pertama mulai ditampilkan di layar

Largest contentful paint (LCP): saat blok teks atau gambar terbesar di halaman ditampilkan

First input delay (FID): waktu yang dibutuhkan browser untuk benar-benar merespons setelah input pengguna dimungkinkan

Time to Interactive (TTI): waktu dari mulai memuat hingga interaksi pengguna menjadi memungkinkan

Total blocking time (TBT): total waktu antara FCP dan TTI

Cumulative layout shift (CLS): metrik perubahan tata letak