Cara Optimasi Cumulative Layout Shift (CLS) Demi Meningkatkan Skor Core Web Vitals dan Kenyamanan Pengunjung

Cumulative Layout Shift (CLS) adalah salah satu dari metrik pengukuran Core Web Vitals. CLS mengukur ke-tidak-stabilan konten dan tampilan melalui pergerakan layout saat browser me-render konten utama atau bagian critical (area above the fold) dari suatu halaman web. Selain mengukur seberapa banyak konten yang bergeser, CLS juga mengukur seberapa jauh jarak pergeseran tersebut.

Contoh video dari GTmetrix ini mungkin dapat membantu memahami tentang apa itu Cumulative Layout Shift (CLS):

Video di atas menunjukkan contoh adanya penambahan konten di bagian atas (blok warna merah) yang mengakibatkan layout-shift (pergeseran layout) pada konten utama dan bagian critical dari suatu halaman website (area above the fold). Pergeseran konten inilah yang disebut dengan Cumulative Layout Shift, atau yang sering disingkat dengan CLS.

Berapa angka maksimal CLS yang aman untuk Website?

Tidak seperti First Contentful Paint dan Large Contentful Paint yang diukur dalam satuan detik, Cumulative Layout Shift (CLS) adalah hasil dari impact fraction dikali distant fraction.

Skor CLS   =   Impact fraction * Distance fraction

• Impact Fraction:
  mengukur bagaimana konten atau elemen yang tidak stabil berdampak pada area above the fold.
• Distance Fraction:
  jarak terbesar dari setiap konten atau elemen yang tidak stabil bergerak (baik secara horizontal maupun vertikal) dibagi dengan dimensi terbesar viewport (lebar atau tinggi, mana saja yang lebih besar).

Untuk memberikan user-experience yang positif, pemilik website harus berusaha untuk mendapatkan skor CLS maksimal sebesar 0,1. Di atas itu, baik PageSpeed Insights dan Google Search Console akan memberikan peringatan.

Contoh Dampak Negatif Dari Cumulative Layout Shift (CLS)

Video dari web.dev ini mungkin bisa mewakili dampak terburuk dari CLS dari sudut pandang pengunjung website:

