Pergeseran Tata Letak Kumulatif Dijelaskan: Cara Memperbaiki Skor Anda
Diterbitkan: 2023-01-05Berjuang dengan masalah Pergeseran Tata Letak Kumulatif di situs web Anda? Atau tidak yakin apa arti Pergeseran Tata Letak Kumulatif?
Pergeseran Tata Letak Kumulatif, atau singkatnya CLS, adalah metrik yang merupakan bagian dari inisiatif Data Web Inti Google.
Singkatnya, ini mengukur berapa banyak konten laman web yang bergeser “secara tak terduga”. Skor CLS yang tinggi dapat menunjukkan pengalaman pengguna yang buruk dan juga dapat menghambat SEO situs Anda.
Dalam posting ini, Anda akan mempelajari semua yang perlu Anda ketahui tentang Pergeseran Tata Letak Kumulatif dan bagaimana pengaruhnya terhadap situs WordPress (dan web pada umumnya).
Apa itu Pergeseran Tata Letak Kumulatif (CLS)? Menjelaskan Pengertian Pergeseran Tata Letak Kumulatif
Pergeseran Tata Letak Kumulatif adalah ukuran seberapa banyak laman di situs Anda berpindah secara tidak terduga selama kunjungan pengguna, sebagaimana diukur oleh API Ketidakstabilan Tata Letak, API pengujian kinerja standar.
Pergeseran Tata Letak Kumulatif (CLS) adalah salah satu dari tiga metrik dalam inisiatif Data Web Inti Google, bersama dengan Cat Konten Terbesar (LCP) dan Penundaan Input Pertama (FID).
Untuk memahami arti Pergeseran Tata Letak Kumulatif, penting untuk membahas pergeseran tata letak secara umum.
Pergeseran tata letak terjadi saat konten di situs Anda “bergerak” atau “bergeser” secara tidak terduga.
Atau, dalam istilah teknis, saat elemen apa pun yang terlihat di area pandang mengubah posisi awalnya di antara dua bingkai.
Salah satu contoh umumnya adalah Anda sedang membaca blok teks…tetapi kemudian iklan yang terlambat dimuat tiba-tiba muncul dan mendorong konten teks ke bawah halaman.
Berikut contoh gambar lain dari Google yang menampilkan kejadian ini:
Anda hampir pasti mengalami perubahan tata letak saat menjelajahi web, bahkan jika Anda tidak mengetahuinya dengan nama itu.
Satu kunjungan dapat memiliki beberapa peristiwa pergeseran tata letak yang terpisah. Dengan demikian, metrik Pergeseran Tata Letak Kumulatif bertujuan untuk menangkap keseluruhan gambar dengan mengukur jumlah total pergeseran tata letak yang tidak diharapkan pada suatu halaman*.
*Ukuran pastinya sedikit lebih teknis setelah beberapa perubahan oleh Google, tapi itu masih ide dasarnya. Jika Anda tertarik dengan detail seluk beluknya, Anda dapat membacanya di sini .
Mengapa Pergeseran Tata Letak Kumulatif Buruk?
Alasan utama Pergeseran Tata Letak Kumulatif buruk adalah karena hal itu menciptakan pengalaman pengguna yang buruk di situs Anda.
Paling-paling, itu agak mengganggu pengunjung Anda. Paling buruk, hal itu dapat menyebabkan pengunjung melakukan tindakan yang tidak ingin mereka lakukan.
Misalnya, bayangkan jika pengguna ingin mengklik "Batal" tetapi secara tidak sengaja mengklik "Konfirmasi" karena pergeseran tata letak memindahkan posisi tombol ke kanan saat orang tersebut mengklik.
Selain memengaruhi pengalaman pengunjung manusia Anda, memiliki skor Pergeseran Tata Letak Kumulatif yang buruk juga dapat menjadi hambatan pada peringkat mesin telusur situs Anda.
Sejak pembaruan Pengalaman Halaman Google (yang selesai diluncurkan pada Agustus 2021), Google menggunakan Data Web Inti sebagai salah satu faktor peringkat SEO-nya. Karena Pergeseran Tata Letak Kumulatif adalah bagian dari Data Web Inti, artinya perubahan tersebut dapat memengaruhi performa penelusuran situs Anda.
Pada dasarnya, memperbaiki masalah Pergeseran Tata Letak Kumulatif di situs Anda akan membantu menjadikannya lebih baik bagi pengunjung manusia dan mesin telusur.
Jadi – apa yang menyebabkan Pergeseran Tata Letak Kumulatif? Mari kita bahas selanjutnya…
Apa Penyebab Pergeseran Tata Letak Kumulatif?
Berikut ini ikhtisar singkat tentang penyebab paling umum dari pergeseran tata letak:
- Tidak mengatur dimensi untuk gambar, iframe, video, atau penyematan lainnya.
- Masalah dengan pemuatan font kustom, yang dapat menyebabkan teks menjadi tidak terlihat atau mengubah ukuran saat font kustom dimuat.
- Menayangkan iklan responsif (mis., AdSense) dengan ukuran berbeda (dan tidak menyediakan ruang untuk iklan tersebut).
- Menginjeksi konten secara dinamis dengan plugin (pemberitahuan persetujuan cookie, formulir pembuatan prospek, dll.).
- Menggunakan animasi tanpa properti CSS Transform.
Kami akan membahas masalah ini secara lebih mendalam nanti di pos ini saat kami menunjukkan kepada Anda cara memperbaiki setiap masalah umum.
Cara Mengukur Pergeseran Tata Letak Kumulatif: Alat Pengujian Terbaik
Ada sejumlah alat yang dapat Anda gunakan untuk menguji skor Pergeseran Tata Letak Kumulatif situs Anda.
Pergeseran Tata Letak Kumulatif adalah bagian dari audit Lighthouse, jadi alat uji kecepatan apa pun yang menggunakan Lighthouse sebagai bagian dari auditnya akan menyertakan data CLS – ini termasuk Wawasan PageSpeed, GTmetrix, Alat Pengembang Chrome, dan banyak alat pengujian populer lainnya.
Berikut adalah beberapa alat pengujian Pergeseran Tata Letak Kumulatif teratas yang menonjol karena kegunaannya…
Wawasan PageSpeed
Wawasan PageSpeed adalah salah satu alat yang paling berguna untuk menilai status perubahan tata letak situs Anda karena alat ini memberi Anda dua sumber data:
- Data lapangan – data pengguna nyata dari laporan UX Chrome (dengan asumsi situs Anda memiliki lalu lintas yang cukup untuk disertakan dalam laporan). Ini memungkinkan Anda melihat data Pergeseran Tata Letak Kumulatif sebenarnya untuk pengunjung manusia Anda yang sebenarnya. Ini juga merupakan data yang digunakan Google sebagai sinyal peringkat.
- Data lab – simulasi data pengujian yang dikumpulkan oleh Lighthouse (yang digunakan PageSpeed Insights untuk membuat laporan analisis kinerjanya).
Anda juga dapat melihat data untuk desktop dan seluler dengan beralih di antara tab.
Catatan – data lab hanya dapat mengukur pergeseran tata letak yang terjadi selama pemuatan halaman, sehingga hasil pengguna Anda yang sebenarnya mungkin sedikit lebih tinggi jika Anda memiliki pergeseran tata letak yang terjadi setelah pemuatan halaman.
Alat Pengembang Chrome
Alat Pengembang Chrome menawarkan beberapa sumber daya berguna untuk mengukur CLS dan men-debug setiap perubahan tata letak yang terjadi di situs Anda.
Pertama, Anda dapat menjalankan audit Lighthouse untuk melihat skor CLS situs Anda. Begini caranya:
- Buka Alat Pengembang Chrome.
- Buka tab Mercusuar .
- Konfigurasikan pengujian Anda.
- Klik tombol Analisis pemuatan halaman untuk menjalankan pengujian.
Setelah menunggu sebentar, Anda akan melihat antarmuka audit Lighthouse biasa (yang sangat mirip dengan Wawasan PageSpeed).
Namun, Alat Pengembang Chrome juga memungkinkan Anda menggali lebih dalam tentang CLS dengan analisis Rendering -nya. Ini akan memungkinkan Anda menyorot masing-masing wilayah pergeseran tata letak di situs Anda, yang membantu Anda men-debugnya.
Begini caranya:
- Klik ikon "tiga titik" di pojok kanan atas antarmuka Alat Pengembang Chrome.
- Pilih More Tools → Rendering , yang akan membuka antarmuka baru di bagian bawah.
- Centang kotak untuk Layout Shift Regions .
Sekarang, muat ulang halaman yang ingin Anda uji dan Chrome akan menyorot area mana pun dengan pergeseran tata letak menggunakan kotak biru. Sorotan ini akan muncul di halaman aktual saat konten dimuat dan menghilang setelah pergeseran selesai.
Jika sorotan terjadi terlalu cepat untuk Anda ikuti, Anda dapat memperlambat situs Anda dan melihatnya memuat bingkai demi bingkai menggunakan tab Performa .
Google Search Console
Meskipun Google Search Console tidak mengizinkan Anda menjalankan pengujian lab untuk menentukan Pergeseran Tata Letak Kumulatif, Google Search Console memberi Anda cara mudah untuk melihat masalah dengan Pergeseran Tata Letak Kumulatif di situs Anda, sebagaimana diukur dengan laporan Chrome UX.
Keuntungan menggunakan Google Search Console dibandingkan alat lain adalah memungkinkan Anda melihat masalah dengan cepat di seluruh situs Anda daripada menguji halaman demi halaman.
Berikut cara melihat potensi masalah di situs Anda:
- Buka Google Search Console. Jika Anda belum memverifikasi situs Anda, Anda dapat mengikuti panduan kami tentang cara memverifikasi Google Search Console.
- Buka laporan Data Web Inti di bagian Pengalaman .
- Klik Buka Laporan di samping Seluler atau Desktop , bergantung pada apa yang ingin Anda analisis.
Jika berlaku, Google akan menyorot URL dengan skor Pergeseran Tata Letak Kumulatif yang bermasalah.
Catatan – Anda hanya akan melihat data di sini jika situs Anda memiliki lalu lintas bulanan yang cukup untuk disertakan dalam laporan Chrome UX.
Pembuat GIF Pergeseran Tata Letak
Seperti namanya, Pembuat GIF Pergeseran Tata Letak menghasilkan GIF dari pergeseran tata letak di situs Anda sehingga Anda dapat melihat dengan tepat konten apa yang menyebabkan masalah. Ini juga akan memberi Anda skor Anda, meskipun itu bukan fokus utama alat ini.
Yang Anda lakukan hanyalah menambahkan URL yang ingin Anda uji dan memilih antara seluler atau desktop. Kemudian, itu akan menghasilkan GIF situs Anda dengan sorotan hijau yang menunjukkan elemen persis yang sedang bergeser.
Dengan melihat elemen mana yang bergeser dan berkontribusi pada skor Pergeseran Tata Letak Kumulatif, Anda dapat mengetahui dengan tepat ke mana harus fokus untuk meningkatkan skor situs Anda.
Apa itu Skor Tata Letak Kumulatif yang Baik?
Menurut inisiatif Data Web Inti Google, skor Pergeseran Tata Letak Kumulatif yang baik adalah 0,1 atau kurang .
Jika skor Pergeseran Tata Letak Kumulatif Anda antara 0,1 dan 0,25, Google mendefinisikannya sebagai "Perlu Peningkatan".
Dan jika skor Pergeseran Tata Letak Kumulatif Anda di atas 0,25, Google mendefinisikannya sebagai “Buruk”.
Berikut adalah grafik dari situs web Data Web Inti Google yang menampilkan skor ini secara visual:
Cara Memperbaiki Pergeseran Tata Letak Kumulatif di WordPress (atau Platform Lain)
Sekarang setelah Anda memahami apa yang terjadi dengan Pergeseran Tata Letak Kumulatif, saatnya beralih ke beberapa tip yang dapat ditindaklanjuti tentang cara memperbaiki Pergeseran Tata Letak Kumulatif di WordPress.
Meskipun tips ini berasal dari sudut pandang WordPress, semuanya bersifat universal, dan Anda dapat menerapkannya ke alat pembuat situs web lainnya.
Selalu Tentukan Dimensi untuk Gambar
Salah satu penyebab paling umum dari pergeseran tata letak adalah pemuatan gambar yang terlambat memindahkan konten, terutama jika Anda menggunakan taktik seperti pemuatan lambat.
Untuk menghindarinya, Anda dapat menentukan dimensi gambar dalam kode saat menyematkannya. Dengan begitu, browser pengunjung akan mencadangkan ruang itu meskipun gambar belum dimuat, yang berarti gambar tidak perlu memindahkan konten.
Jika Anda menyematkan gambar melalui editor WordPress (baik editor blok Gutenberg atau editor TinyMCE klasik), tidak perlu menentukan dimensi gambar secara manual karena WordPress akan melakukannya untuk Anda secara otomatis.
Hal yang sama berlaku untuk plugin pembuat halaman populer seperti Elementor, Divi, Beaver Builder, dan sebagainya.
Ingin tahu bagaimana kami meningkatkan lalu lintas kami lebih dari 1000%?
Bergabunglah dengan 20.000+ orang lainnya yang mendapatkan buletin mingguan kami dengan tips WordPress orang dalam!
Namun, masalah dapat muncul jika Anda menyematkan gambar secara manual menggunakan kode Anda sendiri, yang mungkin terjadi jika Anda menambahkan konten ke plugin, mengedit file template tema anak, dan seterusnya.
Kode HTML untuk penyematan gambar dasar terlihat seperti ini:
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Untuk menentukan dimensinya, Anda dapat menambahkan parameter tinggi dan lebar . Berikut adalah contoh tampilannya untuk gambar 600x300px:
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >
Banyak plugin kinerja WordPress juga menyertakan fitur untuk mengotomatisasi ini, seperti fitur Add Missing Image Dimensions di WP Rocket atau Perfmatters.
Selalu Tentukan Dimensi untuk Video, iframe, dan Sematan Lainnya
Sama seperti gambar, Anda juga ingin menentukan dimensi setiap kali Anda menambahkan video, iframe, atau penyematan lainnya.
Sebagian besar alat sematan situs web akan secara otomatis menentukan dimensi untuk sematan.
Misalnya, jika Anda melihat kode sematan YouTube, Anda akan melihat bahwa kode tersebut menyertakan dimensi:
Hal yang sama berlaku untuk banyak layanan lainnya.
Namun, jika kode sematan Anda tidak menentukan tinggi dan lebar, Anda dapat menambahkan dimensi ini secara manual ke kode sematan.
Perbaiki dan Optimalkan Pemuatan Font
Masalah dengan pemuatan dan pengoptimalan font dapat menjadi sumber umum lain dari pergeseran tata letak melalui dua potensi masalah:
- Flash teks tak terlihat (FOIT) – halaman awalnya dimuat tanpa ada konten teks yang muncul sama sekali. Setelah font khusus dimuat, teks tiba-tiba muncul (yang dapat menyebabkan konten yang ada bergeser).
- Flash teks tanpa gaya (FOUT) – konten teks dimuat menggunakan font sistem (tanpa gaya). Setelah font kustom dimuat, teks berubah menjadi font kustom tersebut, yang dapat menyebabkan konten bergeser karena ukuran dan spasi teks mungkin berbeda.
Untuk menghindari masalah ini, Anda perlu mengoptimalkan cara memuat font di situs Anda (yang juga dapat memberikan beberapa manfaat bagi kinerja situs Anda).
Host Font Secara Lokal dan Preload Font
Dengan menghosting font secara lokal dan menggunakan pramuat, Anda memberi tahu browser pengunjung untuk memberikan prioritas lebih tinggi pada pemuatan file font kustom.
Dengan memuat file font sebelum sumber daya lainnya, Anda dapat memastikan bahwa file font sudah dimuat saat browser mulai merender konten Anda, yang dapat mencegah masalah dengan FOUT dan FOIT.
Untuk mempelajari cara menghosting font secara lokal di WordPress, Anda dapat membaca panduan lengkap kami untuk menghosting font secara lokal di WordPress.
Dari sana, Anda dapat mengatur pramuat font secara manual atau menggunakan plugin. Sebagian besar plugin kinerja menyertakan opsi untuk memuat font sebelumnya, termasuk WP Rocket, Perfmatters, Autoptimize, dan lainnya.
Jika Anda menggunakan Google Fonts, Anda juga dapat menggunakan plugin OMGF gratis untuk menghosting font secara lokal dan memuatnya terlebih dahulu.
Anda juga dapat memuat font secara manual dengan menambahkan kode ke bagian <head> situs Anda.
Berikut adalah contoh kodenya – pastikan untuk menggantinya dengan nama/lokasi sebenarnya dari file font yang ingin Anda muat sebelumnya:
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Anda dapat menambahkannya langsung menggunakan tema anak WordPress atau menyuntikkannya dengan kait wp_head dan plugin seperti Cuplikan Kode.
Atur Font-Display ke Optional atau Swap
Properti CSS Font-Display memungkinkan Anda mengontrol perilaku rendering font di situs Anda dan menghindari FOIT.
Pada dasarnya, ini memungkinkan Anda menggunakan font fallback dalam situasi di mana font khusus Anda belum dimuat.
Ada dua opsi utama yang dapat Anda gunakan untuk mengatasi CLS:
- Tukar – menggunakan font fallback saat font kustom dimuat dan kemudian mengubahnya ke font kustom Anda setelah font dimuat.
- Opsional – memungkinkan browser menentukan apakah akan menggunakan font khusus atau tidak berdasarkan kecepatan koneksi pengunjung.
Dengan Swap , browser akan selalu berubah ke font khusus setelah dimuat.
Sementara Swap sepenuhnya menyelesaikan FOIT, itu dapat menyebabkan FOUT. Untuk meminimalkan ini, Anda harus memastikan bahwa font fallback menggunakan spasi yang sama dengan font kustom (setidaknya sebanyak mungkin). Dengan begitu, meskipun gaya font berubah, tidak akan menyebabkan pergeseran tata letak karena spasinya akan sama.
Dengan Optional , browser akan memuat font kustom 100 md. Namun, jika font ubahsuaian tidak tersedia saat itu, browser hanya akan tetap menggunakan font cadangan dan tidak pernah mengubahnya ke font ubahsuaian untuk tampilan halaman tersebut ( ini akan menggunakan font ubahsuaian untuk tampilan halaman berikutnya, karena kemungkinan besar font tersebut file telah diunduh dan di-cache saat itu ).
Meskipun Optional dapat mengatasi FOIT dan FOUT, sisi negatifnya adalah pengunjung mungkin terjebak dengan font fallback untuk tampilan halaman pertama mereka.
Jika Anda merasa nyaman bekerja dengan CSS, Anda dapat mengedit properti Font-Display secara manual di stylesheet tema anak Anda.
Jika Anda merasa tidak nyaman melakukannya, Anda juga dapat menemukan beberapa plugin yang akan membantu:
- Tukar Tampilan Font Google – dengan mudah mengaktifkan Font-Display Swap untuk Google Fonts.
- Pembersihan Aset – mendukung Google Fonts secara gratis dan font lokal khusus dengan versi Pro.
- Perfmatters – menawarkan fitur untuk Google Fonts.
Jika Anda menggunakan Elementor, Elementor juga menyertakan opsi bawaan untuk melakukan ini. Buka Elementor → Pengaturan → Lanjutan . Anda kemudian dapat menyetel drop-down Google Fonts Load sama dengan Swap atau Opsional sesuai dengan preferensi Anda:
Terlalu Kompleks? Pertimbangkan Stack Font Sistem!
Jika semua pembicaraan tentang preloading dan Font-Display ini agak membingungkan, salah satu perbaikan yang mudah adalah dengan hanya menggunakan tumpukan font sistem daripada tumpukan font kustom.
Meskipun ini membatasi opsi desain Anda, ini akan sepenuhnya menyelesaikan masalah font Pergeseran Tata Letak Kumulatif, FOIT, dan FOUT. Plus, itu juga akan membantu situs Anda memuat lebih cepat.
Jika Anda tertarik dengan ini, lihat panduan Brian untuk menggunakan kumpulan font sistem di WordPress.
Cadangan Ruang untuk Iklan (jika Menggunakan Iklan Bergambar)
Jika Anda menggunakan iklan bergambar, Anda harus menyediakan ruang untuk iklan tersebut di kode situs Anda. Ini mengikuti ide yang sama seperti memesan ruang untuk gambar, video, dan penyematan.
Namun, iklan bergambar layak mendapat perhatian khusus karena sangat umum memiliki iklan bergambar yang terlambat dimuat jika Anda menggunakan jenis teknologi penawaran apa pun. Ini karena teknologi penawaran membutuhkan waktu untuk bekerja dan mencari tahu iklan mana yang akan ditampilkan.
Ini juga bisa menjadi masalah dengan iklan otomatis AdSense jika Anda memiliki slot iklan dinamis, karena selain masalah penawaran, AdSense juga akan memuat iklan dengan ukuran berbeda (sehingga Anda mungkin tidak mengetahui ukuran iklan sebelumnya).
Jika Anda menggunakan salah satu jaringan iklan bergambar populer seperti Mediavine atau AdThrive, mereka seharusnya sudah menawarkan alat untuk membantu Anda menghindari perubahan tata letak pada iklan Anda. Misalnya, jika Anda membuka area Pengaturan Iklan Mediavine, Anda dapat mengaktifkan sakelar untuk Mengoptimalkan Iklan untuk CLS :
Untuk mengoptimalkan AdSense untuk Pergeseran Tata Letak Kumulatif, ini sedikit lebih rumit.
Salah satu perbaikan umum adalah menambahkan elemen pembungkus <div> di sekitar setiap unit iklan yang menentukan tinggi minimum menggunakan properti CSS min-height . Anda juga dapat menggunakan kueri media untuk mengubah tinggi minimum berdasarkan perangkat pengguna.
Google merekomendasikan pengaturan min-height sama dengan ukuran iklan sebesar mungkin. Meskipun hal ini dapat mengakibatkan ruang terbuang percuma jika iklan yang lebih kecil ditayangkan, ini adalah opsi terbaik untuk menghilangkan kemungkinan terjadinya perubahan tata letak.
Saat menyiapkan elemen pembungkus ini, pastikan untuk menggunakan ID CSS, bukan kelas, karena AdSense sering menghapus kelas CSS dari objek induk.
Berikut tampilan CSS-nya:
Lalu seperti inilah tampilan sematan AdSense:
Di bagian depan, Anda sekarang akan melihat bahwa situs Anda menyediakan ruang untuk iklan tersebut, meskipun kosong:
Jadilah Cerdas Saat Memasukkan Konten Secara Dinamis Dengan Plugin
Banyak situs WordPress akan secara dinamis menyuntikkan konten untuk fungsi seperti pemberitahuan persetujuan cookie, konten terkait, formulir keikutsertaan email, dan sebagainya.
Meskipun ini baik untuk dilakukan, Anda harus berhati-hati untuk menghindari melakukannya dengan cara yang menyebabkan pergeseran tata letak.
Praktik terbaik desain web yang baik di sini adalah jangan pernah menyuntikkan konten di atas konten yang ada kecuali jika pengguna secara khusus melakukan interaksi (misalnya mengklik tombol).
Misalnya, jika Anda menambahkan pemberitahuan izin cookie, Anda tidak ingin memasukkannya ke bagian atas halaman karena hal itu akan menyebabkan konten terdorong ke bawah ( kecuali jika Anda telah menyediakan ruang untuk spanduk persetujuan cookie ) .
Sebagai gantinya, Anda harus menampilkan pemberitahuan di bagian bawah halaman, yang akan menghindari penurunan konten yang terlihat.
Untuk melihat apakah konten dinamis yang menyebabkan masalah, Anda dapat menggunakan alat visualisasi dari atas (misalnya Layout Shift GIF Generator).
Jika Anda melihat bahwa konten dari plugin tertentu memicu perubahan tata letak, Anda dapat mempertimbangkan untuk menyesuaikan pengaturan plugin tersebut atau beralih ke plugin lain.
Misalnya, beberapa plugin izin cookie lebih baik daripada yang lain dalam hal perubahan tata letak, jadi ada baiknya bereksperimen dengan berbagai plugin jika Anda mengalami masalah.
Jika Anda ingin menggali lebih dalam perilaku plugin, Anda dapat menggunakan alat pemantauan kinerja aplikasi. Jika Anda menghosting dengan Kinsta, alat APM Kinsta tersedia gratis di dasbor MyKinsta Anda, atau Anda dapat menemukan alat APM lainnya.
Untuk membantu Anda menguji plugin, Anda juga dapat menggunakan situs pementasan Kinsta atau alat pengembangan lokal DevKinsta.
Gunakan Properti Transformasi CSS untuk Animasi Kapanpun Memungkinkan
Jika Anda menggunakan animasi di situs Anda, ini bisa menjadi penyebab umum lainnya untuk pergeseran tata letak.
Untuk menghindari masalah dengan animasi yang menyebabkan pergeseran tata letak, Anda harus menggunakan fungsi Transformasi CSS untuk animasi daripada taktik lainnya:
- Daripada menggunakan properti tinggi dan lebar , gunakan transform: scale()
- Jika Anda ingin memindahkan elemen, gunakan transform: translate() alih-alih top , bottom , right , atau left
Ini lebih merupakan tip teknis, jadi sepertinya Anda tidak perlu melakukan ini kecuali Anda menambahkan CSS Anda sendiri. Untuk mempelajari lebih lanjut, Anda dapat membaca halaman Google tentang CLS dan animasi/transisi.
Ringkasan
Jika situs web Anda memiliki skor Pergeseran Tata Letak Kumulatif yang tinggi, penting untuk memperbaikinya untuk menciptakan pengalaman yang lebih baik bagi pengunjung manusia dan untuk memaksimalkan kinerja situs Anda dalam hasil penelusuran Google.
Dua dari masalah yang paling umum adalah hilangnya dimensi untuk gambar/sematan dan masalah pemuatan font. Jika Anda memperbaikinya, Anda akan mendapatkan skor yang jauh lebih baik.
Situs lain mungkin perlu melangkah lebih jauh dan mempelajari pemuatan iklan, konten dinamis, dan animasi. Jika Anda kesulitan menerapkan jenis pengoptimalan ini sendiri, Anda dapat mempertimbangkan untuk bekerja dengan agensi atau pekerja lepas WordPress.
Untuk mempelajari selengkapnya tentang Data Web Inti secara umum, Anda dapat membaca panduan lengkap Kinsta untuk Data Web Inti.
Dan jika Anda menginginkan host WordPress yang dapat membantu Anda membuat situs berperforma tinggi yang bekerja dengan baik di Core Web Vitals, pertimbangkan untuk menggunakan hosting WordPress terkelola Kinsta – kami akan memigrasikan situs WordPress Anda secara gratis!