{"id":50176,"date":"2024-09-20T14:17:37","date_gmt":"2024-09-20T07:17:37","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=50176"},"modified":"2024-09-20T14:18:03","modified_gmt":"2024-09-20T07:18:03","slug":"kepanjangan-cls-adalah","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/kepanjangan-cls-adalah\/","title":{"rendered":"Apa Itu Cumulative Layout Shift (CLS) dan Cara Optimasinya"},"content":{"rendered":"\n<p>CLS adalah metrik yang mengukur seberapa sering elemen di halaman web bergerak secara tak terduga saat halaman dimuat. Metrik ini penting dipahami oleh developer, untuk memastikan website yang dibuat nyaman bagi pengunjung dan memberikan pengalaman yang lebih baik. <\/p>\n\n\n\n\n\n<p>CLS termasuk salah satu metrik dalam kategori <a href=\"https:\/\/blog.rumahweb.com\/core-web-vitals-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"core web vitals\"><em>Core Web Vitals<\/em><\/a> yang digunakan oleh mesin pencari seperti Google untuk menilai performa dan kualitas <em>user experience<\/em> pada sebuah situs. Dalam artikel ini kami akan berbagi informasi tentang apa kepanjangan CLS, cara mengukur hingga optimasinya. Simak informasi berikut ini.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu Cumulative Layout Shift (CLS)<\/h2>\n\n\n\n<p>Kepanjangan CLS adalah <em>Cumulative Layout Shift<\/em>,  yaitu metrik yang mengukur seberapa sering dan seberapa besar elemen-elemen yang ada pada halaman website berpindah atau berubah posisinya selama halaman dimuat. <\/p>\n\n\n\n<p>Perubahan ini dapat terjadi secara tiba-tiba di browser pengunjung dan sering kali membuat mereka merasa tidak nyaman saat mengakses website. CLS akan mengukur stabilitas visual pada sebuah halaman website selama situs tersebut dimuat. Secara garis besar, dasar penilaian CLS memiliki dua faktor utama, yaitu:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <em>Impact Fraction<\/em><\/h3>\n\n\n\n<p>Penilaian CLS ini akan mengkalkulasikan nilai berdasarkan seberapa banyak area layar yang terpengaruh oleh perubahan tata letak yang terjadi pada sebuah website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <em>Distance Fraction<\/em><\/h3>\n\n\n\n<p>Penilaian CLS dengan <em>distance fraction<\/em> akan mengevaluasi seberapa jauh elemen-elemen di sebuah website berpindah dari posisi awal ke posisi akhirnya di layar saat ditampilkan.<\/p>\n\n\n\n<p>Nilai CLS berkisar dari 0 hingga lebih dari 1. Semakin rendah nilai CLS maka semakin bagus untuk sebuah website. Hal tersebut menandakan bahwa website memliki stabilitas di tata letak halaman. Sebaliknya, jika nilai CLS tinggi, itu menunjukkan bahwa halaman web sering mengalami pergeseran tata letak secara tiba-tiba, yang dapat sangat mengganggu pengalaman pengunjung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penyebab <em>Cumulative Layout Shift<\/em><\/h2>\n\n\n\n<p><em>Cumulative layout shift <\/em>atau CLS pada sebuah halaman website dapat disebabkan oleh beberapa hal, diantaranya adalah sebagai berikut:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Gambar tanpa dimensi yang ditetapkan<\/h3>\n\n\n\n<p>Jika sebuah website memuat elemen gambar atau video yang dimuat tanpa menetapkan lebar dan tinggi yang spesifik, maka akan mengakibatkan halaman yang diakses akan mengalami perubahan tata letak ketika gambar\/video tersebut selesai dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Iklan atau elemen dinamis<\/h3>\n\n\n\n<p>Penggunaan iklan atau elemen dinamis pada sebuah website juga dapat menjadi salah satu penyebab nilai CLS menjadi tinggi. Iklan atau elemen dinamis yang ditambahkan ke halaman sebuah website setelah konten utama dimuat seringkali akan menyebabkan pergeseran elemen lain pada halaman website yang diakses.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Font yang lambat dimuat<\/h3>\n\n\n\n<p>Tingginya nilai CLS  juga dipengaruhi oleh <em>element font <\/em>yang lambat dimuat. Ketika ada <em>elemen font<\/em> khusus yang dimuat setelah konten teks tampil, elemen <em>font <\/em>khusus tersebut mungkin akan mengubah ukuran teks, dan tentunya dapat menyebabkan pergeseran tata letak.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Elemen DOM yang ditambahkan atau dihapus secara dinamis<\/h3>\n\n\n\n<p>Penyebab lainnya nilai CLS tinggi adalah adanya elemen DOM yang ditambahkan ataupun dihapus secara dinamis. Ketika ada elemen DOM baru ditambahkan atau dihapus, terutama pada elemen yang bersifat dinamis, maka hal tersebut akan menyebabkan tata letak halaman bisa berubah dan mengakibatkan pergeseran.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Mengukur CLS<\/h2>\n\n\n\n<p>Lalu bagaimana cara mengetahui nilai CLS pada website yang Anda kelola? Mengukur nilai CLS dapat menggunakan beberapa tools yang disediakan oleh Google, seperti:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Google Lighthouse<\/h3>\n\n\n\n<p>Tools pertama yang dapat digunakan untuk mengukur CLS adalah Google Lighthouse. Google lighthouse terdapat pada <em>developer tools<\/em> di <em>browser <\/em>Google chrome. Berikut langkah untuk mengukur nilai CLS menggunakan Google lighthouse.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Silahkan mengakses menu <em>developer tools<\/em> dengan menekan tombol <code>ctrl+shift+i<\/code> pada jendela website yang akan diukur CLS. Anda juga bisa mengklik &#8220;titik 3&#8221; di pojok kanan atas <em>browser <\/em>chrome, kemudian ke menu <em>more tools<\/em> dan klik <em>developer tools<\/em>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools.png\"><img loading=\"lazy\" decoding=\"async\" width=\"533\" height=\"684\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools.png\" alt=\"developer tools menu\" class=\"wp-image-50177\" style=\"width:505px;height:auto\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools.png 533w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools-234x300.png 234w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools-370x475.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/developer-tools-270x346.png 270w\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Kemudian pilih opsi <strong>lighthouse<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu.png\"><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"271\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu.png\" alt=\"Light house menu chrome\" class=\"wp-image-50178\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu.png 378w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu-300x215.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu-370x265.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/lighthouse-menu-270x194.png 270w\" sizes=\"auto, (max-width: 378px) 100vw, 378px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Kemudian klik <strong>Analyze page load<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"432\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button.png\" alt=\"analyze button google chrome\" class=\"wp-image-50179\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button.png 545w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button-300x238.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button-370x293.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/analyze-button-270x214.png 270w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Tunggu sampai prosesnya selesai, setelah itu akan tampil hasil analisis dari website anda termasuk nilai CLS.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result.png\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"411\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result.png\" alt=\"cls result lighthouse\" class=\"wp-image-50180\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result.png 542w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result-300x227.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result-370x281.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result-270x205.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-result-80x60.png 80w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">2. PageSpeed Insights<\/h3>\n\n\n\n<p>Tools pengukuran CLS yang kedua adalah dengan menggunakan tools PageSpeed Insights. Anda bisa mengunjungi website <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\" title=\"\">PageSpeed<\/a> lalu masukkan nama domain yang akan Anda test. Tunggu hingga proses selesai, dan nantinya akan muncul hasil dari analisis tersebut termasuk nilai CLS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-1024x441.png\" alt=\"cls pagespeed insight\" class=\"wp-image-50181\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-1024x441.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-300x129.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-768x331.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-370x159.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-270x116.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-570x245.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed-740x319.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-pagespeed.png 1287w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Google Search Console<\/h3>\n\n\n\n<p>Tools pengukuran CLS selanjutnya adalah <a href=\"https:\/\/blog.rumahweb.com\/google-search-console-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"Google Search Console\">Google Search Console<\/a>. Google search console menyediakan nilai core web vitals, termasuk CLS. Berikut langkah-langkah pengecekannya.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Silahkan login dahulu di akun Google Search Console yang digunakan, dan pilih properti yang ingin diketahui nilai CLS-nya. Kemudian klik pada menu Core Web Vitals.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/core-web-vitals.png\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"467\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/core-web-vitals.png\" alt=\"core web vitals menu GSC\" class=\"wp-image-50182\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/core-web-vitals.png 280w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/core-web-vitals-180x300.png 180w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/core-web-vitals-270x450.png 270w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Selanjutnya, klik <em>open report<\/em> pada perangkat yang ingin dilihat nilai CLS-nya.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"514\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report.png\" alt=\"report core web vitals GSC\" class=\"wp-image-50183\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report.png 1023w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-300x151.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-768x386.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-370x186.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-270x136.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-570x286.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/open-report-740x372.png 740w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kemudian, akan muncul data yang menunjukkan URL yang sudah baik dan yang perlu diperbaiki. Jika data tersebut menunjukkan bagian yang perlu diperbaiki, berarti nilai CLS masih perlu ditingkatkan. Untuk melihat URL yang sudah baik, Anda bisa klik &#8220;view data about good URLs.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"519\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url.png\" alt=\"view good result GSC\" class=\"wp-image-50184\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url.png 1022w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-300x152.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-768x390.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-370x188.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-270x137.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-570x289.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/view-data-good-url-740x376.png 740w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kemudian klik examples url di bagian bawah.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url.png\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"538\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url.png\" alt=\"sampe url GSC CLS\" class=\"wp-image-50185\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url.png 999w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-300x162.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-768x414.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-370x199.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-270x145.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-570x307.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/sample-url-740x399.png 740w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nantinya, akan muncul nilai CLS di bagian sidebar.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value.png\"><img loading=\"lazy\" decoding=\"async\" width=\"382\" height=\"281\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value.png\" alt=\"CLS value result\" class=\"wp-image-50186\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value.png 382w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value-300x221.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value-370x272.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value-270x199.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/cls-value-80x60.png 80w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Nilai CLS yang disarankan oleh Google untuk memastikan user experience yang baik adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Baik<\/strong>: Di bawah 0,1<\/li>\n\n\n\n<li><strong>Perlu Perbaikan<\/strong>: Antara 0,1 hingga 0,25<\/li>\n\n\n\n<li><strong>Buruk<\/strong>: Di atas 0,25<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Optimasi Cumulative Layout Shift<\/h2>\n\n\n\n<p>Setelah mengukur CLS dengan salah satu metode di atas dan mendapatkan hasil yang perlu perbaikan atau buruk, langkah selanjutnya adalah melakukan optimasi CLS. Berikut adalah beberapa elemen yang dapat dioptimasi untuk memperbaiki nilai CLS:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Menentukan nilai spesifik ukuran pada gambar dan video<\/h3>\n\n\n\n<p>Salah satu cara yang paling efektif untuk menurunkan nilai CLS adalah dengan selalu menetapkan nilai yang spesifik pada atribut tinggi dan lebar pada elemen media seperti gambar dan video. <\/p>\n\n\n\n<p>Dengan menetapkan ukuran yang spesifik, browser akan dapat menyisakan ruang untuk elemen-elemen tersebut sebelum mereka dimuat, sehingga menghindari perubahan tata letak pada halaman website anda. Berikut contohnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"gambar.jpg\" alt=\"Deskripsi Gambar\" width=\"600\" height=\"400\"><\/code><\/pre>\n\n\n\n<p>Pada contoh di atas, ukuran gambar ditentukan dengan atribut <code>width <\/code>dan <code>height<\/code>. Ini memastikan bahwa <em>browser <\/em>memesan ruang dengan rasio 600&#215;400 pixel sebelum gambar dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Jangan menggunakan konten dinamis yang lambat dimuat<\/h3>\n\n\n\n<p>Langkah optimasi selanjutnya yang bisa dilakukan adalah dengan tidak menambahkan elemen dinamis yang lambat dimuat. Elemen dinamis ni bisa berupa iklan, banner, dan sejenisnya. <\/p>\n\n\n\n<p>Jika elemen dinamis tersebut memang benar-benar anda perlukan seperti menambahkan iklan, banner, atau konten dinamis lainnya, pastikan untuk menentukan ruang untuk elemen-elemen tersebut sejak awal.<\/p>\n\n\n\n<p>Hindari juga untuk menambahkan elemen-elemen ini di tengah-tengah proses halaman website dimuat, karena hal ersebut dapat menyebabkan pergeseran tata letak yang cukup signifikan pada halaman website anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Gunakan font yang lebih stabil dan ringan untuk dimuat<\/h3>\n\n\n\n<p>Langkah optimasi yang bisa anda lakukan adalah dengan menggunakan nt ang ringan untuk dimuat. Penggunaan font yang ringan bertujuan untuk menghindari perubahan tata letak akibat pemuatan font yang lambat. <\/p>\n\n\n\n<p>Anda juga dapat mempertimbangkan untuk menggunakan teknik font-display: swap dalam CSS. Teknik ini dapat memastikan bahwa teks akan tetap ditampilkan menggunakan font cadangan hingga font yang diinginkan selesai dimuat, sehingga menghindari pergeseran tata letak yang signifikan pada website anda.<\/p>\n\n\n\n<p><strong>BACA JUGA<\/strong>: <a href=\"https:\/\/blog.rumahweb.com\/font-keren\/\" target=\"_blank\" rel=\"noopener\" title=\"\">30 Font Keren Terbaru untuk Website agar Lebih Aesthetic<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p><em>Cumulative Layout Shift<\/em> atau CLS adalah metrik yang mengukur stabilitas tata letak halaman web dengan melihat seberapa sering elemen-elemen bergerak secara tiba-tiba selama dimuat. Pentingnya CLS untuk <a href=\"https:\/\/www.rumahweb.com\/journal\/apa-itu-seo-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"seo adalah\">SEO<\/a> terletak pada dampaknya terhadap pengalaman pengguna.<\/p>\n\n\n\n<p>Website dengan nilai CLS yang rendah memberikan tampilan yang stabil dan nyaman, yang dapat meningkatkan peringkat di hasil pencarian Google karena Google memprioritaskan situs yang menawarkan pengalaman pengguna yang baik.<\/p>\n\n\n\n<p>Demikian artikel kali ini tentang CLS. Semoga dapat membantu dan menambah referensi anda dalam pengelolaan website yang bertujuan memberikan user experience terbaik bagi pengakses website anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CLS adalah metrik yang mengukur seberapa sering elemen di halaman web bergerak secara tak terduga saat halaman dimuat. Metrik ini penting dipahami oleh developer, untuk memastikan website yang dibuat nyaman bagi pengunjung dan memberikan pengalaman yang lebih baik. CLS termasuk salah satu metrik dalam kategori Core Web Vitals yang digunakan oleh mesin pencari seperti Google [&hellip;]<\/p>\n","protected":false},"author":322,"featured_media":50266,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[2318,2319,2317,323],"class_list":{"0":"post-50176","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-seo","8":"tag-cls","9":"tag-core-web-vitals","10":"tag-cumulative-layout-shift","11":"tag-seo"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/09\/banner-apa-itu-cls-adalah.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-d3i","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/50176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/322"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=50176"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/50176\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/50266"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=50176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=50176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=50176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}