Video di atas menunjukkan adanya penambahan konten (#protip) di atas judul Order Confirmation yang kemunculannya sangat lambat di waktu yang tidak tepat. Pengunjung yang sebenarnya ingin untuk memilih “No, go back” tanpa sengaja jadi menekan “Yes, place my order” karena penambahan konten tersebut membuat layout bergeser menjadi turun.

Faktor apa saja yang sering menyebabkan angka CLS tinggi?

Dari pengalaman saya mengoptimasi website selama ini, hal-hal yang sering menyebabkan CLS umumnya adalah:

• Struktur HTML yang rumit di area above the fold,
• Text yang lambat muncul atau berubah (dari sisi bentuk, ukuran, dan dimensi) di saat browser memproses tampilan area above the fold,
• Gambar dalam tag <img> yang tidak disertai dimensi lebar (width) dan tinggi (height) dalam HTML-nya,
• Lambatnya browser memproses CSS yang dibutuhkan di area above the fold,
• Penerapan metode asynchronous CSS yang tidak disertai dengan pembuatan Inline Critical CSS yang benar-benar meng-cover kebutuhan semua elemen di area above the fold,
• Animasi yang diterapkan pada elemen-elemen HTML yang diterapkan di area above the fold,
• Penyisipan PopUp yang langsung dimuat sebelum ada interaksi user,
  dan menurut web.dev:
• Ads, embeds, dan iframes yang tidak disertai dimensi lebar (width) dan tinggi (height) dalam HTML-nya,
• Konten yang disisipkan secara dinamis seperti ads, embeds, dan iframes yang tidak disertai dimensi lebar (width) dan tinggi (height) dalam HTML-nya.

Bagaimana cara mengoptimasi dan memperbaiki angka CLS di Lighthouse dan PageSpeed Insights?

Mari kita rinci satu persatu cara memperbaiki angka CLS website demi meningkatkan Core Web Vitals dan kenyamanan pengunjung website kita:

• Sederhanakan struktur HTML di area above the fold
  Sebisa mungkin, kurangi dom-size dari masing-masing elemen yang kita buat untuk area above the fold. Membuat layout yang sederhana dan menghindari penggunaan carousel/slider yang umumnya memiliki struktur HTML yang rumit dapat sangat membantu untuk meningkatkan angka/skor CLS website kita.
• Inline CSS untuk pemanggilan font dan preload file-file dari font yang digunakan
  Membuat inline CSS untuk font-family dan pemanggilan font (@font-face declaration) dan meminta browser untuk memprioritaskan pengunduhan file-file font-nya dengan metode preload dapat sangat membantu untuk menghindari FOUT (Flash of Unstyled Text) dan FOIT (Flash of Invisible Text).
  Membuat Inline CSS untuk font-family dan pemanggilan font dapat mempercepat proses browser membaca CSS tanpa harus mengunduh file CSS nya terlebih dahulu, sedangkan preload file-file font-nya berguna untuk memastikan file tersebut sudah tersedia saat browser sudah selesai membaca Inline CSS untuk pemanggilan font-nya.
  Menambahkan font-display attribute pada @font-face declaration dan memberikan fallback font yang sesuai pada CSS font-family juga dapat berkontribusi besar untuk permasalahan teks dan font ini.
• Sertakan width dan height dalam <img> tag serta aspect ratio dalam CSS gambar
  Agar browser dapat lebih cepat menampilkan gambar tanpa ada pergeseran layout, kita perlu menambahkan atribut lebar (width) dan tinggi (height) dalam html setiap <img>, terutama yang terletak di area above the fold. Contohnya adalah seperti ini:

  <img src="url-gambar.jpg" width="640" height="360" alt="url-gambar dengan width dan height">

  Menambahkan aspect ratio dalam CSS yang digunakan untuk gambar seperti contoh di bawah ini juga dapat banyak membantu untuk mengurangi kemungkinan CLS yang disebabkan oleh gambar:

  img.class-name { aspect-ratio: auto 640 / 360; }

• Prioritaskan pengunduhan file-file gambar
  Untuk lebih mempercepat lagi proses penampilan gambar, di area above the fold meminta browser untuk memprioritaskan pengunduhan file-nya dengan metode preload atau loading=eager juga bisa sangat membantu memperkecil kemungkinan adanya CLS yang disebabkan oleh gambar.

  Bila website Anda menggunakan WordPress, plugin optimasi gambar yang saya buat dapat secara otomatis mem-preload featured image (yang umumnya memang terletak di area above the fold) dan juga menambahkan atribut loading=eager pada featured image tersebut: Lazyload, Preload, and More.

• Inline Critical CSS untuk semua Elemen yang digunakan di area above the fold
  Seperti yang sudah saya jelaskan dalam Cara Optimasi Core Web Vitals, Critical CSS adalah semua CSS yang diperlukan untuk mengatur tampilan area above the fold dari masing-masing halaman website. Kita perlu untuk meng-inline-nya di bagian <head> agar browser dapat membuat tampilan area above the fold dengan cepat tanpa harus mengunduh file-file CSS terlebih dulu. Ini dapat sangat membantu dalam mengurangi kemungkinan terjadinya Cumulative Layout Shift secara keseluruhan.
• Pastikan Inline Critical CSS yang kita buat sudah mengcover kebutuhan semua elemen di area above the fold
  Sering pengguna WordPress menggunakan plugin untuk membuat Inline Critical CSS. Umumnya, plugin-plugin tersebut membuat Inline Critical CSS dan secara otomatis mengatur pemuatan CSS dengan metode asynchronous. Sayangnya, pembuatan Inline Critical CSS dari plugin-plugin ini jarang sekali yang benar-benar mengcover kebutuhan CSS semua elemen HTML yang terdapat di area above the fold. Walaupun proses loading website umumnya menjadi lebih cepat, ini mengakibatkan banyak pergeseran layout pada konten-konten yang ada di area above the fold sehingga angka CLS website kita menjadi lebih tinggi dari yang seharusnya.
  Best practice nya menurut saya adalah membuat sendiri Critical CSS tersebut, dan membiarkan file CSS lain termuat dengan metode delay on user interaction.
  Setiap membuat website, saya sendiri selalu menyiapkan file-file khusus yang saya siapkan untuk menaruh Critical CSS dari masing-masing page-type, dan meng-inline-nya menggunakan plugin yang saya buat sendiri ketika website tersebut sudah dalam tahap produksi/live. Dengan ini, saya bisa memastikan bahwa Critical CSS yang digunakan sudah meng-cover kebutuhan semua elemen yang digunakan di area above the fold.
• Hindari penggunaan animasi di area above the fold
  Dari nature-nya, animasi memang ditujukan untuk membuat elemen atau layout bergerak (atau bergeser). Sesedikit apapun pergerakannya, ini dapat memperbesar angka CLS website kita. Sebisa mungkin, hindari penggunaan animasi untuk seluruh konten yang berada di area above the fold. Bila memang sangat membutuhkan animasi tersebut, tunda eksekusinya hingga ada interaksi user dengan menunda CSS ataupun JavaScript-nya.
• Jangan menggunakan embeds dan iframes di area above the fold
  Baik Embed dan Iframe, keduanya secara default memiliki struktur HTML yang tidak sederhana dan membuat browser harus memanggil resource dari website lain. Proses pemanggilan resource dari website lain ini umumnya sangat lambat, sehingga membuat tampilan area above the fold kita tidak dapat terbentuk dengan cepat. Menghindari pemakaian embed dan iframe di area above the fold sangat membantu untuk menghindari angka CLS yang buruk.
• Tunda kemunculan PopUp setelah ada interaksi user
  PopUp memang berguna untuk menampilkan informasi yang penting untuk pengunjung website kita. Namun bila ditampilkan langsung sejak awal dapat menambah CLS website ktia. Solusinya, tunda pemunculan PopUp hingga ada interaksi user dengan menunda CSS maupun JavaScript-nya.

Penutup

Dalam Lighthouse versi 10, Cumulative Layout Shift (CLS) memiliki porsi besar dari total performance score: 25%. Ini setara dengan bobot Largest Contenful Paint. Sedikit di bawah Total Blocking Time (TB) yang porsinya sebesar 30%. Menurut GTmetrix, CLS berkontribusi besar pada kenyamanan dan kepuasan pengunjung. Website yang tampil stabil dan cepat saat dimuat tentu membuat pengunjung senang berselancar dan mengeksplorasi website tersebut.

Kunci dalam optimasi Cumulative Layout Shift (CLS) adalah memastikan semua elemen di area above the fold dapat tampil dengan cepat dan stabil tanpa pergeseran-pergeseran layout yang berarti. Semua tergantung pada bagaimana kita mendesain area above the fold dari website kita.

Untuk halaman utama website inipun, saya tidak sukses membuat angka CLS-nya hingga 0, atau minimal, benar-benar mendekati 0 karena layout yang saya pilih. Namun karena tidak terlalu signifikan, saya pilih untuk membiarkannya 🙂

Bingung dan tidak berhasil meningkatkan skor Cumulative Layout Shift (CLS) website Anda? Konsultasi dan minta audit website Anda melalui form yang ada di halaman jasa optimasi speed website ini.