Core Web Vitals: Pergeseran Tata Letak Kumulatif – Apa Artinya dan Bagaimana Meningkatkannya untuk SEO

Dengan pembaruan Pengalaman Halaman Google yang sekarang diluncurkan, situs web yang disesuaikan memiliki beberapa peluang peringkat baru.

Secara khusus, situs web dapat memenuhi syarat untuk peningkatan peringkat berdasarkan beberapa metrik kinerja baru yang oleh Google disebut sebagai "inti web vital".

Data vital web inti adalah serangkaian fungsi halaman web inti yang memengaruhi pengalaman pengguna. Mereka sekarang berperan dalam SEO strategis dan dapat memengaruhi peringkat situs web di Google.

Google telah menetapkan tiga vital web inti:

• Cat Contentful Terbesar (LCP)
• Penundaan Input Pertama (FID)
• Pergeseran Tata Letak Kumulatif (CLS)

Artikel ini adalah bagian dari seri kami tentang pembaruan pengalaman laman Google, dan saya memperbaruinya untuk mencerminkan perubahan terbaru Google. Di sini saya akan membahas pergeseran tata letak kumulatif, atau CLS:

• Apa itu CLS?
• Bagaimana cara mengukur CLS?
• Bagaimana pengaruh CLS terhadap SEO?
• Bagaimana cara meningkatkan skor CLS saya?

Apa itu Pergeseran Tata Letak Kumulatif (CLS)?

CLS mengukur perubahan format ke halaman web setelah rendering awal di browser, biasanya dengan penyisipan dinamis konten di atas apa yang sudah ditampilkan.

Biasanya menjengkelkan untuk mengeklik tautan dan tautan itu "bergerak", menghasilkan klik ke lokasi yang tidak terduga. Ketidakstabilan konten di halaman web semacam ini menciptakan pengalaman pengguna yang buruk.

Google membahas CLS di sini:

Pergeseran Tata Letak Kumulatif (CLS) adalah metrik penting yang berpusat pada pengguna untuk mengukur stabilitas visual karena membantu mengukur seberapa sering pengguna mengalami perubahan tata letak yang tidak terduga—CLS yang rendah membantu memastikan bahwa halaman itu menyenangkan.

Pergeseran tata letak halaman yang tidak terduga merusak pengalaman pengguna. Salah satu contohnya adalah ketika tombol atau tautan bergeser di halaman web, menyebabkan seseorang mengklik sesuatu yang lain. Ini bisa sangat buruk jika itu berarti mereka secara tidak sengaja melakukan pembelian, seperti yang Anda lihat di demo ini dari Google:

Yang penting, Google mengklarifikasi bahwa tidak semua perubahan tata letak dianggap buruk:

Pergeseran tata letak hanya buruk jika pengguna tidak mengharapkannya. Di sisi lain, perubahan tata letak yang terjadi sebagai respons terhadap interaksi pengguna (mengklik tautan, menekan tombol, mengetik di kotak telusur, dan sejenisnya) umumnya baik-baik saja, selama perubahan itu terjadi cukup dekat dengan interaksi sehingga hubungannya jelas bagi pengguna.

Pergeseran tata letak yang terjadi dalam 500 milidetik dari input pengguna akan memiliki flag hadRecentInput yang disetel, sehingga dapat dikeluarkan dari perhitungan.

Bagaimana Cumulative Layout Shift (CLS) Diukur?

CLS diukur dengan total semua skor pergeseran tata letak individual untuk setiap perubahan tata letak tak terduga yang terjadi selama "jendela sesi" tampilan halaman terburuk.

Jendela sesi adalah rentang shift 5 detik yang terjadi saat pengguna mengunjungi halaman. Google mencari interval 5 detik yang memiliki penalti shift paling banyak, dan itulah skor untuk tampilan halaman itu.

Untuk menghitung skor pergeseran tata letak, Google mengalikan fraksi dampak dan fraksi jarak . Aku akan memecah ini.

Fraksi dampak adalah seberapa banyak area viewport yang dibutuhkan elemen tidak stabil di antara dua bingkai.

Pada contoh di bawah ini, Anda dapat melihat bahwa elemen mengambil 50% dari viewport asli, tetapi kemudian dipindahkan ke bawah sebesar 25%. Di antara kedua bingkai, elemen menempati 50% ditambah 25% area pandang, menyebabkan fraksi benturan menjadi 75%.

Contoh pergeseran tata letak antara dua bingkai, Google Developers

Fraksi jarak adalah jarak perpindahan unsur yang tidak stabil. Contoh di bawah ini menunjukkan bahwa elemen telah berpindah 25% dari ketinggian viewport.

Contoh pergeseran jarak di viewport, Google Developers

Jadi kesimpulannya: CLS diukur dengan skor pergeseran tata letak, yang dihitung dengan cara ini:

Fraksi dampak * fraksi jarak = skor pergeseran tata letak

Mengambil contoh di atas, perhitungannya akan seperti ini: 0,75 * 0,25 = 0,1875. Google mengatakan halaman web harus mempertahankan CLS kurang dari 0,1 di semua halaman atau tampilan halaman di situs Anda. Contoh ini akan melebihi tujuan itu, jadi skornya akan buruk.

Satu ilustrasi untuk memberi Anda gambaran yang lebih jelas tentang bagaimana skor CLS: Jika semua yang ada di dalam area pandang bergeser keluar dari area pandang dalam satu bingkai, itu akan memiliki skor tata letak 1,0. (Lihat contoh lain di GitHub.)

