Cumulative Layout Shift Adalah: Pengertian dan Cara Optimasinya

Omnirank.id – Halo sahabat Omni! Cumulative Layout Shift (CLS) merupakan salah satu metrik dalam Core Web Vitals untuk mengukur pergeseran tata letak tidak terduga di sebuah halaman website.

Pergeseran tata letak tersebut biasanya terjadi saat halaman tersebut diunduh. Dalam teknik pengelolaan website, CLS menjadi komponen yang memiliki pengaruh besar dalam menentukan kualitas website. Untuk itu, pada artikel kali ini akan membahas panduan lengkap seputar CLS.

Apa Itu Cumulative Layout Shift?

Cumulative Layout Shift adalah salah satu dari tiga metrik inti yang digunakan oleh Google untuk mengukur pengalaman pengguna (user experience) suatu website dengan cara mengukur sejauh mana pergeseran tata letak yang tak diinginkan terjadi di halaman website selama adanya interaksi pengguna. Artinya, ukuran atau posisi elemen yang ditampilkan mengalami perubahan sehingga dapat menggeser konten di sekitarnya.

Pergeseran tata letak dapat terjadi saat elemen-elemen halaman seperti teks, tombol, atau gambar, yang bergeser atau bergerak setelah halaman web dimuat. Hal ini tentu menyebabkan pengalaman user menjadi tidak nyaman saat mengakses website.

CLS dapat mengukur seberapa besar pergeseran terjadi selama berinteraksi di halaman website yang mana hal ini sangat menentukan peringkat website di mesin pencari seperti Google.

Kenapa Cumulative Layout Shift Itu Penting?

Cumulative Layout Shift sangat penting dalam pengelolaan website karena menjadi salah satu dari tiga metrik inti pada Core Web Vitals yang merupakan faktor penentu peringkat pada Google sejak tahun 2022.

CLS sangat mempengaruhi kenyamanan dan kejelasan navigasi sehingga memiliki peran penting sebagai berikut.

1. Core Web Vitals

Web Vitals merupakan sekumpulan matriks untuk mengukur hal-hal yang penting dalam memberikan pengalaman pengguna yang baik saat interaksi dengan halaman website. Dengan adanya core web vitals, pengelola website setidaknya memiliki tiga aspek yang jelas untuk mengukur efektivitas halaman websitenya.

• Kecepatan loading saat memuat konten
• Baik tidaknya respons elemen halaman web
• Stabilitas tata letak halaman

Menurut Google, peluang pengunjung untuk meninggalkan website menurun 24% apabila ketiga aspek tersebut dapat optimal, termasuk stabilitas layout halaman. Selain memberikan performa website yang optimal, core web vitals juga mempengaruhi peringkat website pada mesin pencari.

2. User Experience

Terjadinya pergeseran tata letak tak terduga saat berinteraksi dalam suatu web dapat menyebabkan user experience yang buruk.

Hal ini terjadi karena pengguna sulit melakukan interaksi atau menavigasi elemen-elemen pada halaman apabila posisinya terus berubah. Dalam hal ini, CLS yang rendah akan mengoptimalkan kenyamanan user experience saat melakukan interaksi pada website.

3. Retensi Pengguna

Terjadinya pergeseran tata letak dapat merugikan pengguna sehingga membuat pengguna melakukan tindakan untuk meninggalkan halaman website dengan cepat.

Untuk itu sangat penting mengurangi CLS dengan tujuan meningkatkan retensi pengguna serta meminimalisir tingkat pentalan (bounce rate).

4. Koneksi atau Perangkat yang Terbatas

Terjadinya pergeseran tata letak yang berlebihan tentunya lebih mengganggu, apalagi jika terjadi pada koneksi atau perangkat internet yang terbatas. Oleh karenanya, sangat penting untuk mengurangi CLS sehingga website mampu memberikan user experience yang lebih baik meskipun pada kondisi perangkat dan koneksi yang terbatas.

5. Interaksi dengan Konten

Ternyata Cumulative Layout Shift dapat menyebabkan terhambatnya interaksi pengguna dengan berbagai elemen halaman seperti formulir, tombol, teks, gambar, dan lain-lain. Apabila layout stabil, maka website dapat dengan mudah untuk mengoptimalkan efektivitas elemen-elemen yang interaktif.

