Pergeseran Tata Letak Kumulatif: Tingkatkan Skor Google CLS

Pernahkah Anda berada dalam situasi di mana tombol checkout hilang ketika Anda mencoba melakukan pemesanan?

Ya! Ini membuat frustrasi.

Sebenarnya, itu terjadi terlalu sering dan dengan terlalu banyak dari kita.

Untungnya, seperti biasa, Google memprioritaskan pengalaman pengguna di atas segalanya.

Inilah sebabnya mengapa ia akan meluncurkan tiga metrik kinerja baru sebagai bagian dari vital web intinya, mulai tahun 2021.

Data Web Inti dirancang untuk mengukur kecepatan pemuatan, interaktivitas, dan stabilitas visual halaman.

Tiga metrik mewakili ini:

1. Cat Isi Terbesar (LCP)

2. Penundaan Input Pertama (FIP)

3. Pergeseran tata letak kumulatif (CLS)

Mari kita pahami CLS dari sudut pandang pengguna dan webmaster (SEO).

Apa itu Pergeseran Tata Letak Kumulatif?

Pergeseran Tata Letak Kumulatif (CLS) mewakili stabilitas visual situs web.

Ini mengukur jumlah pergeseran tata letak yang tidak signifikan pada halaman.

Pergeseran tata letak yang tidak terduga adalah hasil dari halaman web yang bergerak sendiri tanpa masukan pengguna.

Google CLS adalah semacam indikator(Sinyal) bagi Anda untuk memperbaiki masalah dengan mengukur seberapa sering pergerakan elemen halaman yang tidak terduga memengaruhi pengalaman pengguna.

Pergeseran dalam tata letak dapat terjadi kapan saja ketika elemen yang terlihat mengubah posisinya dari satu bingkai yang dirender ke bingkai berikutnya.

Mari kita coba memahami arti umum dan mendefinisikan dengan kata-kata sederhana "Pergeseran Tata Letak Kumulatif":

Kumulatif adalah pertambahan jumlah.

Tata letaknya adalah Bingkai

Pergeseran adalah perubahan posisi

Sederhananya, Pergeseran Tata Letak Kumulatif adalah jumlah total dari semua perubahan bingkai individu dalam posisi desain situs web.

Gambar bersumber dari web.dev

Skor CLS standar harus di bawah 0,1.

Ambang batas yang baik untuk mengukur hal yang sama adalah persentil ke-75 dari pemuatan halaman di seluruh perangkat seluler dan desktop.

Pada gambar di atas, jelas bahwa Sesuai Google:

1. Jika skor CLS kurang dari 0,1, itu adalah sinyal yang baik. Ini berarti situs Anda tidak memiliki masalah dengan perubahan tata letak.

2. Jika skor CLS antara 0,1 hingga 0,25, itu berarti situs Anda perlu perbaikan tertentu dalam tata letak visual.

3. Jika skor CLS lebih dari 0,25, itu adalah sinyal yang buruk, yang juga berarti bahwa gerakan elemen visual sangat sering terjadi.

Bagaimana Pergeseran Tata Letak Kumulatif Dihitung?

Google menghitung CLS halaman dengan menghitung fraksi dampak dan fraksi jarak untuk setiap perubahan tata letak yang tidak terduga.

Fraksi Dampak CLS

Ini mengukur jumlah ruang yang digunakan oleh elemen yang tidak stabil di area viewport di antara dua bingkai.

Rumus untuk menghitung Fraksi Dampak untuk CLS

Untuk Menghitung Skor Pergeseran Tata Letak, kita membutuhkan Pecahan Dampak.

Bagaimana cara menghitung Fraksi Dampak untuk CLS?

Representasi grafis akan membantu Anda memahami pecahan dampak dengan lebih baik.

 Fraksi Dampak = [Area Wilayah Dampak] / [Area Viewport] Fraksi Dampak = [330 x 490] / [375 x 667] Fraksi Dampak = [161700] / [250125] Fraksi Dampak = 0,645

Fraksi Jarak CLS

Ini adalah ukuran jumlah ruang yang telah dipindahkan elemen halaman dari posisi semula ke posisi akhir yang pada dasarnya menggeser tata letak.

Untuk menghindari kasus hukuman yang berlebihan, pergeseran elemen besar dengan jumlah kecil diperhitungkan dengan memperkenalkan Pecahan Jarak.

Rumus untuk menghitung Pecahan Jarak untuk CLS

Bagaimana cara menghitung Pecahan Jarak untuk CLS?

Representasi grafis akan membantu Anda memahami fraksi jarak dengan lebih baik.

Jarak Pecahan = [Maks. Jarak Pindah] / [Tinggi ViewPort] Pecahan Jarak = [120] / [667] Pecahan Jarak = 0,179

Rumus Menghitung Skor Google CLS

Skor Tata Letak Kumulatif dihitung dengan mengalikan Pecahan Dampak dengan Pecahan Jarak:

 Pergeseran Tata Letak Kumulatif (CLS) = Pecahan Dampak x Pecahan Jarak

