Cara Meningkatkan Pergeseran Tata Letak Kumulatif (CLS) untuk WordPress

Sebagian besar situs web dibuat untuk diakses dari berbagai perangkat dengan berbagai ukuran dan resolusi layar. Dengan demikian, mempertahankan pengalaman yang sama di berbagai platform bisa jadi sulit. WordPress membuat desain web lintas platform lebih mudah. Namun, dalam segala bentuk pengembangan perangkat lunak, membangun solusi yang cocok untuk semua bisa menjadi rumit.

Dalam kasus pengembangan web, pengguna yang menavigasi dari halaman ke halaman di situs web terkadang mengalami apa yang dikenal sebagai Pergeseran Tata Letak Kumulatif (CLS). Ini terjadi ketika elemen visual halaman mengalami perubahan mendadak atau dimuat dengan tidak benar. Tiba-tiba teks menjadi lebih besar atau lebih kecil, gambar berubah posisinya, atau seluruh tata letak halaman berubah.

Mengapa ini terjadi, dan bagaimana kita bisa memperbaikinya? Dalam panduan ini, kami akan mengeksplorasi apa itu CLS dan bagaimana Anda dapat mencegahnya di situs web Anda.

Apa itu Pergeseran Tata Letak Kumulatif?

Bentuk CLS yang paling umum terlihat adalah kelambatan dalam memuat gambar. Pada situs web kompleks yang sarat dengan elemen visual, Anda akan sering melihat bahwa teks dimuat sebelum elemen media. Selanjutnya, tata letak halaman web berubah ketika semua elemen visual akhirnya dimuat. Insiden ini terjadi apakah Anda sedang menggulir atau tidak.

Ketika halaman web memiliki skor CLS yang tinggi, sulit untuk menentukan kapan halaman tersebut telah dimuat sepenuhnya. Semakin rumit dan berat media situs web, semakin tinggi kemungkinan pergeseran tata letak pengalaman.

Misalnya, halaman web mesin pencari sederhana dengan elemen visual yang sangat sedikit memiliki sedikit CLS. Namun, ini tidak berarti bahwa semua situs web yang kompleks atau penuh fitur memiliki skor CLS yang tinggi. Misalnya, toko online Amazon penuh dengan widget, gambar, dan tautan, tetapi memuat dengan cepat tanpa perubahan yang terlihat.

Apa Penyebab Pergeseran Tata Letak Kumulatif?

CLS cenderung terjadi karena browser web memuat elemen secara berurutan pada waktu yang berbeda. Selain itu, Anda mungkin memiliki elemen media di situs web Anda dengan properti yang tidak diketahui (seperti dimensi).

Jika Anda tidak menentukan lebar atau tinggi elemen media (seperti gambar), browser web Anda tidak akan tahu berapa banyak ruang yang harus dialokasikan hingga halaman web dimuat sepenuhnya. Oleh karena itu, perubahan tata letak yang drastis. Singkatnya, alasan utama untuk sebagian besar CLS adalah pemuatan yang tidak efisien.

Penting untuk dicatat bahwa bahkan jika Anda tidak melihat perubahan tata letak secara real-time, itu tidak berarti tidak ada perubahan yang terjadi. Peramban web sering menyimpan data situs web dalam cache, jadi lebih mudah memuat laman web saat Anda mengunjunginya kembali. Mengukur skor CLS adalah cara terbaik untuk menentukan apakah situs web Anda mengalami perubahan tata letak yang substansial.

Cara Mengukur Skor CLS Situs Web Anda

Skor CLS menunjukkan jumlah pergeseran tata letak yang dialami halaman web sepanjang masa pakainya. Kita dapat memperoleh skor CLS dari apa yang dikenal sebagai jendela sesi. Jendela sesi menjelaskan jumlah pergeseran tata letak yang terjadi dalam interval lima detik. Untuk menghitung skor CLS, kita perlu mengalikan fraksi jarak dengan fraksi tumbukan:

 Skor CLS = Pecahan Jarak x Pecahan Dampak