Pengaruh Nilai Cumulative Layout Shift pada SEO

Optimasi website untuk mendapatkan nilai CLS tinggi merupakan komponen yang sangat penting dalam strategi SEO. Nilai CLS yang tinggi mengindikasikan bahwa banyak terjadi pergeseran layout pada halaman website sehingga traffic pengunjung menjadi semakin berkurang dan menyebabkan peringkat website menjadi turun.

Google juga telah menjadikan faktor CLS pada algoritma untuk menilai bagaimana kecepatan dan kualitas website. Untuk itu, website dengan nilai CLS rendah dapat menjadikan peringkat website lebih baik di hasil pencarian. Hal ini terjadi karena Google menilai website tersebut dapat memberikan user experience yang baik.

Cara Mengetahui Skor Cumulative Layout Shift

CLS menjadi faktor yang berpengaruh dalam penentuan peringkat website di Google sehingga sangat mempengaruhi performa website dan pengalaman pengguna. Sebagai salah satu metrik inti Core Web Vitals, maka website harus memenuhi standar, jika tidak maka Google akan memberikan sanksi pada website.

Nilai Cumulative Layout Shift yang buruk mengindikasikan bahwa website tersebut kurang kredibel sehingga user biasanya tidak ingin berlama-lama di halaman website dan langsung meninggalkan web tersebut.

Tingginya nilai CLS mengindikasikan bahwa terjadi banyak pergeseran layout pada halaman website. Google telah menetapkan standar kategori nilai CLS yaitu sebagai berikut.

Kategori Bagus (Good)

CLS dengan nilai 0,1 termasuk dalam kategori bagus karena merupakan nilai yang telah sesuai dengan standar yang ditetapkan oleh Google.

Kategori Butuh Peningkatan (Needs)

Nilai CLS 0,1 – 0,25 masuk dalam kategori website yang butuh peningkatan. Artinya website membutuhkan beberapa langkah perubahan untuk mengurangi pergeseran layout yang tidak terduga.

Kategori Buruk (Poor)

Nilai CLS lebih dari 0,25 mengindikasikan bahwa website tersebut dalam kategori buruk sehingga dapat menurunkan ranking website dengan signifikan.

Catatan: Pada satu website dapat memiliki nilai CLS berbeda di setiap halaman websitenya serta jenis layar tempat di mana halaman web tersebut diakses, di perangkat mobile atau desktop. Pergeseran tata letak yang terjadi pada perangkat mobile umumnya mempunyai dampak yang lebih signifikan bagi pengalaman pengguna.

Memahami Cara Menghitung Nilai CLS

Untuk mengetahui skor Cumulative Layout Shift sangat mudah dilakukan, yaitu dengan menjumlahkan semua skor layout shift. Secara sederhananya, berikut merupakan rumus cara mengetahui skor CLS.

Hasil dari layout shift score = impact fraction x distance fraction

Apabila pada suatu halaman website mengalami banyak perubahan tata letak, untuk memperoleh nilai CLS yakni dapat menjumlahkan keseluruhan skor Layout Shift. Untuk itu rumus CLS yang didapatkan yaitu sebagai berikut.

CLS = ∑ Skor Layout Shift =∑ (impact fraction * distance fraction)

Terdapat dua istilah dalam rumus mengetahui nilai CLS di atas yaitu impact fraction dan distance fraction. Berikut penjelasannya.

• Impact Fraction

Impact fraction adalah matriks yang digunakan untuk mengukur bagaimana elemen yang tidak stabil dapat berpengaruh pada viewport di antara dua frame. Impact fraction juga merupakan perbandingan antara luas area terdampak dengan luas viewport.

Contohnya, apabila area terdampaknya 60% dari total tampilan di layar, maka 60% itu merupakan impact fraction. Artinya nilai impact fraction yaitu 0,6.

• Distance Fraction

Distance fraction adalah suatu pergeseran yang hitungannya dari jarak terjauh pergerakan suatu elemen yang tidak stabil serta relatif terhadap viewport.

Contohnya, pada sebuah tampilan layar penuh mempunyai tinggi 150 mm. Lalu jarak antara sisi atas layar dengan konten yang tampil yaitu 50 mm. Artinya, nilai distance fraction tersebut yaitu 50:150 = 0,3.

