Cumulative Layout Shift: Pengertian dan Cara Optimasinya
Cumulative Layout Shift adalah salah satu elemen website yang memberi pengaruh yang cukup kuat terhadap pengalaman pengguna. Artinya, Cumulative Layout Shift (CLS) memiliki peran yang sangat penting dan berdampak pada Search Engine Optimization (SEO) website. Dengan mengetahui apa itu Cumulative Layout Shift dan bagaimana untuk mencapai nilai yang baik dapat mendorong Anda untuk dapat meningkatkan performa website.
Pengertian Cumulative Layout Shift (CLS)
Cumulative Layout Shift adalah metrik yang digunakan untuk menilai stabilitas tampilan halaman website dengan cara menghitung seberapa sering halaman web Anda mengalami perubahan. Sederhananya, matrik tersebut diartikan sebagai Pergeseran Tata Letak Kumulatif.
Cumulative Layout Shift sangatlah penting dalam sebuah website karena menjadi metrik yang memiliki peran besar yang termasuk dalam Core Web Vitals. Sementara Core Web Vitals tersebut merupakan salah satu faktor untuk menentukan peringkat yang dipakai oleh Google. Jadi Google akan memberikan sanksi pada website jika standarnya tidak terpenuhi.
Kategori Nilai Cumulative Layout Shift
Untuk membantu pengelola website mengontrol dan memperbaiki nilai CLS, terdapat standar yang telah ditetapkan oleh Google untuk semua metrik Core Web Vitals.
Bagus (Good)
Nilai yang kurang dari sama dengan 0,1 merupakan nilai yang dapat diterima sesuai dengan standar Google.
Perlu Peningkatan (Need Improvement)
Nilai antara 0,1 sampai 0,25 menunjukkan pengelola website perlu memperbaiki nilai CLS dengan melakukan perubahan sehingga dapat mengurangi pergeseran tak terduga.
Buruk (Poor)
Nilai lebih dari sama dengan 0,25 yang dapat menurunkan peringkat website di halaman Google secara signifikan.
Namun perlu diingat bahwa meskipun satu website dapat memiliki nilai CLS berbeda di setiap halaman websitenya serta jenis layar perangkat tempatnya diakses. Umumnya, pergeseran layout pada layar ponsel memberikan dampak lebih baik terhadap pengalaman pengguna.
Cara Mengetahui Skor Cumulative Layout Shift
Untuk menghitung skor Cumulative Layout Shift, terdapat dua cara yang paling sering digunakan.
Menilai CLS di Lab
Untuk menghitung skor CLS dengan developer tools melalui Google Chrome caranya sebagai berikut.
- Bukalah browser Anda kemudian klik More tools (Fitur Lainnya) >> Developer Tools (Alat Pengembang). Cara alternatifnya yaitu tekan Ctrl + Shift + i kemudian bukalah panel Performance.
- Checklist pilihan Web Vitals >> reload untuk menyegarkan halaman, atau bisa juga tekan Ctrl + Shift + E untuk merecord loading halaman.
- Tunggulah hasilnya beberapa saat, lalu klik tab Layout Shift di bagian sisi Experience. Setelah itu akan ditampilkan Cumulative Score di bagian bawah Summary.
Menilai CLS di Lapangan
Selain itu, ada cara lain untuk menilai skor CLS, yaitu dengan data penggunaan asli melalui tool page speed inside.
- Masuk pada halaman web url tersebut kemudian klik Analyze untuk mengetahui performanya.
- Selanjutnya akan ditampilkan Core Web Vital Assessment secara menyeluruh serta apakah halaman web tersebut sesuai dengan standar Google atau tidak.
- Klik desktop untuk mengetahui nilai CLS perangkat desktop, karena yang akan ditampilkan terlebih dahulu oleh tool adalah untuk perangkat Selular. Kemudian Anda akan mengetahui nilainya berbeda dengan nilai di perangkat mobile.
- Klik Expand View jika ingin memahami nilai secara detail.
Cara Menghitung Nilai Cumulative Layout Shift
Berikut merupakan cara menghitung nilai CLS dengan mudah.
Nilai CLS akhir = Impact Fraction x Distance Fraction
Impact Fraction
Impact fraction adalah metrik untuk mengukur pengaruh elemen tidak stabil di viewport. Ketika elemen yang dapat dilihat kemudian bergeser secara tiba-tiba ke area lainnya, maka infak fraction akan melakukan perhitungan semua area yang mengalami dampak pergeseran. Sederhananya, Impact fraction merupakan area terdampak/area viewport.
Distance Fraction
Distance fraction adalah metrik untuk mengukur sejauh mana elemen bergerak di viewport. Sederhananya, diskonstruction merupakan jarak pergeseran maksimum.
Cara Mengoptimalkan Nilai Cumulative Layout Shift
Adapun beberapa cara untuk mengoptimalkan skor Cumulative Layout Shift adalah sebagai berikut.
Menambahkan Dimensi
Anda dapat menentukan dimensi gambar dan video untuk mengoptimalkan skor CLS. Untuk menentukan dimensi cukup mudah dan memberikan dampak yang cukup baik.
Setiap elemen video dan gambar pada halaman website membutuhkan atribut lebar dan tinggi sehingga dapat menghindari pergeseran tak terduga.
Browser dapat menghitung berapa ruang yang dibutuhkan untuk menampilkan gambar secara benar dengan cara menerapkan rasio lebar x tinggi yang sama.
Mengatur Lebar dan Tinggi Iklan
Iklan banner dapat mendorong konten dilihat oleh para pengguna sehingga membuat layout banyak bergeser. Alhasil pengalaman pengguna website pun kurang optimal.
Begitu juga iklan sematan yang mempunyai banyak bentuk sehingga ukuran pada halaman website pun menjadi tidak menentu. Jika ingin beberapa iklan tersebut tidak membuat nilai CLS buruk, Anda perlu melakukan inspeksi ukuran menggunakan developer tool browser.
Caranya yaitu klik ikon pointer di bagian pojok kiri atas pada developer tool, kemudian pilihlah elemen yang hendak diinspeksi. Setelah itu tool akan menunjukkan ukurannya, lalu tambahkan ukuran tersebut pada elemen iklan sematan atau iframe.
Menambahkan Custom Font
Skor CLS dapat lebih optimal dengan menambahkan custom font karena adanya Flashes of Insible Text (FOIT) dan Flashes of Unstyled Text (FOUT).
FOIT yaitu rendering halaman yang akan menunjukkan teks font kosong hingga font custom selesai loading. Sedangkan FOUT yaitu browser yang menampilkan font pengganti hingga font custom selesai loading, serta mengabaikan layout halaman sementara.
Dengan font web custom dapat membuat layout berubah dengan signifikan karena penggunaan jumlah ruang yang tidak sama dari yang diperlukan oleh sound system. Jadi, Cumulative Layout Shift adalah elemen penting dalam meningkatkan performa website sehingga memberikan pengalaman pengguna yang baik.
Coding Studio membuka kesempatan kepada Anda untuk belajar CLS dalam kelas khusus. Anda akan dibimbing oleh mentor terbaik untuk bisa mengembangkan website lebih profesional dengan performa bagus.
