{"id":12284,"date":"2022-10-11T01:32:00","date_gmt":"2022-10-10T18:32:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=12284"},"modified":"2022-10-05T11:15:59","modified_gmt":"2022-10-05T04:15:59","slug":"pengertian-cumulative-layout-shift-dan-cara-optimasinya","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/pengertian-cumulative-layout-shift-dan-cara-optimasinya\/","title":{"rendered":"Pengertian Cumulative Layout Shift dan Cara Optimasinya"},"content":{"rendered":"\n<p>Ada yang sudah pernah dengar bahkan familiar dengan istilah <em>cumulative layout shift<\/em>? Bagi orang awam, bisa jadi masih sangat asing, apalagi dengan bahasa asing seperti itu. Okay, untuk <em>refresh <\/em>sekaligus untuk mengenalkan ke kalian yang belum paham sama sekali, langsung simak sampai tuntas yuk <strong>Pengertian Cumulative Layout Shift dan Cara Optimasinya<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pengertian Cumulative Layout Shift (CLS)<\/strong><\/h2>\n\n\n\n<p><em>Cumulative Layout Shift<\/em> adalah metrik yang menilai stabilitas visual halaman web. Metrik ini menghitung jumlah total pergeseran <em>layout <\/em>yang tak terduga pada halaman web, yaitu ketika posisi atau ukuran elemen yang ditampilkan berubah sehingga menggeser konten di sekitarnya.<\/p>\n\n\n\n<p><em>Cumulative Layout Shift<\/em> (CLS) merupakan metrik yang menilai pengalaman website dengan menghitung seberapa sering halaman website kalian mengalami pergeseran yang tak terduga. Dalam bahasa Indonesia, metrik ini dikenal sebagai Pergeseran Tata Letak Kumulatif.<\/p>\n\n\n\n<p>Meskipun elemen website yang memengaruhi pengalaman pengguna tidak hanya satu, nilai CLS yang buruk juga berdampak pada <em>search engine optimization<\/em> (SEO) website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pengaruh Nilai Cumulative Layout Shift pada SEO<\/strong><\/h2>\n\n\n\n<p><em>Cumulative Layout Shift<\/em> adalah salah satu faktor peringkat di Google yang mempengaruhi performa website dan pengalaman pengguna. CLS juga merupakan salah satu metrik Core Web Vitals. Jadi, website bisa menerima sanksi dari Google jika tidak memenuhi standarnya.<\/p>\n\n\n\n<p>Nilai CLS yang buruk menunjukkan bahwa website kurang kredibel. Akibatnya adalah pengunjung menjadi enggan berlama-lama membukanya. Maka, optimasi website untuk mendapatkan nilai CLS yang tinggi menjadi komponen penting dalam strategi SEO yang sukses.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Berapa Nilai Cumulative Layout Shift yang Bagus?<\/strong><\/h2>\n\n\n\n<p>Nilai CLS yang tinggi menandakan bahwa ada banyak pergeseran <em>layout <\/em>yang tak terduga di halaman web. Sedangkan halaman yang sepenuhnya statis bisa memperoleh nilai yang rendah, bahkan <strong>nol<\/strong>.<\/p>\n\n\n\n<p>Google telah menetapkan standar bagi semua metrik Core Web Vitals untuk membantu pemilik website mengukur dan memperbaiki nilai CLS mereka:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Bagus <\/strong>\u2013 kurang dari <strong>0,1<\/strong> adalah nilai yang bisa diterima menurut standar Google.<\/li><li><strong>Perlu peningkatan<\/strong> \u2013 antara<strong> 0,1 sampai 0,25<\/strong> menunjukkan bahwa kalian perlu melakukan perubahan untuk mengurangi pergeseran tak terduga.<\/li><li><strong>Buruk <\/strong>\u2013 lebih dari <strong>0,25<\/strong> bisa menurunkan peringkat website secara signifikan.<\/li><\/ul>\n\n\n\n<p>Satu website bisa memiliki nilai CLS yang berbeda untuk setiap halaman webnya dan jenis layar tempatnya diakses. Pergeseran <em>layout <\/em>yang terjadi di layar perangkat seluler memiliki dampak yang lebih signifikan terhadap pengalaman penggunanya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Mengetahui Skor Cumulative Layout Shift<\/strong><\/h2>\n\n\n\n<p>Berikut ini 2 cara yang sering digunakan untuk menghitung skor Cumulative Layout Shift:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Di lab <\/strong>\u2013 simulasikan pengalaman pengguna dalam environment terkontrol.<\/li><li><strong>Di lapangan<\/strong> \u2013 didasarkan pada interaksi nyata dari pengguna.<\/li><\/ul>\n\n\n\n<p>Keduanya tidak ada yang lebih baik atau lebih buruk, ya. Cara tersebut sama-sama memberikan data yang lebih kredibel tentang performa website. Untuk membantu mengetahui nilai CLS website kalian, Google menyediakan beberapa tool gratis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opsi 1. Mengukur CLS di Lab<\/strong><\/h3>\n\n\n\n<p>Saat menilai CLS di lab, hasil yang ditampilkan akan memperhitungkan sejumlah kecil kemungkinan. Sebagian besar <em>developer tool <\/em>browser menyediakan cara untuk menghitung nilai CLS halaman web, biasanya menampilkan <em>overlay <\/em>persegi panjang yang menunjukkan bagian yang terpengaruh.<\/p>\n\n\n\n<p>Berikut cara mengetahui skor CLS menggunakan <strong>Developer Tools <\/strong>di <strong>Google Chrome<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\"><li>Klik menu browser dan buka <strong>More tools <\/strong>(Fitur Lainnya) =&gt;<strong> Developer tools<\/strong> (Alat pengembang). Atau, tekan <strong>Ctrl + Shift + i<\/strong> lalu buka panel <strong>Performance<\/strong>.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"206\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-1.png\" alt=\"pengertian cumulative layout shift\" class=\"wp-image-12297\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Centang opsi <strong>Web Vitals <\/strong>dan klik <strong>reload <\/strong>untuk merefresh halaman atau tekan <strong>Ctrl + Shift + E<\/strong> untuk merekam <em>loading <\/em>halaman.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"343\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-2.png\" alt=\"pengertian cumulative layout shift\" class=\"wp-image-12298\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Tunggu hasilnya lalu klik tab <strong>Layout Shift<\/strong> di samping <strong>Experience<\/strong>. Tool ini akan menampilkan <strong>Cumulative Score<\/strong> di bawah <strong>Summary<\/strong>.<\/li><\/ul>\n\n\n\n<p>Perlu&nbsp; kalian ketahui ya bahwa beberapa tab Cumulative Layout Shift mungkin memberikan nilai yang berbeda karena berbagai elemen visual memperlihatkan adanya perubahan <em>layout<\/em>. Klik setiap tab untuk melihat elemen mana yang menyebabkan masalah pada halaman web kalian.<\/p>\n\n\n\n<p>Tool lain yang bisa membantu untuk menilai skor CLS dalam <em>environment <\/em>terkontrol adalah <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse <\/a>dan <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ekstensi Chrome Web Vitals<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opsi 2. Menilai Skor CLS di Lapangan (Data Pengguna Nyata)<\/strong><\/h3>\n\n\n\n<p>Cara lainnya adalah dengan menilai interaksi dari pengguna asli menggunakan <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laporan Pengalaman Pengguna Chrome (CrUX)<\/a> sebagai sumber data utama, yang membantu menganalisis performa website kalian secara keseluruhan.<\/p>\n\n\n\n<p>Tool yang cukup populer untuk membantu menilai data pengguna asli adalah <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed Insights<\/a>.<\/p>\n\n\n\n<p>Berikut langkah-langkah menggunakan PageSpeed \u200b\u200bInsights untuk menghitung nilai CLS halaman web:<\/p>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\"><li><strong>Masukkan URL halaman web<\/strong> dan klik tombol <strong>Analyze <\/strong>untuk menguji performanya.<\/li><li>PageSpeed \u200b\u200bInsights akan menampilkan <strong>Core Web Vitals Assessment<\/strong> secara keseluruhan dan apakah halaman web memenuhi standar Google. Tool akan menampilkan hasil untuk perangkat <strong>Mobile <\/strong>(Seluler) terlebih dahulu.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"461\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-3.png\" alt=\"cls\" class=\"wp-image-12299\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Klik <strong>Desktop <\/strong>untuk mendapatkan nilai CLS perangkat desktop. Kalian akan melihat bahwa nilainya berbeda dengan perangkat mobile tadi.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"453\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-4.png\" alt=\"nilai cls\" class=\"wp-image-12300\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Klik<strong> Expand view <\/strong>untuk memahami detail nilai lebih lanjut.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"246\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-5.png\" alt=\"nilai CLS\" class=\"wp-image-12301\" \/><\/a><\/figure><\/div>\n\n\n<p>Tool populer lainnya untuk membantu mengukur CLS di lapangan adalah <a href=\"https:\/\/console.cloud.google.com\/projectselector2\/bigquery?pli=1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">BigQuery <\/a>dan <a href=\"https:\/\/marketingplatform.google.com\/about\/data-studio\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Data Studio<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Memahami Cara Menghitung Nilai CLS<\/strong><\/h2>\n\n\n\n<p>Memahami cara menghitung skor Cumulative Layout Shift akan membantu kalian untuk mengoptimalkannya. Skor CLS ini menilai 2 elemen dalam pergeseran <em>layout <\/em>tak terduga:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Impact fraction<\/strong> \u2013 mengukur pengaruh elemen yang tidak stabil pada <em>viewport<\/em>.<\/li><li><strong>Distance fraction<\/strong> \u2013 mengukur seberapa jauh elemen bergerak pada <em>viewport<\/em>.<\/li><\/ul>\n\n\n\n<p>Berikut cara menghitung skor CLS:<\/p>\n\n\n\n<p><strong>Nilai CLS akhir = Impact fraction x Distance fraction<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Impact Fraction<\/strong><\/h3>\n\n\n\n<p><em>Impact fraction <\/em>menilai seberapa banyak ruang di area <em>viewport <\/em>yang digunakan oleh elemen yang tidak stabil. Saat elemen yang bisa kita lihat tetiba bergeser ke area lain, <em>impact fraction<\/em> akan menghitung total area yang terkena dampak pergeseran:<\/p>\n\n\n\n<p><strong>Impact Fraction = Area yang terdampak \/ Area viewport<\/strong><\/p>\n\n\n\n<p>Nilai ini menunjukkan bagaimana elemen yang tidak stabil akan mempengaruhi performa website secara keseluruhan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Distance Fraction<\/strong><\/h3>\n\n\n\n<p>Jadi,<em> distance fraction<\/em> menilai jarak terbesar yang dicapai oleh elemen yang tidak stabil pada saar terjadi pergeseran <em>layout <\/em>tak terduga. <em>Distance fraction<\/em> dihitung dengan cara:<\/p>\n\n\n\n<p><strong>Distance fraction = Jarak pergeseran maksimum \/ Area viewport<\/strong><\/p>\n\n\n\n<p>Nilai ini menunjukkan seberapa jauh elemen menggeser elemen lainnya saat terjadi pergeseran tak terduga.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Mengetahui Penyebab Nilai CLS Buruk<\/strong><\/h2>\n\n\n\n<p>Jika halaman web memiliki nilai CLS yang buruk, mungkin ada beberapa elemen yang perlu dicek:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Elemen iklan <em>banner<\/em>, sematan (<em>embed<\/em>), iFrame, gambar, dan video tanpa ukuran yang ditentukan.<\/li><li>Konten dinamis di atas <em>viewport <\/em>saat ini, tanpa <em>placeholder <\/em>untuk ukuran layar.<\/li><li>Font kustom yang mengubah perilaku <em>rendering<\/em>.<\/li><\/ul>\n\n\n\n<p>Tindakan ini biasanya menunggu respons jaringan untuk mengupload elemen, yang menyebabkan semakin besarnya pergeseran <em>layout <\/em>tak terduga. <em>Tool <\/em>yang tadi dijelaskan untuk menilai skor CLS halaman web juga bisa menunjukkan elemen mana saja yang mungkin menyebabkan masalah pergeseran <em>layout<\/em>.<\/p>\n\n\n\n<p>Misalnya, panel <strong>Performance <\/strong>pada <em>developer tool <\/em>browser menunjukkan elemen tidak stabil dalam tab<strong> Cumulative Layout Shift<\/strong>.<\/p>\n\n\n\n<p><strong>Summary <\/strong>atau Ringkasan juga memberitahukan <strong>Lokasi <\/strong>dan <strong>Ukuran <\/strong>asli dan baru elemen yang tidak stabil.<\/p>\n\n\n\n<p>Di <strong>PageSpeed \u200b\u200bInsights<\/strong>, cari detail lengkap elemen yang menyebabkan pergeseran tak terduga di bagian <strong>DIAGNOSTICS<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"339\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-6.png\" alt=\"pagespeed insights\" class=\"wp-image-12302\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Mengoptimalkan Nilai Cumulative Layout Shift<\/strong><\/h2>\n\n\n\n<p>Nilai CLS adalah salah satu faktor penentu peringkat. Jadi, mengoptimalkannya bisa membantu meningkatkan <em>traffic <\/em>website. Berikut ini 4 cara mengoptimalkan skor CLS kalian beserta tingkat kesulitan dan dampaknya masing-masing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Tentukan Dimensi Gambar dan Video<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat Kesulitan: Mudah<\/strong><\/p>\n\n\n\n<p><strong>Dampak: Tinggi<\/strong><\/p>\n\n\n\n<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>\n\n\n\n<p>&lt;img src=&#8221;example.jpg&#8221; width=&#8221;400&#8243; height=&#8221;400&#8243; alt=&#8221;Example of an image.&#8221;&gt;<\/p>\n\n\n\n<p>Namun, gambar responsif perlu menggunakan rasio lebar x tinggi yang sama agar browser bisa menghitung jumlah ruang yang dibutuhkan untuk menampilkan gambar dengan benar.<\/p>\n\n\n\n<p>Atribut <strong>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>\n\n\n\n<p>&lt;img width=&#8221;1000&#8243; height=&#8221;1000&#8243; src=&#8221;example-1000.jpg&#8221; srcset=&#8221;example-1000.jpg 1000w, example-2000.jpg 2000w, example-3000.jpg 3000w&#8221; alt=&#8221;Example of an image.&#8221;&gt;<\/p>\n\n\n\n<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>\n\n\n\n<p>img {<\/p>\n\n\n\n<p>aspect-ratio:attr(width)\/attr(height);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Kode ini membantu browser memprediksi berbagai rasio lebar x tinggi dengan mengikuti dimensi gambar saat dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Atur Lebar dan Tinggi Iklan Banner, Sematan, dan iFrame<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat Kesulitan: Sedang<\/strong><\/p>\n\n\n\n<p><strong>Dampak: Tinggi<\/strong><\/p>\n\n\n\n<p>Menyiapkan (<em>reserve<\/em>) ruang untuk iklan banner, sematan (<em>embed<\/em>), dan iFrame membantu menghindari perubahan <em>layout<\/em>.<\/p>\n\n\n\n<p><strong>Iklan Banner<\/strong><\/p>\n\n\n\n<p>Iklan banner bisa mendorong konten yang dilihat oleh pengguna sehingga mungkin menyebabkan <em>layout <\/em>banyak bergeser. Akibatnya, <em>user experience<\/em> website menjadi kurang optimal.<\/p>\n\n\n\n<p><em>Network <\/em>dan <em>publisher <\/em>iklan yang mendukung ukuran iklan dinamis harus menyiapkan ruang atau <em>placehoder <\/em>lebih dulu ya agar nilai CLS tidak menurun.<\/p>\n\n\n\n<p>Silakan atur gaya elemen sebelum <em>library tag<\/em> iklan dimuat sehingga iklan <em>banner <\/em>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>\n\n\n\n<p>Gunakan elemen slot untuk menentukan ukuran iklan dengan properti CSS <strong>min-height<\/strong> dan <strong>min-width<\/strong>:<\/p>\n\n\n\n<p>&lt;div id=&#8221;ad-slot&#8221; style=&#8221;min-width: 300px; min-height: 250px;&#8221;&gt;&lt;\/div&gt;<\/p>\n\n\n\n<p>Selain itu, tambahkan kueri media CSS untuk menentukan berbagai ukuran minimum saat menggunakan layar yang ukurannya berbeda:<\/p>\n\n\n\n<p>@media screen and (max-width: 970px) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;#ad-slot {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;min-height: 250px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Silakan gunakan data yang sudah pernah ditentukan untuk memilih ukuran terbaik slot iklan. Pastikan kalian juga mempertimbangkan berbagai faktor bentuk (<em>form factor<\/em>) dan perbedaan kecil dalam ukuran iklan.<\/p>\n\n\n\n<p>Cara ini juga bisa diterapkan loh saat memasang<em> non-sticky ads<\/em> (iklan yang hilang saat halaman di-<em>scroll<\/em>) ke halaman web. Dengan menambahkan ruang yang dibutuhkan, iklan tidak akan memicu <em>layout <\/em>untuk bergeser saat halaman dimuat dengan <em>lazy loading<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sematan dan iFrame<\/strong><\/h3>\n\n\n\n<p><em>Embed <\/em>atau sematan bisa memiliki berbagai bentuk sehingga ukurannya di halaman web bisa menjadi tidak pasti. Oleh karena itu, <em>platform <\/em>tidak selalu menyediakan ruang yang dibutuhkan untuk widget dan aplikasi yang bisa di-<em>embed<\/em>.<\/p>\n\n\n\n<p>Demikian juga dengan Inline Frame (iFrame) yang menyertakan elemen pihak ketiga ke halaman web, yang bisa menyebabkan pergeseran <em>layout<\/em>.<\/p>\n\n\n\n<p>Agar <em>embed <\/em>dan iFrame tidak menyebabkan nilai CLS menjadi buruk, inspeksi ukurannya menggunakan <em>developer tool<\/em> browser kalian. Klik <strong>ikon pointer<\/strong> di pojok kiri atas <em>developer tool<\/em> lalu pilih elemen yang ingin diinspeksi.<\/p>\n\n\n\n<p>Setelah memilih elemen, <em>tool <\/em>akan menunjukkan ukurannya.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"635\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-7.png\" alt=\"pengertian cumulative layout shift\" class=\"wp-image-12303\" srcset=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-7.png 963w, https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/09\/Pengertian-Cumulative-Layout-Shift-7-800x528.png 800w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/a><\/figure><\/div>\n\n\n<p>Tambahkan ukuran ini ke elemen sematan atau iFrame kalian.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Gunakan font:display untuk Font Kustom<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat Kesulitan: Sedang<\/strong><\/p>\n\n\n\n<p><strong>Dampak: Sedang<\/strong><\/p>\n\n\n\n<p>Menambahkan custom font ke website bisa mengoptimalkan skor CLS karena adanya:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Flashes of Invisible Text (FOIT)<\/strong> \u2013 <em>rendering <\/em>halaman akan menampilkan teks yang tidak terlihat atau <em>font <\/em>kosong sampai font kustom selesai <em>loading<\/em>.<\/li><li><strong>Flashes of Unstyled Text (FOUT) <\/strong>\u2013 browser menampilkan <em>font <\/em>pengganti sampai <em>font <\/em>kustom selesai <em>loading <\/em>dan mengabaikan <em>layout <\/em>halaman untuk sementara waktu.<\/li><\/ul>\n\n\n\n<p>Memuat <em>font <\/em>web kustom bisa menyebabkan <em>layout <\/em>berubah secara signifikan. Biasanya, penyebabnya adalah penggunaan jumlah ruang yang berbeda dari yang dibutuhkan oleh <em>font <\/em>sistem. Gunakan nilai <strong>font:display<\/strong>, seperti <strong>auto, fallback, block, swap<\/strong>, dan <strong>optional <\/strong>untuk menghindari teks <em>invisible <\/em>dan yang tidak memiliki <em>style<\/em>.<\/p>\n\n\n\n<p>Cara lain untuk menghindari perubahan gaya yang signifikan pada <em>font <\/em>web kalian adalah dengan memilih font sistem yang serupa:<\/p>\n\n\n\n<p>@font-face {<\/p>\n\n\n\n<p>&nbsp;&nbsp;font-family: &#8216;Pacifico&#8217;;<\/p>\n\n\n\n<p>&nbsp;&nbsp;src: local(&#8216;Pacifico Regular&#8217;), local(&#8216;Pacifico-Regular&#8217;), url(www.examplefonts.woff2) format(&#8216;woff2&#8217;);<\/p>\n\n\n\n<p>&nbsp;&nbsp;font-display: swap;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan custom web font Google, kalian bisa mencegah pergeseran <em>layout <\/em>dengan menambahkan <strong>&amp;display=swap <\/strong>setelah link kalian:<\/p>\n\n\n\n<p>&lt;link href=&#8221;https:\/\/fonts.googleapis.com\/css?family=Roboto:400,700&amp;display=swap&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/p>\n\n\n\n<p>Menambahkan nilai <strong>&lt;link rel=preload&gt;<\/strong> ke file font kalian juga akan membantu menghindari pergeseran <em>layout <\/em>saat memuat <em>custom <\/em>web <em>font<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Tinjau Konten yang Disertakan secara Dinamis<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat Kesulitan: Sedang<\/strong><\/p>\n\n\n\n<p><strong>Dampak: Tinggi<\/strong><\/p>\n\n\n\n<p>Penyebab nilai CLS rendah berikutnya adalah adanya konten dinamis. Website sering menggunakan konten dinamis agar pengunjung tertarik untuk melakukan tindakan tertentu.<\/p>\n\n\n\n<p>Namun, ketika ada elemen konten baru yang muncul di bagian atas atau bawah halaman, konten tersebut sering menggeser konten di sekitarnya.<\/p>\n\n\n\n<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>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Ajak pengguna menginisiasi perubahan<\/strong> \u2013 tambahkan elemen interaksi pengguna yang memicu dimuatnya konten baru sehingga mencegah pergeseran tak terduga. Contohnya termasuk tombol <strong>Read more<\/strong> atau <strong>Refresh<\/strong>. Oia, ingat ya, pergeseran <em>layout <\/em>tidak boleh melebihi 500 md agar tidak mempengaruhi CLS.<\/li><li><strong>Lazy loading konten<\/strong> \u2013 karena pergeseran yang terjadi saat <em>lazy loading<\/em> tidak turut mempengaruhi CLS, sebaiknya muatlah konten dinamis di luar <em>viewport <\/em>pengguna dan gunakan <em>overlay <\/em>untuk mengajak pengguna melihat konten tersebut. Salah satu contohnya adalah notifikasi <strong>Scroll Up<\/strong>.<\/li><li><strong>Gunakan container ukuran tetap<\/strong> \u2013 ini akan membantu mencegah pergeseran <em>layout<\/em>. Salah satu opsinya adalah menggunakan carousel, yang juga menjadi alternatif tepat apabila konten dinamis kalian mengganti satu elemen dengan yang lainnya. Pastikan setiap <em>link <\/em>atau kontrol muncul setelah transisi selesai agar tidak terjadi klik yang tak disengaja.<\/li><\/ul>\n\n\n\n<p>Gimana, udah kebayang kan tentang Cumulative Layout Shift? Baca berulang-ulang ya jika masih bingung. Bisa disimpulkan bahwa Cumulative Layout Shift adalah metrik yang mengukur pergeseran tak terduga di <em>viewport <\/em>pengguna untuk menilai <em>user experience<\/em> website. Metrik ini juga merupakan faktor peringkat Google yang mempengaruhi SEO kalian secara signifikan. Jadi, silakan kalian coba sendiri ya, cara mana yang paling berhasil untuk mengoptimalkan skor CLS kalian.<\/p>\n\n\n\n<p>Selamat mencoba dan tunggu info-info menarik lainnya dari kami, ya \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ada yang sudah pernah dengar bahkan familiar dengan istilah cumulative layout shift? Bagi orang awam, bisa jadi masih sangat asing, apalagi dengan bahasa asing seperti itu. Okay, untuk refresh sekaligus untuk mengenalkan ke kalian yang belum paham sama sekali, langsung simak sampai tuntas yuk Pengertian Cumulative Layout Shift dan Cara Optimasinya Pengertian Cumulative Layout Shift &#8230; <a title=\"Pengertian Cumulative Layout Shift dan Cara Optimasinya\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/pengertian-cumulative-layout-shift-dan-cara-optimasinya\/\" aria-label=\"Read more about Pengertian Cumulative Layout Shift dan Cara Optimasinya\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":12311,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[3822,283,7,3826,3828,3824,3823,3821,3827,3825],"class_list":["post-12284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-cumulative-layout-shift","tag-domain-murah","tag-hosting-murah","tag-menghitung-nilai-cls","tag-mengoptimalkan-nilai-cls","tag-nilai-cls","tag-pengaruh-cls","tag-pengertian-cls","tag-penyebab-nilai-cls-buruk","tag-skor-cls","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=12284"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12284\/revisions"}],"predecessor-version":[{"id":12304,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12284\/revisions\/12304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/12311"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=12284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=12284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=12284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}