Dari contoh data yang diperoleh tersebut, maka untuk mencari nilai Cumulative Layout Shift yaitu sebagai berikut.

Nilai CLS = 0,6 x 0,3

Nilai CLS = 0,18

Dari contoh atau perumpamaan di atas, hasil penghitungan nilai CLS yaitu 0,18 sehingga masuk pada kategori “needs improvement“.

Selain itu, ada dua cara yang paling sering digunakan dalam penghitungan skor CLS, yaitu di laboratorium dan di lapangan.

• Di Laboratorium : melakukan simulasi user experience pada environment terkontrol.
• Di Lapangan : dilandaskan pada interaksi nyata dari user.

Dari kedua cara tersebut tidak ada yang lebih buruk maupun lebih baik. Keduanya merupakan cara untuk memberikan data kredibel dalam mengetahui performa web dengan mengetahui skor CLS.

Untuk membantu mengetahui nilai CLS website, ada beberapa tools gratis yang disediakan oleh Google.

#1 Mengukur CLS di Laboratorium

Ketika menilai CLS di lab, maka hasilnya akan memperhitungkan kemungkinan-kemungkinan kecil. Biasanya mayoritas developer tool browser akan memberikan cara tersendiri untuk mengetahui nilai CLS pada halaman web, umumnya dengan menampilkan overlay persegi panjang yang mengindikasikan bagian yang terpengaruh.

Misalnya mengetahui skor CLS dengan Developer Tools pada Google Chrome.

• Klik menu browser di perangkat
• Buka More Tools untuk melihat fitur lainnya
• Klik Developer Tools (Ctrl + Shift + i)
• Pilih Panel Performance
• Ceklis pada opsi Web Vitals, lalu klik Reload untuk melakukan refresh halaman atau Ctrl + Shift + E untuk record halaman
• Tunggulah hasil ditampilkan
• Pilih tab Layout Shift di sisi Experience
• Halaman akan menampilkan Cumulative Score di bagian bawa Summary.

#2 Mengukur CLS di Lapangan dengan Data Pengguna Nyata

Selain melalui data laboratorium cara lain yang dapat dilakukan untuk menilai Cumulative Layout Shift yaitu menggunakan Laporan Pengalaman Pengguna Chrome (CrUX). Data ini menjadi sumber data utama untuk mengetahui performa website secara menyeluruh.

Tool yang paling populer digunakan untuk mengetahui data penggunaan asli yaitu PageSpeed Insight. Adapun langkah-langkah dalam penggunaan tool ini yaitu sebagai berikut.

• Salin URL halaman website
• Klik Analyze untuk melakukan pengujian performa
• Hasil Core Web Vitals Assessment akan tampil secara keseluruhan
• Hasil untuk perangkat mobile akan ditampilkan terlebih dahulu
• Untuk mengetahui nilai CLS pada perangkat desktop, klik “Desktop”
• Hasil nilai CLS desktop akan ditampilkan, biasanya berbeda dengan nilai yang ada di perangkat mobile
• Klik Expand View untuk melihat detail lainnya.

Cara Mengetahui Penyebab Nilai CLS Buruk

Cumulative Layout Shift pada suatu website dapat terjadi karena berbagai faktor, diantaranya sebagai berikut.

Periksa Penguatan Asinkron

Apabila font pada website tidak dimuat secara sinkron, maka teks yang terlihat pada halaman website memiliki ukuran yang terlihat berubah setelah font akhirnya dimuat. Hal inilah yang akhirnya menyebabkan terjadinya pergeseran konten.

Elemen Media yang Ukurannya Tidak Ditentukan

Ada berbagai elemen media yang biasanya ditemukan pada sebuah halaman website, misalnya gambar. Apabila elemen ini tidak mempunyai ukuran yang telah ditentukan pada HTML, maka browser akan memuat elemen gambar secara tidak sinkron. Hal ini dapat menyebabkan terjadinya pergeseran konten saat gambar tersebut dimuat.

Pemuatan CSS

Perubahan gaya CSS yang terlalu lambat atau CSS yang memuat secara dinamis dapat membuat pergeseran konten yang tidak diinginkan. Hal ini dapat membuat memilih untuk meninggalkan halaman website sesegera mungkin.

Dinamika Konten