CLS = 0,645 x 0,179 CLS = 0,1154 .

Skor CLS terus meningkat seiring dengan meningkatnya tumbukan dan fraksi jarak.

Pergeseran Tata Letak Kumulatif dengan contoh sederhana.

Anda mengunjungi sebuah situs dan melihat sesuatu yang menarik untuk dibaca.

Anda pergi ke depan untuk klik pada link.

Tetapi ketika Anda akan mengklik tautan, tautan itu bergeser ke bawah di halaman web sebesar setengah inci, dan Anda akhirnya mengklik iklan yang ditempatkan tepat di atasnya.

Sumber: nitropack.io

Kedengarannya tidak adil, bukan?

Ini adalah perubahan tata letak yang tidak terduga.

Ini hanya berarti bahwa Anda akan diarahkan ke beberapa halaman arahan yang tidak diinginkan dari mana Anda harus kembali ke halaman web asli.

Kami juga memiliki sesuatu yang dikenal sebagai pergeseran tata letak yang diharapkan.

Itu terjadi ketika Anda mengklik sesuatu di halaman web, dan itu mengubah tata letak halaman saat ini.

Misalnya, Anda membuka blog untuk mencari informasi tertentu.

Segera setelah Anda memasukkan nama topik di bilah pencarian, itu akan mengambil posting blog tertentu di mana Anda akan menemukan informasi yang diperlukan atau membuat beberapa posting blog yang terkait dengan topik tersebut.

Sumber: nitropack.io

Ini adalah hasil yang diharapkan dari halaman web dan dapat dianggap sebagai perubahan tata letak yang diharapkan.

Apa Penyebab Masalah CLS?

Menurut Google, raksasa mesin pencari, ada 5 kemungkinan alasan Pergeseran Tata Letak Kumulatif :

Gambar dan Video tanpa dimensi

Dianjurkan untuk selalu menentukan lebar dan tinggi gambar dan video Anda.

Anda juga dapat menggunakan kotak rasio aspek CSS untuk memungkinkan browser mengalokasikan jumlah ruang yang tepat pada halaman web saat gambar sedang dimuat.

Iklan, sematan, dan iframe tanpa dimensi

Ukuran iklan dapat meningkatkan pendapatan melalui RKT tinggi.

Namun, ini dapat membahayakan kualitas pengalaman pengguna dengan mendorong konten ke bawah halaman.

Pergeseran tata letak ini dapat dikurangi dengan memesan ruang untuk slot iklan, menghilangkan pergeseran dengan memesan ukuran terbesar yang mungkin untuk slot iklan, atau memilih ukuran terbaik slot iklan berdasarkan data historis.

Konten yang disuntikkan secara dinamis

Hindari menyisipkan konten baru apa pun di atas konten yang sudah ada, kecuali sebagai respons terhadap interaksi pengguna.

Ini akan memastikan setiap perubahan tata letak yang terjadi selalu diharapkan daripada memicu gambar atau teks untuk bergerak secara tidak terduga.

Font Web menyebabkan FOIT/FOUT

Coba gunakan nilai font:display dengan font kustom Anda seperti auto, swap, block, fallback, dan opsional, untuk mencegah pergeseran tata letak yang tidak perlu.

Untuk memastikan tidak ada perubahan tata letak, gunakan font:display bersama dengan tautan rel=preload.

Elemen apa pun yang menggunakan font itu akan disembunyikan hingga aset font diunduh sepenuhnya, dikenal sebagai FOIT (Flash of invisible text).

Sumber animasi: malthemilthers.com

Tampilan font fallback di tumpukan font hingga font kustom dimuat dikenal sebagai FOUT (Flash teks tanpa gaya).

Tindakan menunggu respons jaringan sebelum memperbarui DOM

Selalu gunakan animasi "transformasi" untuk animasi properti yang memicu perubahan tata letak.

Bagaimana Skor Google CLS Dipengaruhi Melalui Iklan?

Untuk menangani iklan yang menyebabkan CLS, Anda perlu mengatur gaya elemen tempat iklan akan ditampilkan.

Oleh karena itu, jika Anda menata div, divisi gambar atau video di WordPress atau elemen situs web apa pun dengan ukuran tinggi dan lebar tertentu, iklan Anda akan dibatasi hanya dalam dimensi yang disebutkan.

Jika elemen yang berisi iklan tidak menampilkan iklan, Anda dapat mengaturnya sedemikian rupa sehingga iklan spanduk alternatif atau gambar placeholder dapat mengisi ruang kosong.

Atau, iklan dapat mengisi seluruh baris di bagian atas kolom di selokan kanan atau kiri halaman untuk tata letak tertentu.

Jika halaman tidak muncul, tidak akan ada perubahan dan tidak akan ada bedanya di seluler atau desktop.

Namun, Anda harus memperhatikan bahwa itu tergantung pada tata letak tema dan Anda harus mengujinya jika ada masalah dengan inventaris iklan.

