7+ CLS pada WordPress: Panduan Lanjutan Untuk Meningkatkan Skor CLS

Cumulative Layout Shift (CLS) adalah istilah yang digunakan dalam pengukuran kinerja situs web untuk mengukur stabilitas layout sebuah halaman. Ini merujuk pada perubahan yang terjadi pada layout halaman saat halaman tersebut dimuat atau diperbarui. Ketika layout sebuah halaman berubah secara tak terduga, hal tersebut dapat menyebabkan kesulitan bagi pengunjung untuk menemukan dan mengklik tautan atau elemen yang mereka inginkan.

CLS merupakan faktor yang diukur oleh Lighthouse, alat pengukuran kinerja situs web yang disediakan oleh Google. Lighthouse mengukur CLS dengan cara menghitung perbedaan antara posisi elemen pada saat halaman dimuat dan posisi elemen setelah halaman selesai dimuat. Semakin besar perbedaan tersebut, semakin tinggi nilai CLS yang dihasilkan.

CLS menjadi penting karena dapat mempengaruhi kepuasan pengunjung dan tingkat konversi situs web. Jika pengunjung merasa sulit untuk menemukan atau mengklik elemen yang mereka inginkan, mereka kemungkinan akan meninggalkan situs web tersebut dan tidak kembali lagi. Hal ini tentu saja akan merugikan situs web dari segi traffic dan pendapatan.

1. Pelajari bagian mana yang Bergeser

Cumulative Layout Shift Debugger – membuat GIF yang menunjukkan kepada Anda semua pergeseran tata letak seluler/desktop pada suatu halaman. Itu dibangun oleh Chrome engineer dan merupakan alat utama yang saya sarankan untuk digunakan.

PageSpeed Insights – Beberapa rekomendasi buat kamu untuk menggecek laporan terkait skor CLS. jIKA anda melihat kesalahan salah satu dari inim itu merupakan hal baik yang bisa anda mulai untuk menyelesaikan masalah tersebut.

• Avoid non-composited animations (Hindari animasi non-komposisi)
• Ensure text remains visible during webfont load (Pastikan teks tetap terlihat selama pemuatan webfont)
• Image elements do not have explicit width and height (Elemen gambar tidak memiliki lebar dan tinggi yang jelas)
• Avoid large layout shifts (Hindari pergeseran tata letak yang besar)

Layout Shift Regions – Jelajahi situ web anda secara real-time sambil anda bisa melihat pergeseran tata letak yang disorot dengan warna biru. Berikut adalah petunjuk untuk menggunakan Chrome Dev Tools:

• Buka Chrome Dev Tools.
• Buka Command Menu.
• Ketikkan “Rendering.”
• Jalankan Show Rendering command.
• Aktifkan kotak centang Layout Shift Regions.
• Saat anda berinteraksi dengan halaman, pergeseran tata letak akan disorot dengan warna biru.

Untuk mengurangi CLS pada situs web WordPress, ada beberapa langkah yang dapat dilakukan, diantaranya:

2. Gunakan plugin cache untuk mengurangi CLS

Plugin cache akan menyimpan versi halaman yang sudah dimuat sebelumnya, sehingga halaman tersebut dapat dimuat dengan lebih cepat pada kunjungan berikutnya. Ini akan mengurangi waktu yang diperlukan untuk memuat halaman dan mengurangi kemungkinan terjadinya perubahan layout saat halaman dimuat.

Plugin cache pada wordpress rekomendasi

3. Optimalkan gambar

Gambar yang terlalu besar dapat menyebabkan waktu yang lama untuk memuat halaman. Optimalkan ukuran gambar sebelum mengunggahnya ke situs web untuk mempercepat waktu muat halaman dan mengurangi kemungkinan terjadinya perubahan layout saat halaman dimuat.

Adapun gambar yang disarankan menggunakan format webp, dan jika anda menggunakan format png atau jpg. Anda bisa menkonversi gamabr tersebut ke format webp. Untuk tools yang biasa saya gunakan dan rekomendasi oleh google. Gunakan tools applikasi berikut https://squoosh.app/

4. Gunakan lazy loading

Lazy loading adalah fitur yang memungkinkan halaman untuk memuat elemen secara bertahap, bukan sekaligus. Ini akan mempercepat waktu muat halaman dan mengurangi kemungkinan terjadinya perubahan layout saat halaman dimuat.

5. Gunakan font yang sudah terpasang secara default

Menggunakan font yang sudah terpasang secara default di sistem operasi akan mempercepat waktu muat halaman dan mengurangi kemungkinan terjadinya perubahan layout saat halaman dimuat. Jika Anda perlu menggunakan font tambahan, sebaiknya gunakan font yang disediakan oleh Google Fonts atau font lokal yang sudah terinstall di wordpress.

Namun apabila anda mau menggunakan font yang lain bisa lakukan dengan menggubah font display menjadi swap

• swap – yaitu saat font khusus Anda sedang diunduh dan font fallback digunakan. Cara kerjanya yaitu setelah font kustom selesai diunduh, font fallback akan “ditukar” dengan font kustom Anda.
• Opsional – mirip dengan metode swap tetapi membiarkan browser menentukan apakah font khusus digunakan, kemudian hanya menampilkan font khusus pada koneksi cepat (namun bukan koneksi lambat).

Bagaimana memperbaiki font dengan plugin?

Sudah banyak plugin cache yang mendukung fitur yang mengatur property font-display contoh plugin Perfmatters, Elementor, WP Rocket atau bisa menggunakan Swap Google Fonts Display

Apabila tidak berhasil anda bisa melakukan nya secara manual. Lihat laporan “webfont load” Anda di PageSpeed ​​Insights dan gunakan String Locator untuk menemukan file yang bermasalah. Temukan file CSS tempat memuatnya, edit stylesheet, dan cari fontnya.

Setelah menemukan file css font, anda bisa menyesuaikannya, ada 2 cara yaitu di url file atau didalam file child nya.

Langsung pada File URL font

1. Tanpa menukar font display

/assets/vendor/googleapis/css2?family=Roboto:wght@100

2. Dengan menukar font display

/assets/vendor/googleapis/css2?family=Roboto:wght@100&display=swap

Edit File font display

1. Tanpa menukar font display

@font-face {
font-family: 'roboto';
font-style: normal;
font-weight: 300;
src: local(''),
url('../fonts/robot.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

2. Dengan menukar font display

@font-face {
font-family: 'roboto';
font-display: swap;
font-style: normal;
font-weight: 300;
src: local(''),
url('../fonts/roboto.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

6. Jangan gunakan JavaScript untuk mengatur layout

JavaScript dapat digunakan untuk mengatur layout halaman, namun dapat menyebabkan perubahan layout yang tidak terduga saat halaman dimuat. Sebaiknya gunakan CSS untuk mengatur layout halaman agar tidak terjadi perubahan yang tidak terduga saat halaman dimuat.

7. Gunakan fitur “async” pada tag JavaScript

Fitur “async” pada tag JavaScript akan memungkinkan JavaScript untuk dimuat secara asinkron, sehingga tidak akan menghambat waktu muat halaman. Ini akan mempercepat waktu muat halaman dan mengurangi kemungkinan terjadinya perubahan layout saat halaman dimuat.

Dengan mengikuti langkah-langkah di atas, Anda dapat mengurangi CLS pada situs web WordPress Anda dan meningkatkan kinerja situs serta kepuasan pengunjung. Selalu ingat untuk terus mengukur dan mengelola CLS agar situs web Anda dapat terus berjalan dengan lancar dan memberikan pengalaman yang baik bagi pengunjung.

Cek portfolio website saya di sini.