Fraksi tumbukan menggambarkan seberapa besar elemen yang tidak stabil mempengaruhi area yang dapat dilihat antara dua bingkai. Fraksi jarak menggambarkan jumlah elemen yang telah bergeser di antara bingkai. Skor CLS 0,10 ke bawah (0,0 – 0,10) sangat bagus. Skor CLS di atas 0,10 tetapi di bawah 0,25 (0,10 -0,25) tergolong sedang dan memerlukan perbaikan, sedangkan skor CLS di atas 0,25 (0,25 <) tergolong buruk.

Konsep-konsep ini mungkin agak sulit untuk dipahami. Untungnya, Anda tidak perlu menghitung CLS situs web Anda secara manual. Ada banyak alat online (dan offline) yang dapat menghitung skor CLS untuk Anda.

Saat ini, cara paling populer untuk mengukur CLS halaman web Anda adalah melalui Google's PageSpeed ​​Insights. Ini memungkinkan Anda untuk memastikan statistik pengalaman pengguna situs web Anda untuk iterasi seluler dan desktop.

Alat CLS lainnya termasuk:

• GT Metrik
• Debugger CLS Google Web Vitals
• Ekstensi Vital Web Google Chrome
• Mercusuar Google
• Tes halaman web

Karena PageSpeed ​​Insights Google adalah yang paling familiar, kami akan menggunakannya sebagai contoh.

Untuk mengukur skor CLS Anda, navigasikan ke halaman beranda wawasan PageSpeed, masukkan URL Halaman Web Anda ke bidang teks teratas, lalu klik tombol Analisis . Bergantung pada popularitas situs web dan kecepatan internet Anda, PageSpeed ​​Insights akan memberi Anda laporan dalam beberapa detik.

Untuk menemukan skor CLS Anda, gulir ke bawah ke bagian Penilaian Vital Web Inti.

Jika kami menggunakan beranda Amazon sebagai contoh, kemungkinan besar, kami akan menemukan skor CLS kurang dari 0,10. Selama pengujian kami, kami menemukan bahwa situs web seluler memiliki skor CLS 0,01, sedangkan versi desktop memiliki skor 0,05.

Tetapi bagaimana mereka melakukannya ketika situs mereka sangat banyak sumber daya? Mari kita lihat bagaimana Anda dapat memiliki skor CLS seperti Amazon juga.

Cara Mengoptimalkan CLS

Cara terbaik untuk melihat elemen mana yang menyebabkan skor CLS Anda tinggi adalah dengan menggunakan debugger CLS Google Web Vitals. Ini menunjukkan kepada Anda GIF dari semua fitur pergeseran di situs web Anda. Iklan dan file media adalah penyebab paling umum untuk skor CLS yang tinggi. Penyebab lain mungkin termasuk font, CSS asinkron, animasi, dan Iframe. Untuk meningkatkan skor CLS Anda, Anda harus mengoptimalkan elemen-elemen ini.

Memastikan bahwa situs web Anda memiliki CLS yang terhormat sama pentingnya dengan memastikan bahwa situs tersebut memiliki SEO lokal yang kuat dan konten yang relevan. Mesin pencari Google cenderung memberikan preferensi ke situs web yang memberikan pengalaman pengguna yang luar biasa dan dioptimalkan dengan baik.

Untuk itu, berikut beberapa langkah untuk meningkatkan skor CLS situs Anda:

Tambahkan properti dimensi ke semua file media

Jika Anda mengunggah file media dengan properti yang tidak diketahui, itu akan meningkatkan risiko pergeseran tata letak karena browser web Anda perlu mengetahui ukuran gambar Anda dan menentukan orientasi tata letak setelah memuat. Situasi ini memiliki peluang lebih besar untuk terjadi pada gambar dan file beresolusi tinggi yang besar.

Dengan mengunggah file media dengan properti ukuran yang hilang, Anda telah menempatkan terlalu banyak pekerjaan di tangan browser web. Anda harus menambahkan properti tinggi dan lebar untuk setiap file media visual yang Anda unggah. Anda dapat melakukan ini dengan melihat kode sumber Anda dan menambahkan properti lebar dan tinggi secara manual.

Pastikan font dimuat secara lokal

Teks harus tetap terlihat selama pemuatan font. Langkah pertama untuk mencapai ini adalah memastikan bahwa font dimuat secara lokal alih-alih ditarik dari situs web font pihak ketiga.

