Cumulative Layout Shift (CLS) adalah metrik Google yang mengukur peristiwa pengalaman pengguna dan telah menjadi faktor peringkat pada tahun 2021.
Ini berarti bahwa penting untuk memahami apa itu CLS dan bagaimana mengoptimalkannya.
Mengatur offset tata letak kumulatif
Apa itu Pergeseran Tata Letak Kumulatif?
CLS adalah pergerakan elemen halaman web yang tidak terduga saat halaman masih diunduh. Jenis item yang cenderung menyebabkan offset adalah font, gambar, video, formulir kontak, tombol, dan jenis konten lainnya.
Penting untuk mengurangi CLS karena halaman yang bergerak dapat menghasilkan pengalaman pengguna yang buruk.
Skor CLS yang buruk menunjukkan masalah pengkodean yang dapat diselesaikan.
Mengapa CLS terjadi
Menurut Google, ada lima alasan mengapa Pergeseran Tata Letak Kumulatif terjadi:
- Gambar tanpa dimensi.
- Iklan, integrasi, dan iframe tanpa dimensi.
- Konten yang disuntikkan secara dinamis.
- Font web yang menyebabkan FOIT/FOUT.
- Tindakan yang menunggu respons jaringan sebelum memperbarui DOM.
Gambar dan video harus memiliki dimensi tinggi dan lebar yang dideklarasikan dalam HTML. Untuk gambar responsif, pastikan bahwa ukuran gambar yang berbeda untuk bentuk tampilan yang berbeda menggunakan rasio aspek yang sama.
Google merekomendasikan penggunaan AspectRatioCalculator.com untuk menghitung rasio aspek. Ini adalah sumber daya yang baik.
Iklan dapat menyebabkan CLS
Yang satu ini agak sulit untuk ditangani. Salah satu cara untuk menangani iklan yang menyebabkan CLS adalah dengan menata item di mana iklan akan ditampilkan.
Misalnya, jika Anda menata div agar memiliki tinggi dan lebar tertentu, iklan akan dibatasi untuk ini.
Ada dua solusi jika kurangnya inventaris dan jika iklan tidak muncul.
Jika item yang berisi iklan tidak menampilkan iklan, Anda dapat mengaturnya sehingga iklan banner alternatif atau gambar tempat penampung digunakan untuk mengisi spasi.
Atau, untuk beberapa tata letak di mana iklan mengisi seluruh baris di bagian atas mungkin kolom di selokan kanan atau kiri halaman web, jika halaman tidak muncul, tidak akan ada jeda. Ini tidak akan membuat perbedaan pada ponsel atau komputer. Tapi itu tergantung pada tata letak tema.
Anda harus mengujinya jika inventaris iklan menjadi masalah.
Konten yang disuntikkan secara dinamis
Ini adalah konten yang disuntikkan ke halaman Web.
Misalnya, di WordPress, Anda dapat menautkan ke video atau Tweet YouTube dan WordPress akan menampilkan video atau tweet sebagai objek bawaan.
Font web
Font web yang diunduh dapat menyebabkan apa yang dikenal sebagai Flash of invisible text (FOIT) dan Flash of Unstyled Text (FOUT).
Salah satu cara untuk menghindarinya adalah dengan menggunakan rel=”preload” di tautan untuk mengunduh font web ini.
Mercusuar dapat membantu Anda mendiagnosis apa yang menyebabkan CLS.
CLS dapat menyelinap selama pengembangan
Offset tata letak kumulatif dapat melewati selama fase pengembangan. Apa yang bisa terjadi adalah bahwa banyak sumber daya yang diperlukan untuk merender halaman dimuat ke dalam cache browser.
Lain kali pengembang atau editor mengunjungi halaman yang sedang dikembangkan, mereka tidak akan melihat perubahan tata letak karena elemen halaman sudah diunduh.
Itulah sebabnya berguna untuk memiliki pengukuran di laboratorium atau di lapangan.
Bagaimana offset tata letak kumulatif dihitung
Perhitungannya melibatkan dua metrik/event. Yang pertama disebut Impact Fraction.
Pecahan dampak
Pecahan dampak adalah ukuran ruang yang ditempati oleh elemen yang tidak stabil di viewport.
Viewport adalah apa yang Anda lihat di layar seluler.
Saat item diunduh lalu bergerak, total spasi ditempati oleh elemen, dari lokasi yang ditempatinya di viewport ketika pertama kali dirender ke lokasi akhir ketika halaman dirender.
Contoh yang digunakan Google adalah elemen yang menempati 50% viewport, lalu berkurang 25% lebih banyak.
Ketika ditambahkan, nilai 75% disebut fraksi dampak dan dinyatakan sebagai skor 0,75.
Pecahan Jarak
Pengukuran kedua disebut fraksi jarak. Pecahan jarak adalah jumlah ruang yang telah dipindahkan elemen halaman dari posisi asli ke posisi akhir.
Pada contoh di atas, elemen halaman telah dipindahkan sebesar 25%.
Jadi, sekarang skor tata letak kumulatif dihitung dengan mengalikan pecahan dampak dengan pecahan jarak:
0,75 x 0,25 = 0,1875
Ada pertimbangan matematika dan lainnya yang masuk ke dalam perhitungan. Yang penting untuk diingat dari ini adalah bahwa mencetak gol adalah cara mengukur faktor pengalaman pengguna yang penting.
Cara mengukur CLS
Ada dua cara untuk mengukur CLS. Google memanggil cara pertama di laboratorium. Cara kedua disebut di lapangan.
Di laboratorium berarti mensimulasikan pengguna nyata yang mengunduh halaman web. Google menggunakan Moto G4 yang disimulasikan untuk menghasilkan skor CLS di lingkungan lab.
Alat lab adalah yang terbaik untuk memahami bagaimana tata letak dapat bekerja sebelum mendorongnya langsung ke pengguna. Ini memberi editor kemampuan untuk menguji tata letak untuk masalah.
Alat lab terdiri dari Chrome Dev Tools dan Lighthouse.
Memahami offset tata letak kumulatif
Penting untuk memahami offset tata letak kumulatif. Tidak perlu memahami bagaimana melakukan perhitungan sendiri.
Tetapi memahami apa artinya dan bagaimana cara kerjanya sangat penting karena sekarang menjadi bagian dari faktor peringkat Core Web Vitals.
