Pergeseran Tata Letak Kumulatif (CLS): Apa Artinya & Bagaimana Mengoptimalkan Situs Web Anda untuk Itu

Bayangkan ini: Anda sedang memuat situs web, dan tampaknya siap untuk digunakan. Anda mengklik gambar unggulan blog untuk membaca artikel, dan tiba-tiba seluruh halaman bergeser karena sesuatu yang lain baru saja dimuat. Dan Anda mengklik sesuatu yang sama sekali berbeda dan memuat halaman yang tidak pernah Anda inginkan. Jika Anda pernah mengalami masalah ini sendiri, Anda tahu bagaimana Pergeseran Tata Letak Kumulatif (CLS) dapat berdampak negatif pada Pengalaman Pengguna (UX) situs.

Pergeseran Tata Letak Kumulatif adalah istilah untuk seberapa banyak tata letak halaman bergeser saat dimuat, dan dalam artikel ini kita akan menggali lebih dalam apa artinya. Kami akan menunjukkan cara mengukur CLS, dan menjelaskan apa itu skor yang bagus. Kemudian kita akan membahas cara mengoptimalkan skor CLS situs web Anda. Ayo bekerja!

Berlangganan Saluran Youtube Kami

Apa itu Pergeseran Tata Letak Kumulatif (CLS)?