Semakin banyak elemen yang Anda miliki di halaman Anda yang bergeser di viewport, semakin buruk skor Anda.

Target skor CLS Google

Anda dapat membaca lebih lanjut tentang skor pergeseran tata letak di sini dan bagaimana Google mendefinisikan ambang batasnya di sini.

Bagaimana Pergeseran Tata Letak Kumulatif (CLS) Mempengaruhi SEO?

Seperti halnya web vitals inti lainnya, CLS membantu memastikan bahwa pengalaman halaman lancar bagi pengunjung Anda — di seluler dan desktop.

Skor perubahan tata letak yang baik dapat membantu memastikan pengguna tidak frustrasi dengan laman web Anda, tidak mengeklik secara tidak sengaja dan dibawa ke laman lain, dan tidak melakukan pembelian secara keliru. Pengalaman pengguna yang baik membantu Anda mencapai semua hasil yang ingin kami lihat di SEO: peringkat, lalu lintas, konversi, dan pendapatan.

Menurut penelitian Screaming Frog, URL di Posisi 1 dari hasil pencarian 10% lebih mungkin untuk lulus penilaian vital web inti daripada URL di Posisi 9. Tentu saja, data ini mencerminkan halaman yang ada — yang mungkin belum disesuaikan dengan baik. mematuhi data vital web inti — sebelum faktor-faktor ini diterapkan pada algoritme peringkat.

Melihat CLS, kurang dari setengah (46%) URL seluler dan kurang dari setengah (47%) URL desktop memiliki skor CLS “baik”. Skor CLS rata-rata adalah 0,29 di seluler dan 0,25 di desktop. Dengan kata lain, ada ruang untuk peningkatan CLS di sebagian besar situs .

Screaming Frog menyegmentasikan tingkat kelulusan berdasarkan posisi, dan menemukan penurunan persentase URL "baik" saat Anda menurunkan posisi pada halaman hasil pencarian. Contoh berikut adalah hasil seluler, tetapi juga membuat grafik data untuk desktop.

“Berapa Banyak Situs yang Lulus Penilaian Vital Web Inti?”, screamfrog.co.uk

Bagaimana Saya Meningkatkan Skor Pergeseran Tata Letak Kumulatif (CLS) Saya?

Google menawarkan alat lab dan alat lapangan untuk membantu Anda mengukur, lalu mengoptimalkan, skor CLS Anda. Untuk CLS, alat lab mungkin tidak berguna seperti data nyata yang diambil di alam liar untuk laman web Anda.

Alat yang disediakan antara lain:

• Laporan Pengalaman Pengguna Chrome (bidang)
• PageSpeed ​​Insights (lab dan lapangan)
• Search Console (laporan Data Web Inti) (bidang)
• Chrome DevTools (lab)
• Mercusuar (lab)
• WebPageTest (lab)
• WaterFaller.dev (lab)

Cara lain untuk mengukur CLS menggunakan perpustakaan JavaScript web-vitals. Anda dapat mempelajari lebih lanjut tentang itu di sini.

Penyebab umum pergeseran tata letak meliputi:

• Gambar tanpa dimensi
• Iklan, video, dan objek atau iframe tersemat lainnya tanpa dimensi
• Konten yang disuntikkan secara dinamis
• CSS yang memuat terlambat di mana gaya diterapkan setelah item lain dimuat
• Font web menyebabkan kilatan teks yang tidak terlihat atau tidak bergaya
• Elemen pada halaman yang menunggu item lain dimuat melalui jaringan sebelum muncul
• Menganimasikan elemen dengan "tinggi" dan "lebar" alih-alih "transform: scale()" CSS
• Menganimasikan elemen dengan "atas", "kanan", "bawah" atau "kiri" alih-alih "transform: translate()" CSS

Prinsip dasar yang akan meningkatkan CLS meliputi:

1. Selalu gunakan atribut ukuran untuk gambar, video, dan item atau iframe yang disematkan lainnya. Jika elemen dimuat secara dinamis, gunakan CSS untuk menata elemen penampung apa pun dengan ukuran atau rasio tinggi lebar yang sama sebelum konten dimuat. Kemudian, ketika konten dimuat ke dalam elemen penampung tersebut, halaman tidak akan bergeser.
2. Jangan pernah menyisipkan konten secara dinamis di atas konten yang ada.
3. Jika menggunakan CSS untuk menganimasikan elemen, pilih animasi "transformasi".

Dan lihat video ini tentang CLS dari Pengembang Google Chrome di YouTube:

Ingin info lebih mendalam? Tonton webinar sesuai permintaan kami 3 Kiat Pakar untuk Meningkatkan Vital Web Inti termasuk T&J yang diperluas di bagian akhir.

Baca seluruh rangkaian pengalaman halaman kami untuk informasi lebih lanjut tentang pembaruan peringkat ini:

1. Apa itu Pembaruan Pengalaman Halaman?
2. Cara Membuat Situs Ramah Seluler
3. Interstisial Mengganggu & Mengapa Buruk untuk SEO
4. HTTPS untuk Pengguna dan Peringkat
5. Ikhtisar Vital Web Inti
6. Data Web Inti: LCP (Cat Contentful Terbesar)
7. Data Web Inti: FID (Penundaan Input Pertama)
8. Data Web Inti: CLS (Pergeseran Tata Letak Kumulatif)