Apabila suatu halaman website menggunakan konten dinamis atau resolusi dinamis maka dapat memicu terjadinya perubahan tata letak halaman web. Tentunya faktor ini dapat membuat nilai CLS yang buruk sehingga ranking website menjadi turun.

Memuat Beberapa Sumber Bersamaan

Dalam memuat sumber, sebaiknya memang perlu memperhatikan elemen konten yang dimuat. Pasalnya, apabila berbagai sumber daya atau elemen konten dimuat secara bersamaan tanpa memperhatikan layout halaman website, menyebabkan pergeseran konten yang tidak diinginkan.

Untuk mengoptimalkan nilai Cumulative Layout Shift, perlu diupayakan untuk mastikan semua elemen konten mempunyai ukuran yang telah ditetapkan serta memuat font sinkron.

Hal ini bertujuan untuk menghindari terjadinya perubahan layout website yang drastis ketika halaman sedang dimuat. Selain itu, cara ini juga membantu untuk memastikan elemen pihak ketiga atau iklan dimuat secara tepat untuk menghindari terjadinya pergeseran konten yang tak diinginkan.

Cara Optimasi Cumulative Layout Shift

CLS mengukur pergeseran tak terduga dari elemen-elemen di halaman website selama proses interaksi pengguna dengan website. Pergeseran tak terduga tersebut dapat mengganggu pengguna saat berinteraksi dengan halaman web sehingga optimasi nilai CLS merupakan hal yang sangat penting. Tujuannya adalah untuk meningkatkan pengalaman pengguna secara menyeluruh.

Berikut merupakan beberapa tips untuk melakukan optimasi nilai CLS.

A. Kurangi Iklan dalam Website

Cobalah untuk mengurangi iklan yang ada pada halaman website. Tanpa kita sadari, ternyata keberadaan banner iklan dapat menggeser konten pada halaman website yang sedang dilihat oleh user. Hal ini tentunya dapat menyebabkan website memiliki user experience yang buruk.

Publisher iklan dinamis perlu menyediakan ruang agar tidak menyebabkan nilai Cumulative Layout Shift sebuah website semakin buruk. Agar banner iklan tidak menghalangi konten yang sedang diakses pengguna, caranya yaitu dapat mengatur gaya elemen sebelum library tag. Cara ini dapat mengoptimasi CLS, karena meskipun iklan mengisi halaman secara menyeluruh, layout tidak bergeser.

B. Menambahkan Dimensi pada Layout

Pada halaman website, usahakan semua elemen mempunyai dimensi dan gaya awal yang ditetapkan secara eksplisit. Hal ini bertujuan supaya browser dapat melakukan alokasi ruang yang dibutuhkan untuk berbagai elemen tersebut sebelum sepenuhnya dimuat.

Apabila dimensi elemen dan gaya awal tidak ditetapkan, maka browser harus melakukan alokasi ulang ruang ketika elemen tersebut dimuat. Hal ini memungkinkan terjadinya pergeseran tiba-tiba yang membuat tidak nyaman berada di halaman website.

C. Mengurangi Elemen JavaScript

Apabila setelah halaman dimuat elemen-elemen DOM diubah secara dinamis maka hal ini dapat mengakibatkan terjadinya pergeseran konten yang membuat nilai Cumulative Layout Shift website menjadi buruk.

Elemen DOM pada JavaScript sebenarnya memiliki fungsi untuk menampilkan halaman web secara variatif sesuai bahasa pemrograman JavaScript.

Namun apabila pada sebuah website terlalu banyak elemen dome yang dimuat, hal ini justru memberikan dampak negatif pada pergeseran layout website tersebut. Untuk itu, cobalah untuk mengurangi beberapa elemen yang fungsinya tidak begitu penting pada website untuk membuat kinerja website lebih baik.

D. Menggunakan Placeholder untuk Elemen Gambar

Agar browser dapat mengalokasikan ruang dengan baik gunakanlah placeholder untuk gambar sehingga gambar dapat dimuat sepenuhnya. Placeholder tersebut bisa berubah gambar yang ukurannya tepat, bisa juga berupa ruang kosong yang dimensinya sesuai.

E. Menghindari Injeksi Konten yang Dinamis

Apabila memungkinkan, usahakan untuk menghindari injeksi konten dinamis. Pasalnya, hal ini dapat membuat pergeseran yang tak terduga pada halaman website yang membuat performa website menjadi turun.