Tidak ada cara yang lebih baik untuk menggambarkan nilai CLS yang tinggi (berarti lebih dari 0,10 dari Google's PageSpeed ​​Insights) selain dengan contoh visual. Berikut adalah situs web dengan tata letak yang terus bergeser saat halaman dimuat. Perhatikan bahwa kami tidak menggulir sama sekali saat merekam ini. Area pandang kami tetap sama, tetapi halaman berubah secara drastis dengan sendirinya:

Sebagai pengguna yang mengunjungi situs web ini, Anda mungkin tidak yakin kapan itu benar-benar selesai dimuat. Anda dapat mencoba untuk mengklik sebuah berita, hanya untuk tata letak berubah secara drastis. Akibatnya Anda berakhir di halaman yang salah, dan Anda harus membuang waktu untuk kembali. Bergantung pada halamannya, ini bisa terjadi beberapa kali. Jika ya, ada kemungkinan besar Anda akan pergi begitu saja.

Dan begitu juga pengguna Anda.

Semakin kompleks sebuah situs web, semakin besar kemungkinannya untuk memiliki skor CLS yang tinggi. Dengan tata letak sederhana seperti beranda Google yang ikonik, tidak ada CLS karena hanya menyertakan sedikit elemen:

Itu tidak berarti bahwa semua situs web yang kompleks memiliki skor CLS yang tinggi. Pertimbangkan Amazon, misalnya. Tidak ada yang akan mengatakan bahwa raksasa e-commerce menggunakan desain web langsung. Namun ada sedikit atau tidak ada perubahan tata letak yang terlihat saat menelusuri katalognya.

Pergeseran tata letak terjadi karena browser cenderung memuat elemen halaman secara tidak sinkron. Lebih penting lagi, mungkin ada elemen media di halaman Anda dengan dimensi yang awalnya tidak diketahui. Kombinasi ini berarti browser tidak mengetahui berapa banyak ruang yang akan digunakan oleh masing-masing elemen hingga selesai dimuat. Oleh karena itu perubahan tata letak yang drastis.

CLS menarik karena dapat diukur secara objektif menggunakan berbagai alat, tetapi juga berpusat pada pengguna karena setiap perangkat pengguna dapat memengaruhi bagaimana tata letak situs Anda dapat berubah. Meskipun Anda tidak dapat mengontrol aspek itu, Anda tentu dapat mengambil tindakan pencegahan sehingga memiliki dampak seminimal mungkin.

CLS adalah salah satu dari tiga Data Web Inti yang diukur Google untuk membantu menentukan apakah situs web Anda menawarkan pengalaman pengguna (UX) yang kuat. Core Web Vitals lainnya adalah First Input Delay (FID) dan Largest Contentful Paint (LCP), yang juga pasti sepadan dengan upaya apa pun yang Anda habiskan untuk mengoptimalkannya.

Bagaimana Mengukur CLS

Mencari tahu apakah situs web Anda menunjukkan perubahan tata letak yang ditandai relatif sederhana. Pertama, kami menyarankan Anda mencoba mengakses situs web Anda dari berbagai perangkat dan meminta orang lain untuk melakukan hal yang sama. Saat melakukannya, Anda dapat mengamati apakah tata letak tetap konsisten saat halaman dimuat.

Apa yang mungkin Anda temukan adalah bahwa pengalaman CLS dapat sangat bervariasi . Itu tidak hanya bergantung pada seberapa optimal situs web Anda, tetapi juga pada perangkat yang Anda gunakan. Dengan mengingat hal itu, alat terbaik untuk mengukur CLS situs web Anda adalah PageSpeed ​​Insights. Ini terkait langsung dengan Data Web Inti Google sehingga Anda dapat melihat langsung bagaimana skor CLS Anda memengaruhi cara Google melihat situs Anda.

Layanan ini memungkinkan Anda memasukkan URL dan menerima skor kinerja keseluruhan berdasarkan data 28 hari terakhir yang dikumpulkan Google. Skor tersebut mempertimbangkan beberapa metrik, termasuk CLS, FCP, dan LCP.

Untuk pengujian ini, kami memilih situs web tanpa CLS yang jelas. PageSpeed ​​Insights mengkonfirmasi kecurigaan kami, karena memberikan hasil yang sangat positif dengan skor CLS yang kuat.

Perhatikan bahwa PageSpeed ​​Insights menawarkan perincian persentase untuk setiap skor. Dalam hal ini, 91% pengguna mengalami perubahan tata letak nol saat memuat situs web pengujian. Namun, pengunjung yang tersisa memang mengalami beberapa tingkat perubahan tata letak.

Itulah yang diharapkan dalam hal CLS dan Data Web Inti lainnya. Pengalaman pengguna akan sangat bervariasi tergantung pada perangkat apa yang mereka kunjungi, koneksi internet mereka, dan banyak faktor lainnya. Hampir tidak ada cara untuk memperhitungkan tidak ada pengguna yang pernah mengalami CLS, tetapi Anda pasti dapat mengambil tindakan pencegahan untuk mengoptimalkannya sehingga persentase serendah mungkin.

Selain data lapangan, PageSpeed ​​Insights juga menawarkan apa yang disebutnya data Lab . Itu adalah skor kinerja berdasarkan satu tes, bukan data yang dikumpulkan dalam jangka waktu yang lama (yang dianggap sebagai Data lapangan ).

Pada pengujian kami, kami menerima skor CLS nol, yang berarti tidak ada perubahan tata letak. Untuk tes yang satu ini. Sekarang mari kita bandingkan dengan situs web lain yang tidak mendapatkan skor CLS yang kuat.

Untuk memenuhi standar Google, skor CLS Anda harus di bawah 0,10. Apa pun di atas itu berarti ada perubahan tata letak yang signifikan dan nyata, yang mengarah pada pengalaman pengguna yang buruk.

Bagaimana Mengidentifikasi Apa yang Menyebabkan Pergeseran Tata Letak

Jika Anda ingin mengidentifikasi elemen apa yang menyebabkan perubahan tata letak di situs web Anda, Anda dapat melakukannya menggunakan Alat Pengembang Chrome. Jika Anda membuka alat (CTRL-SHIFT-I) dan melompat ke tab Kinerja , Anda akan dapat merekam tes kinerja saat Anda menavigasi web.

Setelah Anda berhenti merekam, Chrome Dev Tools akan menampilkan garis waktu yang menunjukkan waktu pemuatan, permintaan individual, dan Data Web Inti. Dari garis waktu ini Anda dapat memilih peristiwa Pergeseran Tata Letak individual yang terdaftar di bawah Pengalaman . Dengan begitu, Anda dapat melihat elemen apa yang sesuai dengannya.

Setelah Anda mengetahui elemen apa yang menyebabkan pergeseran tata letak, Anda dapat mengambil langkah-langkah untuk memperbaiki masalah tersebut. Kita akan membicarakannya di bagian selanjutnya.

Jika Anda ingin memantau Core Web Vitals situs web Anda, sebaiknya siapkan akun Google Search Console. Anda akan dapat memantau metrik kinerja dan Data Web Inti dari Search Console, yang merupakan keuntungan dalam hal Pengoptimalan Mesin Pencari (SEO). Kami merasa Anda sebaiknya memantau Search Console secara rutin, apa pun itu, tetapi tidak ada salahnya untuk memiliki metrik tertentu yang Anda lacak.

Cara Mengoptimalkan Skor CLS Anda

Pada umumnya, ada dua penyebab besar dalam hal skor CLS yang tinggi: file media dan iklan. Misalnya, jika Anda mengunggah file gambar dengan resolusi besar tetapi tidak menentukan tinggi dan lebarnya, itu dapat merusak tata letak halaman Anda.

Dalam hal kinerja situs web, sebaiknya gunakan gambar yang sudah menjadi dimensi tepat yang akan Anda tampilkan. Dengan begitu, browser tidak perlu menghabiskan daya pemrosesan (dan waktu) untuk mengubah ukurannya dengan tepat. Namun, itu tidak selalu memungkinkan. Jika tidak, Anda harus mengatur atribut lebar dan tinggi untuk setiap gambar yang Anda tampilkan. Dengan begitu, browser pengguna akan tahu persis di mana gambar itu cocok dan tidak perlu mengubah tata letak pada detik terakhir yang memungkinkan.

Berikut tampilan atribut tersebut dalam HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Jika Anda menggunakan WordPress, beberapa plugin pengoptimalan gambar dapat secara otomatis mengubah ukuran file saat Anda mengunggahnya, yang menangani pengaturan atribut lebar dan tinggi yang diperlukan.

Dalam hal gambar responsif, Anda dapat mengandalkan CSS daripada mendeklarasikan lebar dan tinggi secara manual. CSS memungkinkan Anda menggunakan atribut max-width untuk memberi tahu browser persentase viewport mana yang harus diambil gambar:

img {
max-width: 90vw;
height: auto;
}

Dalam contoh ini, kami memberi tahu browser untuk menskalakan gambar sehingga mengambil 90% dari area pandang pengguna. Pada saat yang sama, kami menyetel atribut height ke auto , sehingga browser menghitung tinggi ideal berdasarkan lebar baru gambar dan rasio aspeknya.

Dasar-dasar yang sama berlaku untuk iklan seperti halnya pada gambar. Biasanya, Anda akan bekerja dengan iframe, dan terkadang jaringan iklan akan menggunakan elemen berukuran dinamis. Ini dapat merusak tata letak halaman Anda.

Alih-alih membiarkan jaringan iklan memutuskan seberapa besar iklan di situs web Anda, Anda dapat memesan area untuk mereka. Itu berarti mendeklarasikan atribut lebar dan tinggi untuk area iklan dan menyetel fallback jika tidak dimuat, sehingga ruang kosong tidak menyebabkan perubahan tata letak.

Anda dapat menggunakan jenis CSS dan gaya sebaris yang sama untuk penampung iklan apa pun yang Anda inginkan, menjaganya tetap terkunci di posisinya terlepas dari iklan apa yang ditayangkan.

Pergeseran Tata Letak Kumulatif (CLS) Pertanyaan yang Sering Diajukan

CLS bisa sedikit lebih rumit untuk dipahami daripada metrik LCP dan FCP. Dengan mengingat hal itu, mari membahas beberapa pertanyaan umum yang dimiliki pengguna tentang CLS, untuk memastikan Anda tidak melewatkan informasi penting apa pun.

Bagaimana CLS Mempengaruhi Kinerja Situs Web Saya?

Secara teori, Anda dapat memiliki situs web yang sangat cepat yang masih mendapatkan skor CLS yang relatif buruk. Seperti halnya Data Web Inti lainnya, skor CLS mungkin tidak berkorelasi langsung dengan kinerja situs secara keseluruhan. Situs Anda mungkin sangat cepat, tetapi saat dimuat, situs Anda terbuka seperti akordeon. Meski begitu, perubahan tata letak yang besar pasti berdampak negatif pada UX situs. Google menganggap itu sangat penting. Itulah sebabnya Google sangat menimbang poin data ini.

Apakah CLS Kurang Penting Dibandingkan Skor FCP atau LCP?

Banyak pengguna lebih memperhatikan skor FCP dan LCP daripada CLS. Itu karena kedua metrik tersebut lebih mudah dikorelasikan dengan kinerja situs web. Meskipun FCP secara khusus juga merupakan metrik yang berpusat pada pengguna, CLS lebih sulit untuk diukur secara konsisten di sejumlah besar pengguna.

Ketiga metrik tersebut membentuk Google Core Web Vitals. Ini berarti bahwa jika Anda mengabaikan salah satunya, Anda berisiko ditempatkan lebih rendah dalam hasil pencarian yang relevan. Memastikan bahwa situs Anda dioptimalkan untuk CLS rendah umumnya hanya berdampak positif pada kinerja situs seperti LCP dan FCP. Jika Cat Konten Terbesar didorong ke bawah layar segera setelah pengguna melihatnya, seberapa berguna waktu pemuatan yang cepat itu?

Berapa Skor CLS yang Baik?

Dengan angka, Google menganggap apa pun di bawah 0,10 sebagai skor CLS yang bagus. Namun, jika Anda mengambil langkah yang tepat, mendapatkan skor CLS 0 bukanlah hal yang mustahil, dan itu relatif biasa di antara situs web yang dioptimalkan dengan baik. Perlu diingat, bagaimanapun, bahkan situs yang secara teratur mendapat skor 0 dapat memiliki sedikit persentase pengguna yang mengalami pergeseran. Itu di luar kendali Anda, dan yang dapat Anda lakukan hanyalah memperhitungkan sebagian besar pengguna Anda memiliki 0 CLS.

Kesimpulan

Ada banyak faktor yang digunakan untuk menawarkan UX yang kuat di situs web Anda. Idealnya itu harus memuat dengan cepat. Itu harus mudah untuk berinteraksi. Seharusnya tidak menggeser posisi tata letak saat elemen muncul. Pergeseran tata letak yang drastis menyebabkan frustrasi dan kesalahan klik. Itu mengarah ke rasio pentalan yang lebih tinggi. Yang tidak baik untuk situs web mana pun.

CLS adalah salah satu Data Web Inti yang digunakan Google untuk mengukur UX situs Anda secara keseluruhan. Dan pengguna adalah alasan utama Anda memiliki situs web. Pengalaman mereka adalah prioritas 1. Skor CLS yang rendah (di bawah 0,10) berarti situs web Anda harus dimuat dengan lancar, dan setiap aspek tata letaknya akan muncul di tempat yang tepat sejak awal.

Apakah Anda memiliki pertanyaan tentang CLS atau bagaimana cara menguranginya? Mari kita bicara tentang mereka di bagian komentar di bawah!

Gambar Unggulan melalui Kakak Tua / shutterstock.com