Apa Itu Cumulative Layout Shift (CLS)?<\/h2>\n
Cumulative Layout Shift adalah metrik yang menilai stabilitas visual halaman web. Metrik ini menghitung jumlah total pergeseran layout yang tak terduga pada halaman web, yaitu ketika posisi atau ukuran elemen yang ditampilkan berubah sehingga menggeser konten di sekitarnya.<\/p>\n <\/div>\n\n\n\n<\/p>
Cumulative Layout Shift<\/strong> (CLS)<\/strong> merupakan metrik yang menilai pengalaman website dengan menghitung seberapa sering halaman website Anda mengalami pergeseran yang tak terduga. Dalam bahasa Indonesia, metrik ini dikenal sebagai Pergeseran Tata Letak Kumulatif<\/strong>.<\/p> Meskipun elemen website yang memengaruhi pengalaman pengguna tidak hanya satu, nilai CLS yang buruk juga berdampak pada search engine optimization (SEO)<\/a> website. Nah, memahami pengertian CLS dan cara mencapai nilai CLS yang baik akan membantu meningkatkan performa website Anda secara keseluruhan.<\/p> Di artikel ini, kami akan menjelaskan berbagai cara mengetahui skor CLS dan elemen-elemen apa saja yang memengaruhinya. Lalu, kami juga menjawab beberapa pertanyaan umum terkait CLS di akhir artikel. Yuk, baca sampai selesai!<\/p> Cumulative Layout Shift adalah salah satu faktor peringkat di Google<\/a> yang memengaruhi performa website dan pengalaman pengguna. CLS juga merupakan salah satu metrik Core Web Vitals<\/a>. Jadi, website bisa menerima sanksi dari Google kalau tidak memenuhi standarnya.<\/p> Nilai CLS yang buruk menunjukkan bahwa website kurang kredibel. Akibatnya, pengunjung pun menjadi enggan berlama-lama membukanya. Karena itulah, optimasi website<\/a> untuk mendapatkan nilai CLS yang tinggi menjadi komponen penting dalam strategi SEO yang sukses<\/a>.<\/p> Nilai CLS yang tinggi menandakan bahwa ada banyak pergeseran layout yang tak terduga di halaman web. Di sisi lain, halaman yang sepenuhnya statis bisa memperoleh nilai yang rendah, bahkan nol<\/strong>.<\/p> Google telah menetapkan standar bagi semua metrik Core Web Vitals untuk membantu pemilik website mengukur dan memperbaiki nilai CLS mereka:<\/p> Satu website bisa memiliki nilai CLS yang berbeda untuk setiap halaman webnya dan jenis layar tempatnya diakses. Pergeseran layout yang terjadi di layar perangkat seluler memiliki dampak yang lebih signifikan terhadap pengalaman penggunanya.<\/p> \n\n Berikut adalah 2 cara yang sering digunakan untuk menghitung skor Cumulative Layout Shift:<\/p> Keduanya tidak ada yang lebih baik atau lebih buruk. Cara tersebut sama-sama memberikan data yang lebih kredibel tentang performa website. Untuk membantu mengetahui nilai CLS website Anda, Google menyediakan beberapa tool gratis<\/strong>.<\/p> Saat menilai CLS di lab, hasil yang ditampilkan akan memperhitungkan sejumlah kecil kemungkinan. Sebagian besar developer tool browser menyediakan cara untuk menghitung nilai CLS halaman web, biasanya menampilkan overlay persegi panjang yang menunjukkan bagian yang terpengaruh.<\/p> Berikut cara mengetahui skor CLS menggunakan Developer Tools <\/strong>di Google Chrome<\/strong>:<\/p> Perlu diketahui, beberapa tab Cumulative Layout Shift<\/strong> mungkin memberikan nilai yang berbeda karena berbagai elemen visual memperlihatkan adanya perubahan layout. Klik setiap tab untuk melihat elemen mana yang menyebabkan masalah pada halaman web Anda.<\/p> Tool lain yang bisa membantu Anda menilai skor CLS dalam environment terkontrol adalah Lighthouse<\/a> dan ekstensi Chrome Web Vitals<\/a>.<\/p> Cara lainnya adalah dengan menilai interaksi dari pengguna asli menggunakan Laporan Pengalaman Pengguna Chrome (CrUX)<\/a> sebagai sumber data utama, yang membantu menganalisis performa website Anda secara keseluruhan.<\/p> Tool yang cukup populer untuk membantu menilai data pengguna asli adalah PageSpeed Insights<\/a>. Berikut langkah-langkah menggunakan PageSpeed Insights untuk menghitung nilai CLS halaman web:<\/p> Tool populer lainnya untuk membantu mengukur CLS di lapangan adalah BigQuery<\/a> dan Data Studio<\/a>.<\/p> Memahami cara menghitung skor Cumulative Layout Shift akan membantu Anda mengoptimalkannya. Skor CLS ini menilai 2 elemen dalam pergeseran layout tak terduga:<\/p> Berikut cara menghitung skor CLS:<\/p> Nilai CLS akhir = Impact fraction x Distance fraction<\/strong><\/p> Impact fraction menilai seberapa banyak ruang di area viewport yang digunakan oleh elemen yang tidak stabil. Saat elemen yang bisa kita lihat tiba-tiba bergeser ke area lain, impact fraction akan menghitung total area yang terkena dampak pergeseran:<\/p> Impact Fraction = Area yang terdampak \/ Area viewport<\/strong><\/p> Nilai ini menunjukkan bagaimana elemen yang tidak stabil akan memengaruhi performa website secara keseluruhan.<\/p> Distance fraction menilai jarak terbesar yang dicapai oleh elemen yang tidak stabil pada saar terjadi pergeseran layout tak terduga. Distance fraction dihitung dengan cara:<\/p> Distance fraction = Jarak pergeseran maksimum \/ Area viewport<\/strong><\/p> Nilai ini menunjukkan seberapa jauh elemen menggeser elemen lainnya saat terjadi pergeseran tak terduga.<\/p> Apabila halaman web memiliki nilai CLS yang buruk, mungkin ada beberapa elemen yang perlu dicek:<\/p> Tindakan ini biasanya menunggu respons jaringan untuk mengupload elemen, yang menyebabkan semakin besarnya pergeseran layout tak terduga.<\/p> Tool yang tadi dijelaskan untuk menilai skor CLS halaman web juga bisa menunjukkan elemen mana saja yang mungkin menyebabkan masalah pergeseran layout.<\/p> Misalnya, panel Performance<\/strong> pada developer tool browser menunjukkan elemen tidak stabil dalam tab Cumulative Layout Shift<\/strong>.<\/strong><\/p> Summary<\/strong> atau Ringkasan juga memberitahukan Lokasi<\/strong> dan Ukuran<\/strong> asli & baru elemen yang tidak stabil.<\/p> Di PageSpeed Insights, cari detail lengkap elemen yang menyebabkan pergeseran tak terduga di bagian DIAGNOSTICS<\/strong>.<\/p> Nilai CLS adalah salah satu faktor penentu peringkat. Jadi, mengoptimalkannya bisa membantu Anda meningkatkan traffic website<\/a>. Berikut 4 cara mengoptimalkan skor CLS Anda, beserta tingkat kesulitan dan dampaknya masing-masing.<\/p> Tingkat Kesulitan: Mudah<\/strong><\/p> Dampak: Tinggi<\/strong><\/p> Semua elemen gambar dan video di halaman web memerlukan atribut ukuran lebar dan tinggi untuk menghindari pergeseran tak terduga. Contoh cara menetapkan atribut lebar dan tinggi akan terlihat seperti berikut:<\/p> Namun, gambar responsif perlu menggunakan rasio lebar x tinggi yang sama agar browser bisa menghitung jumlah ruang yang diperlukan untuk menampilkan gambar dengan benar.<\/p> Atribut srcset<\/strong> akan menentukan ukuran gambar yang berbeda menurut rasio lebar x tinggi yang sama. Nantinya, ini akan membantu browser mengirimkan gambar responsif dengan benar. Berikut contoh kodenya menggunakan atribut ini:<\/p> Sebagian besar browser modern juga bisa mengatur rasio lebar x tinggi default berdasarkan atribut lebar dan tinggi gambar atau video. Jadi, salah satu cara mengoptimalkan CLS adalah dengan menggunakan kotak aspect ratio CSS seperti contoh berikut:<\/p> Kode ini membantu browser memprediksi berbagai rasio lebar x tinggi dengan mengikuti dimensi gambar saat dimuat.<\/p> Tingkat Kesulitan: Sedang<\/strong><\/p> Dampak: Tinggi<\/strong><\/p> Menyiapkan (reserve) ruang untuk iklan banner, sematan (embed), dan iFrame membantu menghindari perubahan layout.<\/p> Iklan Banner<\/strong><\/p> Iklan banner bisa mendorong konten yang dilihat oleh pengguna, sehingga mungkin menyebabkan layout banyak bergeser. Akibatnya, user experience website menjadi kurang optimal.<\/p> Network dan publisher iklan yang mendukung ukuran iklan dinamis harus menyiapkan ruang atau placehoder lebih dulu agar nilai CLS tidak menurun.<\/p> Atur gaya elemen sebelum library tag iklan dimuat sehingga iklan banner tidak mendorong konten yang tampak di layar. Cara ini juga penting diterapkan saat iklan mengisi seluruh baris atau kolom halaman sehingga layout tidak bergeser meskipun iklan tidak loading.<\/p> Gunakan elemen slot untuk menentukan ukuran iklan dengan properti CSS min-height<\/strong> dan min-width<\/strong>:<\/p> Selain itu, tambahkan kueri media CSS untuk menentukan berbagai ukuran minimum saat menggunakan layar yang ukurannya berbeda:<\/p> Gunakan data yang sudah pernah Anda tentukan untuk memilih ukuran terbaik slot iklan. Pastikan Anda juga mempertimbangkan berbagai faktor bentuk (form factor) dan perbedaan kecil dalam ukuran iklan.<\/p> Cara ini juga bisa diterapkan saat Anda memasang non-sticky ads (iklan yang hilang saat halaman di-scroll) ke halaman web. Dengan menambahkan ruang yang diperlukan, iklan tidak akan memicu layout untuk bergeser saat halaman dimuat dengan lazy loading<\/a>.<\/p> Sematan dan iFrame<\/strong><\/p> Embed atau sematan bisa memiliki berbagai bentuk, sehingga ukurannya di halaman web bisa menjadi tidak pasti. Oleh karena itu, platform tidak selalu menyediakan ruang yang diperlukan untuk widget dan aplikasi yang bisa di-embed.<\/p> Demikian halnya dengan Inline Frame (iFrame)<\/a>, yang menyertakan elemen pihak ketiga ke halaman web, yang bisa menyebabkan pergeseran layout.<\/p> Agar embed dan iFrame tidak menyebabkan nilai CLS menjadi buruk, inspeksi ukurannya menggunakan developer tool browser Anda. Klik ikon pointer<\/strong> di pojok kiri atas developer tool, lalu pilih elemen yang ingin Anda inspeksi.<\/p> Setelah memilih elemen, tool akan menunjukkan ukurannya.<\/p> Tambahkan ukuran ini ke elemen sematan atau iFrame Anda.<\/p> Tingkat Kesulitan: Sedang<\/strong><\/p> Dampak: Sedang<\/strong><\/p> Menambahkan custom font<\/a> ke website bisa mengoptimalkan skor CLS karena adanya:<\/p> Memuat font web kustom bisa menyebabkan layout berubah secara signifikan. Biasanya, penyebabnya adalah penggunaan jumlah ruang yang berbeda dari yang dibutuhkan oleh font sistem. Gunakan nilai font:display<\/strong> seperti auto<\/strong>, fallback<\/strong>, block<\/strong>, swap<\/strong>, dan optional<\/strong> untuk menghindari teks invisible dan yang tidak memiliki style.<\/p> Cara lain untuk menghindari perubahan gaya yang signifikan pada font web Anda adalah dengan memilih font sistem yang serupa:<\/p> Dengan custom web font Google, Anda bisa mencegah pergeseran layout dengan menambahkan &display=swap<\/strong> setelah link Anda:<\/p> Menambahkan nilai <link rel=preload><\/strong> ke file font Anda juga akan membantu menghindari pergeseran layout saat memuat custom web font.<\/p> Tingkat Kesulitan: Sedang<\/strong><\/p> Dampak: Tinggi<\/strong><\/p> Penyebab nilai CLS rendah berikutnya adalah adanya konten dinamis. Website sering menggunakan konten dinamis agar pengunjung tertarik untuk melakukan tindakan tertentu.<\/p> Tapi, ketika ada elemen konten baru yang muncul di bagian atas atau bawah halaman, konten tersebut sering kali menggeser konten di sekitarnya.<\/p> Oleh karena itu, hindari menyertakan konten dinamis di atas konten yang sudah ada. Beberapa cara untuk meninjau konten yang disertakan secara dinamis meliputi:<\/p> Nah, sekarang Anda sudah tahu pengertian dan cara mengoptimasi Cumulative Layout Shift.<\/p> Seperti yang sudah dijelaskan, Cumulative Layout Shift adalah metrik yang mengukur pergeseran tak terduga di viewport pengguna untuk menilai user experience website. Metrik ini juga merupakan faktor peringkat Google yang memengaruhi SEO Anda secara signifikan.<\/p> Halaman web dengan stabilitas visual yang bagus memiliki nilai CLS di bawah 0,1<\/strong>. Sedangkan nilai di atas 0,25<\/strong> menunjukkan bahwa performa website buruk.<\/p> Di artikel ini, kami juga sudah menjelaskan 2 cara mengetahui skor CLS, yaitu di lab<\/strong> dan di lapangan<\/strong>. Anda boleh memilih salah satu cara ini, tapi melakukan dua-duanya akan membuat performa website Anda lebih optimal.<\/p> Kemudian, setelah membagikan cara menemukan penyebab skor CLS buruk, kami juga membahas cara mengatasi masalah Cumulative Layout Shift menggunakan 4 metode berikut:<\/p> Jadi, cara mana yang paling berhasil untuk mengoptimalkan skor CLS Anda? Jangan ragu untuk menyampaikannya lewat kolom komentar di bawah ini, ya.<\/p> Kalau ingin performa website Anda lebih baik lagi, pastikan juga untuk menggunakan paket web hosting yang tepercaya. Semoga berhasil!<\/p> Pergeseran layout yang terduga terjadi saat ada user input. Misalnya, saat pengunjung mengklik tombol. Sedangkan pergeseran layout tak terduga terjadi saat ada elemen di viewport yang bergerak tanpa inisiatif pengguna.<\/p>\n Ingat, nilai CLS Anda hanya dihitung dari perubahan layout tak terduga.<\/p>\n\n<\/div>\n<\/div>\n Lazy loading bisa memengaruhi perubahan layout saat pengguna menscroll halaman web, dan elemen visualnya masih dalam proses loading. Tapi, lazy loading penting untuk membantu mengoptimalkan gambar<\/a> di web page.<\/p>\n Oleh karena itu, jangan lupa menentukan dimensi gambar lazy loading agar tidak memengaruhi nilai CLS Anda.<\/p>\n\n<\/div>\n<\/div>\n Ya, hanya pergeseran layout konten di area paruh atas halaman yang akan memengaruhi nilai CLS. Tapi, sebaiknya optimalkan semua elemen di halaman web agar keseluruhan performa bisa meningkat.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div> <\/p>\n","protected":false},"excerpt":{"rendered":" Cumulative Layout Shift (CLS) merupakan metrik yang menilai pengalaman website dengan menghitung seberapa sering halaman website Anda mengalami pergeseran yang tak terduga. Dalam bahasa Indonesia, metrik ini dikenal sebagai Pergeseran Tata Letak Kumulatif. Meskipun elemen website yang memengaruhi pengalaman pengguna tidak hanya satu, nilai CLS yang buruk juga berdampak pada search engine optimization (SEO) website. […]<\/p>\n![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/public\")
<\/a><\/figure>Pengaruh Nilai Cumulative Layout Shift pada SEO<\/h2>
Berapa Nilai Cumulative Layout Shift yang Bagus?<\/h3>
\n
![\"cumulative](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/cumulative-layout-shift-01.jpg\/public\")
<\/figure><\/div>Saran Artikel tentang Core Web Vitals<\/h4>\n
Largest Contentful Paint: Pengertian dan Cara Optimasinya<\/a>
First Input Delay: Definisi dan Cara Memaksimalkannya<\/a><\/p>\n <\/div>\n\n\n\n<\/p>Cara Mengetahui Skor Cumulative Layout Shift<\/h2>
\n
Opsi 1. Mengukur CLS di Lab<\/h3>
\n
![\"panel](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/panel-performance-dev-tool.png\/public\")
<\/figure><\/div>\n
![\"tombol](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/tombol-reload-performance.png\/public\")
<\/figure><\/div>\n
![\"pengalaman](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/pengalaman-pergeseran-layout.png\/public\")
<\/figure><\/div>Opsi 2. Menilai Skor CLS di Lapangan (Data Pengguna Nyata)<\/h3>
\n
![\"penilaian](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/penilaian-core-web-vitals-seluler.png\/public\")
<\/figure><\/div>\n
![\"penilaian](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/penilaian-core-web-vitals-desktop.png\/public\")
<\/figure><\/div>\n
![\"detail](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/detail-cls.png\/public\")
<\/figure><\/div>Memahami Cara Menghitung Nilai CLS<\/h2>
\n
Impact Fraction<\/h3>
![\"cumulative](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/cumulative-layout-shift-04.jpg\/public\")
<\/figure><\/div>Distance Fraction<\/h3>
![\"cumulative](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/cumulative-layout-shift-05.jpg\/public\")
<\/figure><\/div>Cara Mengetahui Penyebab Nilai CLS Buruk<\/h2>
\n
![\"elemen](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/elemen-nilai-cls.png\/public\")
<\/figure><\/div>![\"ringkasan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/ringkasan-pengalaman.png\/public\")
<\/figure><\/div>![\"tool](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/tool-diagnostik-pagespeed-insights.png\/public\")
<\/figure><\/div>Cara Mengoptimalkan Nilai Cumulative Layout Shift<\/h2>
1. Tentukan Dimensi Gambar dan Video<\/h3>
<img src=\"example.jpg\" width=\"400\" height=\"400\" alt=\"Example of an image.\"><\/pre>
<img width=\"1000\" height=\"1000\" src=\"example-1000.jpg\" srcset=\"example-1000.jpg 1000w, example-2000.jpg 2000w, example-3000.jpg 3000w\" alt=\"Example of an image.\"><\/pre>
img {\naspect-ratio:attr(width)\/attr(height);\n}<\/pre>2. Atur Lebar dan Tinggi Iklan Banner, Sematan, dan iFrame<\/h3>
<div id=\"ad-slot\" style=\"min-width: 300px; min-height: 250px;\"><\/div><\/pre>
@media screen and (max-width: 970px) {\n #ad-slot {\n min-height: 250px;\n }\n}<\/pre>![\"inspeksi](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/inspeksi-ukuran-elemen.png\/public\")
<\/figure><\/div>3. Gunakan font:display untuk Font Kustom<\/h3>
\n
@font-face {\n font-family: 'Pacifico';\n src: local('Pacifico Regular'), local('Pacifico-Regular'), url(www.examplefonts.woff2) format('woff2');\n font-display: swap;\n}<\/pre><link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:400,700&display=swap\" rel=\"stylesheet\"><\/pre>
4. Tinjau Konten yang Disertakan secara Dinamis<\/h3>
\n
Kesimpulan<\/h2>
\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Pertanyaan Umum Seputar Apa Itu CLS<\/h2>
Apa Itu Pergeseran Layout yang Terduga dan Tak Terduga?<\/h3>\n
Apakah Lazy Loading Memengaruhi Cumulative Layout Shift?<\/h3>\n
Apakah Skor CLS Hanya Dihitung dari Konten Above the Fold?<\/h3>\n