Misalnya, apabila sedang memuat widget dinamis atau iklan, maka pastikan website mempunyai dimensi yang tetap supaya tidak membuat perubahan tiba-tiba pada tata letak.

F. Mengutamakan Loading Rendah

Untuk mengoptimasi nilai Cumulative Layout Shift, usahakan untuk mengutamakan pemuatan elemen-elemen yang mempunyai dampak besar pada nilai CLS. Contohnya menggunakan elemen-elemen pada bagian atas halaman website, bisa juga mengutamakan elemen-elemen yang sering berubah untuk dimuat lebih awal.

G. Menguji Kinerja Halaman Website

Upaya selanjutnya untuk mengoptimalkan CLS yaitu dengan melakukan pengujian dan pemantauan kinerja halaman web dengan alat penguji seperti Google PageSpeed Insight. Memantau nilai CLS secara teratur dan mengidentifikasi apa saja elemen yang membuat pergeseran tak terduga menjadi langkah efektif untuk mengoptimalkan nilai CLS. Jika perlu, lakukan perubahan sehingga nilai CLS lebih baik.

Penyebab Terjadinya Pergeseran Tata Letak Website

Ada beberapa hal yang menyebabkan terjadinya pergeseran tata letak website yaitu sebagai berikut.

1. Iklan

Iklan juga menjadi salah satu masalah yang menyebabkan buruknya nilai CLS pada suatu halaman website. Apabila iklan atau elemen pihak ketiga dimuat dengan asinkron maka membuat perubahan pada tata letak halaman yang akhirnya mengakibatkan nilai CLS halaman website menjadi buruk.

Bahkan banyak website yang memiliki nilai Cumulative Layout Shift buruk karena faktor utama iklan. Biasanya hal ini terjadi saat iklan yang dimuat tanpa optimasi sehingga halaman pada layout website menjadi berubah.

Meskipun dari segi engagement iklan memiliki manfaat, tetapi apabila optimasi dan pemerataannya tidak dilakukan dengan baik maka dampaknya buruk untuk website. Misalnya dapat menyebabkan website kecepatan aksesnya lambat dan tata letaknya selalu berubah.

2. Video

Video merupakan salah satu elemen multimedia pada website yang sangat mempengaruhi CLS. Website yang memuat konten video dengan resolusi terlalu tinggi atau tak terbatas biasanya dapat membuat halaman website lebih lambat saat dimuat. Hal ini juga membuat kinerja website menjadi lebih lambat saat diakses oleh pengguna.

CLS yang dipengaruhi oleh elemen video umumnya terjadi saat user melakukan klik pada sebuah tautan atau video. Setelah klik pada tautan tersebut user akan beralih pada halaman web yang lain sehingga membuat pengalaman user menjadi buruk.

3. Element DOM Javascript

Pergeseran tata letak atau layout shift di sebuah website mungkin disebabkan karena manipulasi elemen DOM JavaScript. Pembuatan JavaScript yang terlalu lama ternyata dapat menyebabkan pergeseran tata letak, misalnya karena faktor penambahan elemen secara dinamis perubahan ukuran elemen, penundaan pemuatan konten, dan lain-lain.

Itulah panduan lengkap mengenai Cumulative Layout Shift mulai dari pengertiannya hingga cara optimasinya. Kesimpulannya, CLS merupakan aspek yang sangat penting karena dapat mempengaruhi user experience dalam mengakses halaman website.

Skor CLS dapat berdampak besar terhadap pengalaman pengguna pemasaran digital, dan traffic organik secara menyeluruh. Dalam mengelola website yang baik ada berbagai hal yang perlu diperhatikan mulai dari konten yang berkualitas, algoritma, riset audience, hingga elemen-elemen matriks yang sangat penting seperti pemantauan Cumulative Layout Shift.

Jika ingin memiliki website dengan performa yang baik maka pastikan untuk mengeksplorasi berbagai komponen website sehingga lebih tepat dalam strategi pemasaran digital website. Anda juga bisa mengoptimasi SEO website untuk meningkatkan pengunjung lebih banyak agar mendapatkan penghasilan tambahan dengan memanfaatkan layanan SEO di Omnirank. Segeralah bergabung dan daftar gratis untuk mendapatkan lebih banyak layanan Service Omnirank terlengkap.