Bagaimana CLS Dapat Meluncur Selama Pengembangan Web?

Google CLS dapat lolos dari tahap pengembangan.

Inilah yang bisa terjadi.

Banyak aset yang diperlukan untuk membuat halaman web dimuat ke cache browser.

Saat berikutnya pengembang mengunjungi halaman yang sedang dikembangkan, mereka tidak akan melihat perubahan tata letak karena elemen halaman sudah diunduh.

Oleh karena itu disarankan untuk melakukan pengukuran di lapangan atau lab.

Tes Pergeseran Tata Letak Kumulatif

Metrik kinerja situs web Pergeseran Tata Letak Kumulatif dapat diukur dengan salah satu cara berikut:

Alat Lapangan

Di lapangan: pada pengguna nyata yang benar-benar berinteraksi dengan halaman. Hal ini dapat diukur dengan menggunakan alat-alat lapangan berikut:

Laporan Pengalaman Pengguna Chrome

Ini memberikan metrik pengalaman pengguna tentang bagaimana pengguna Chrome dunia nyata mengalami tujuan populer di web.

Wawasan PageSpeed

Alat ini menganalisis konten halaman web dan menghasilkan saran untuk membuat halaman itu lebih cepat dari sebelumnya.

Search Console (laporan Data Web Inti)

Search Console menunjukkan performa halaman Anda berdasarkan data penggunaan di dunia nyata (terkadang disebut data lapangan).

Alat Lab

Di lab: menggunakan alat untuk mensimulasikan pemuatan halaman di lingkungan yang terkendali dapat diukur menggunakan alat Lab berikut:

Alat Pengembang Chrome

Chrome DevTools dapat membantu Anda mengedit halaman dengan cepat dan mendiagnosis masalah dengan cepat, yang pada akhirnya memungkinkan Anda membuat situs web yang lebih baik dengan lebih cepat.

Mercu suar

LightHouse adalah open-source, alat otomatis untuk meningkatkan kualitas halaman web.

Anda dapat menjalankannya di halaman web mana pun, publik, atau memerlukan otentikasi.

Ini memiliki audit untuk kinerja, aksesibilitas, aplikasi web progresif, SEO, dan banyak lagi.

Tes Halaman Web

Jalankan tes kecepatan situs web gratis dari seluruh dunia menggunakan browser nyata dengan kecepatan koneksi konsumen dengan rekomendasi pengoptimalan yang mendetail.

Menurut web.dev ; Perhatian: Alat lab biasanya memuat halaman dalam lingkungan sintetis dan hanya mengukur pergeseran tata letak selama pemuatan halaman.

Akibatnya, nilai CLS yang dilaporkan oleh alat lab untuk halaman tertentu mungkin kurang dari apa yang dialami pengguna sebenarnya di lapangan.

Alat Cepat untuk memeriksa Pergeseran Tata Letak Kumulatif

1. CLS dalam format GIF dari Defaced Tool oleh Chris Johnson untuk Mengidentifikasi LS yang bermasalah.

2. Kalkulator Pergeseran Tata Letak Kumulatif

Cacat dalam Perhitungan CLS

Google menerima umpan balik tentang metrik CLS yang tidak memadai untuk mengukur halaman web yang terbuka untuk waktu yang lama, menghukum mereka dengan skor yang lebih rendah.

Google meninjau tiga solusi untuk memperbarui bagaimana skor CLS, jadi tidak ada yang perlu dikhawatirkan tentang skor CLS yang semakin buruk karena perubahan ini.

Jendela Sesi untuk Mengukur CLS

Google menggunakan pendekatan jendela sesi untuk mengukur CLS.

Pengukuran elemen halaman diukur di jendela sesi, yang sesuai dengan berbagai bagian halaman web yang dijangkau pengguna saat mereka menggulir halaman web ke bawah.

Skor total untuk setiap jendela sesi adalah pergeseran tata letak kumulatif, pergeseran total seluruh halaman.

3% halaman web dengan gulir tak terbatas atau memiliki penangan antarmuka pengguna yang lambat bereaksi terhadap interaksi pengguna akan melihat skor mereka naik ke peringkat yang baik.

Pembaruan Membuat Skor CLS Lebih Akurat

Ini adalah keuntungan bagi penerbit dengan sistem penilaian baru menjadi lebih adil, terutama untuk halaman web yang terbuka untuk waktu yang lama atau menggunakan scroll tak terbatas dan dinilai tidak adil karena itu.

Dengan metrik Data Web Inti yang akan menjadi faktor peringkat pada Mei 2021, perubahan penting dilakukan pada menit terakhir.

Kesimpulan

Memahami Pergeseran Tata Letak Kumulatif (CLS) akan membantu Anda menawarkan pengalaman pengguna yang lebih baik dalam beberapa hari mendatang.

Karena metrik adalah bagian dari Core Web Vitals untuk meningkatkan UX dan dijadwalkan menjadi sinyal peringkat pada tahun 2021, penting untuk memahami pentingnya dan dampaknya pada situs Anda.