Cara Atasi Isu CLS (Pergeseran Tata Letak Kumulatif )

CLS atau Cumulative Layout Shift merupakan salah satu metrik yang digunakan oleh PageSpeed Insights untu membantu kita (blogger) mengoptimalkan halaman web. Terutama untuk menghindari pergeseran tata letak kumulatif pada website/blog yang tidak direncanakan.

Sebenar-nya ada banyak hal yang mempengaruhi CLS web/blog, tetapi yang paling mempengaruhi masalah CLS adalah ketika file gambar tidak memiliki width dan height yang jelas (tidak tepat).
[ads id="ads1"] Sebagai contoh ketika saya mengaudit blog dengan Google PageSpeed Insights, hasilnya terdapat masalah pada elemen logo dengan diagnostik "elemen gambar tidak memiliki width dan height yang jelas" yang menyebabkan kekacauan pada CLS halaman.

Solusinya sebenarnya sudah jelas dipaparkan oleh PSI yaitu dengan menyetel lebar dan tinggi yang jelas pada elemen gambar maka akan mengurangi pergeseran tata letak dan memperbaiki CLS seperti yang tertera pada gambar di bawah ini.

Jika hal serupa terjadi pada logo blog anda maka sangat tepat untuk anda meneruskan membaca artikel ini karena disini saya akan membahas tuntas mengenai cara mengatasi CLS yang buruk karena disebabkan oleh gambar (logo) yang tidak memiliki width dan height yang jelas atau tepat.

Langkah 1

Pastikan anda telah mengupload logo blog dengan benar, jika kamu adalah pemula silahkan lihat panduan mengupload logo blog pada link berikut Upload Logo.

Itu adalah kunci untama untuk menghindari pergeseran tata letak dan memperbaiki CLS blog di platform blogger. Kemudian uji kembali blog anda dengan PSI (PageSpeed Insights) apakah masalah CLS sudah teratasi atau tidak.

Langkah 2

Jika masalah CLS belum teratasi periksa html template terdapat pengaturan css responsive image atau tidak misalnya seperti contoh di bawah ini:

.header-logo img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Untuk memeriksa lakukan inspect element pada logo blog anda, dan perhatikan dengan baik css yang mengatur tinggi dan lebar gambar logo.

Saya jelaskan sedikit mengenai screenshot di atas, jika kamu memperhatikan css gambar logo sudah memenuhi syarat sebagai responsive image yakni:

.header-logo img {
    max-width: 100%;
    height: 36px;
    margin: 0;
}

Tetapi kenyataannya CLS blog saya masih tetap buruk dan PSI mendiagnosis bahwa gambar logo tidak memiliki width dan height yang jelas atau tidak tepat.

Jadi solusinya adalah langkah ke 3 yaitu mengubah css image pada logo ke ukuran pixel (px) yang lebih spesifik.

Langkah 3

Ubah pengaturan css image pada logo ke ukuran pixel (px) yang lebih spesifik, dari yang sebelumnya adalah

.header-logo img {
    max-width: 100%;
    height: 36px;
    margin: 0;
}

Menjadi...!

.header-logo img {
    width: 101.547px;
    height: 36px;
    margin: 0;
}

Untuk mengetahui ukuran asli logo yang ditampilkan di web/blog anda, sekali lagi kamu harus melakukan inspect element pada gambar logo web/blog.

Setelah mengetahui ukuran asli gambar logo yang ditampilkan web/blog anda, ubahlah css gambar logo ke ukuran pixel yang spesifik seperti yang saya contohkan di atas.

Dengan demikian masalah CLS yang disebabkan oleh gambar logo yang tidak memiliki width dan height yang jelas atau tidak tepat akan teratasi sepenuhnya.

Silahkan coba untuk menguji blog ini di Google PageSpeed Insights untuk membuktikan bahwa trik untuk mengatasi elemen gambar tidak memiliki width dan height yang jelas di artikel ini benar-benar bekerja. Bahkan saya berhasil mengatasi masalah CLS halaman web hingga 0% di versi mobile dan dekstop.