Jika Anda menemukan bahwa font Anda ditarik dari situs web pihak ketiga, Anda dapat menggunakan plugin seperti OMGF untuk menghostingnya secara lokal dan memuatnya lebih cepat. Ini tidak hanya akan meningkatkan skor CLS Anda, tetapi juga merupakan langkah menuju desain ramah lingkungan.

Hindari FOIT dan FOUT

Kilatan teks tak terlihat (FOIT) terjadi saat Anda gagal menentukan font cadangan. Saat browser web Anda mencoba memuat font Anda atau mencari alternatif, pengguna akan diberikan ruang kosong tempat teks seharusnya berada.

Selama flash teks tanpa gaya (FOUT), Anda akan disajikan dengan font fallback default browser web hingga dapat memuat font yang Anda tentukan. Untuk memperbaikinya, Anda dapat menambahkan properti font-display: swap .

Jika Anda pernah mengunduh font dari Google, Anda akan melihat bahwa ia menambahkan tag ini ke akhir setiap URL. Cara termudah untuk menambahkan properti ini sendiri adalah dengan menggunakan plugin Swap Google Fonts Display di WP.

Namun, perlu diingat bahwa plugin ini hanya berfungsi untuk font Google, dan secara otomatis menambahkan properti swap tampilan ke URL tersebut. Jika Anda menghosting font secara lokal, Anda dapat menggunakan plugin String Locator untuk menemukan semua file font Anda dan mengubahnya. Anda harus membuka lembar gaya font di WP dan memodifikasinya.

Atau, Anda dapat menggunakan plugin caching, seperti plugin yang secara otomatis akan mengoptimalkan font untuk Anda dengan menambahkan properti font swap.

Pramuat font

Untuk memastikan Anda menghosting font secara lokal, Anda kemudian dapat memuat font Anda terlebih dahulu dengan plugin seperti:

• WP Roket
• Petunjuk Sumber Daya Pra* Pesta
• Permatters

Jika Anda tidak mampu menggunakan plugin ini, Anda dapat memuat font terlebih dahulu dengan mengedit file header.php Anda. Pastikan Anda menguji situs Anda secara menyeluruh setelah memuat font sebelumnya. Memuat terlalu banyak font dapat membahayakan situs web Anda. Jadi seperti halnya peluang backend utama, kami sarankan Anda membuat cadangan situs WordPress Anda sebelumnya.

Nonaktifkan pengoptimalan pengiriman CSS

Jika Anda menggunakan WP Rocket untuk mengoptimalkan pengiriman CSS atau memuat CSS secara asinkron dengan LiteSpeed ​​Cache, hal itu dapat menyebabkan kilatan konten tanpa gaya (FOUC). Jika Anda ingin meningkatkan skor CLS Anda, sebaiknya nonaktifkan opsi ini di masing-masing plugin.

Atau, Anda dapat mengatur apa yang dikenal sebagai CSS kritis mundur. Ini melibatkan pembuatan skrip cadangan kritis menggunakan alat seperti Generator CSS Jalur Kritis.

Menghapus skrip yang memblokir perenderan juga dapat menurunkan skor CLS Anda. Kami menyarankan Anda menguji CLS Anda dengan pengoptimalan pengiriman CSS yang diaktifkan terlebih dahulu, kemudian mengujinya saat Anda menonaktifkannya untuk membandingkan.

Nonaktifkan animasi

Jika Anda menggunakan animasi, sebaiknya nonaktifkan untuk versi seluler situs web Anda karena animasi dapat menghambat waktu pemuatan situs web Anda. Jika Anda bersikeras untuk memiliki animasi untuk situs web Anda, sebaiknya gunakan opsi transformasi dan terjemahan CSS.

Atau, Anda dapat menggunakan plugin Happy Addons Elementor. Ini memungkinkan Anda untuk menganimasikan elemen tanpa menyebabkan pergeseran tata letak.

Cara terbaik untuk menghilangkan sebagian besar pergeseran tata letak adalah dengan memodifikasi cara halaman web Anda dimuat. Pada gilirannya, Anda dapat meningkatkan kecepatan dan efisiensi situs WordPress Anda. Seperti biasa, ini tentang meningkatkan pengalaman pengguna. Semakin responsif situs web Anda, semakin besar kemungkinan pengguna mem-bookmark dan mengunjunginya kembali.