Apa itu CLS Score dan Bagaimana Cara untuk Improve CLS Score?

google home lisda

Sebagai salah satu pengukuran Core Web Vitals di Search Console dan bisa menjadi salah satu ranking factors Google Search, kita harus cek juga CLS Score di website kita.

Apa itu CLS Score? Apa kepanjangan dan maksud dari CLS?

CLS adalah singkatan dari Cumulative Layout Shift, salah satu metrik Google Core Web Vitals, seperti yang Google bilang kalau ini adalah sebuah pengukuran dari skor pergeseran tata letak atau layout shift, untuk setiap perubahan tata letak tak terduga yang terjadi selama seluruh lifespan sebuah page. Sebagai seorang SEO pemula, seperti biasa, saya kurang paham maksud dari Google ini, perlu mencari source lain untuk lebih memahami CLS. Saran saya, googling dengan keyword: Google CLS dan make sure click dari source web dev, bukan Google Classroom. Kalau menurut saya, CLS ini lebih ke layout sebuah page yang tidak stabil, sehingga ada perubahan signifikan saat user masuk ke page tersebut, misalnya layout headernya menjadi turun, tiba-tiba ditengah artikel muncul banner ads, dsb.

Lalu, apa itu CLS Score? Saya rasa ini adalah nilai yang diberikan oleh Google untuk visual stability dari sebuah page layout dalam website kita. Kalau menurut saya juga, setiap page itu pasti ada saja layout shiftnya, yang terkadang mengganggu experience user saat masuk ke pagenya. Dulu saya pernah baca sebuah page dari news publisher, yang mempunya banner yang bisa expand saat saya hover mouse ke banner tersebut, lalu artikel dibawahnya turun otomatis saat bannernya expand. Saya agak bingung juga, kok tiba-tiba text artikelnya turun. Nah, hal seperti ini yang membuat CLS Score menjadi jelek, menurut Google. CLS Score yang bagus itu maximum 0.1. Kalau CLS Score kamu diatas 0.25, nah, harus siap-siap berbenah layout page dan fix issuenya.

Bagaimana cara cek CLS Score? Cek CLS score website kamu dari Search Console.

  1. Masuk ke Search Console, pastikan property yang kamu pilih adalah website yang kamu mau cek CLS Scorenya.
  2. Klik menu Core Web Vitals di kiri.
  3. Kamu akan melihat Core Web Vitals metric.
  4. Klik open report.
  5. Kalau ada ‘Poor URL with Poor Issues’, cek detailnya dibawah grafik yang ada.
  6. Jika detailnya seperti ini: CLS issue: more than 0.25 (mobile), selamat, CLS Score website kamu dibawah standar Google, kamu harus fix issuenya secepat mungkin dan setelah kamu fix, kamu harus memvalidasi dengan klik ‘Validate Fix’ button.

Ada free tool untuk cek CLS Score gak, selain dari Google Search Console? Ada, cek CLS score dari Page Speed Insight.

  1. Ke developers.google.com/speed/pagespeed/insights.
  2. Ketik atau copy paste URL website atau spesifik pagenya.
  3. Nanti akan muncul Performance Scoring.
  4. Skrol ke bawah sampai di text ‘Show audits relevant to’ dan pilih tab CLS.
  5. Nanti kamu akan lihat CLS issue apa saja yang ada di website/page kamu. Jangan lupa untuk fix semuanya dan validasi di Search Console.

Bagaimana Cara Improve CLS Score? Banyak loh caranya!

Gampang, googling dengan keyword ini: how to improve CLS score. Kamu akan menemukan banyak artikel ‘how to’ dengan cara yang simpel. Kalau rekomendasi dari Google sbb:

  • Gunakan width dan height untuk size attributes di image dan video element.
  • Jangan menempatkan ads dekat atas viewport.
  • Gunakan space yang cukup untuk embeddable widgets dengan placeholder atau fallback.
  • Jangan memasukkan konten baru diatas konten yang sudah ada.
  • Gunakan preloading optional fonts untuk menghindari layout shifting dan flashes dari invisible text (FOIT).
  • Transformasi animasi ke animation properties.

Agak khawatir dengan CLS Score website kamu?

Kamu bisa cek Google Search Console untuk semua issue di Core Web Vitals. Google akan memberitahu kita apabila kita mempunya CLS issue atau issue yang lain. Saya cek CLS score untuk page Tiktok viral songs, dan CLS score saya untungnya bagus, tapi masih butuh beberapa improvement. Saya cek SEO master website seperti Craig Campbell website hasilnya butuh need improvement, lalu untuk website Neil Patel, Chase Reiner dan Chris Palmer mempunya skor yang bagus. Selain CLS, kita juga harus cek skor lain di Core Web Vitals seperti Largest Contentful Paint (LCP) dan First Input Delay (FID).

Sudah cek CLS Score website kamu? Bagus atau need improvement? Please comment below. Kamu bisa cek artikel menarik dan tips di sini, SEO tips di sini, dan Google Analytics di sini. Cek juga beberapa how to dan SEO video di Youtube channel Silent Tutorial di playlist ini:

Published by Lisda Ikhwantini

Digital Media Specialist and commenter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: