Baru-baru ini Google membagikan serangkaian rekomendasi terbaru untuk mengoptimalkan Core Web Vitals atau Data Web Inti. Hal ini bertujuan untuk memudahkan Anda dalam memutuskan apa yang perlu diprioritaskan ketika waktu sudah terbatas.
Google sendiri menganggap bahwa matrik dari Core Web Vitals sangat penting untuk memberikan pengalaman positif serta memberi peringkat situs website dalam hasil pencariannya. Lebih lengkapnya kami akan ulas dalam penjelasan di bawah ini!
Apa Itu Core Web Vitals?
Sebelum kita membahas tentang bagaimana tips mengoptimalkan data web inti, ketahui dulu apa sebetulnya Core Web Vitals. Ini merupakan serangkaian faktor utama yang ditetapkan Google untuk menilai user experience (pengalaman pengguna) sebuah website.
Core Web Vitals sendiri mewakili tiga elemen atau matrik yang bisa mempengaruhi cara pengguna berinteraksi dengan website. Sebut saja mengukur waktu pemuatan (loading), interaksi pengguna, serta stabilitas visual.
Seperti yang kami sebutkan sebelumnya, Google menganggap bahwa tiga matrik tersebut sangat penting untuk memberikan pengalaman positif dan menerapkannya untuk memberi peringkat situs website dalam hasil pencarian.
Dalam sebuah postingan blog, Google menyatakan bahwa tim Chrome sudah menghabiskan waktu satu tahun untuk mencoba mengidentifikasi saran paling penting yang bisa diberikannya terkait dengan Core Web Vitals.
Tips dan Saran Google Chrome Untuk Mengoptimalkan Core Web Vitals
Tim Chrome telah menyusun daftar rekomendasi yang realistis untuk sebagian besar pengembang, berlaku untuk sebagian besar website, serta memiliki dampak dunia nyata yang berarti.
Adapun beberapa tips dan saran dari tim Google Chrome ini diantaranya:
1. Mengoptimalkan LCP
LCP atau Largest Contentful Paint bisa mengukur waktu yang dibutuhkan agar konten utama halaman bisa dilihat oleh para penggunanya. Google menyatakan bahwa hanya sekitar setengah dari semua situs website yang memenuhi ambang batas LCP yang disarankan.
Hal itu merupakan rekomendasi teratas Google untuk meningkatkan LCP.
1.1. Pastikan Sumber Daya LCP Mudah Ditemukan pada Sumber HTML
Berdasarkan 2022 Web Almanac by HTTP Archive, sebanyak 72% halaman web seluler memiliki gambar sebagai konten utamanya. Untuk meningkatkan LCP ini, situs website harus memastikan gambar dimuat dengan cepat.
Tak ada yang tidak mungkin memenuhi ambang batas LCP Google jika halaman menunggu file CSS atau JavaScript diunduh sepenuhnya, diuraikan, dan diproses sebelum gambar bisa mulai dimuat.
Sebagai aturan umum, jika elemen LCP merupakan gambar, URL gambar pun harus selalu bisa ditemukan dari sumber HTML.
1.2. Pastikan Sumber Daya LCP Diprioritaskan
Selain memiliki sumber daya LCP dalam kode HTML, Google juga merekomendasikan untuk memprioritaskannya serta tidak menunda sumber daya lain yang kurang penting.
Walaupun Anda sudah menyertakan gambar LCP pada sumber HTML menggunakan tag <img> standar, jika terdapat beberapa tag <script> di bagian <head> halaman web Anda sebelum tag <img>, hal ini bisa menunda waktu pemuatan sumber daya gambar Anda.
Alangkah baiknya jika Anda menghindari tindakan apa pun yang bisa menurunkan prioritas gambar LCP. Seperti halnya menambahkan atribut loading=”lazy”.
Hati-hatilah ketika Anda menggunakan alat pengoptimalan gambar apapun yang secara otomatis bisa menerapkan loading yang lambat ke semua gambar.
1.3. Gunakan CDN untuk TTFB
Browser harus menerima byte pertama dari respon dokumen HTML awal sebelum memuat sumber daya tambahan apapun. Ukuran waktu ini disebut dengan TTFB atau Time to First Byte.
Semakin hal itu cepat terjadi, semakin cepat juga proses lainnya yang bisa dimulai. Untuk meminimalkan TTFB, Anda bisa menyajikan konten Anda dari lokasi yang dekat dengan pengguna serta gunakan caching untuk konten yang sering diminta.
Adapun cara terbaik untuk melakukan keduanya menurut Google adalah menggunakan Content Delivery Network (CDN).
2. Mengoptimalkan Cumulative Layout Shift (CLS)
CLS atau pergeseran tata letak kumulatif merupakan metrik yang digunakan untuk mengevaluasi seberapa stabil tata letak visual situs website. Menurut Google, sekitar 25% situs web tidak memenuhi standar yang direkomendasikan untuk matrik ini.
Itu juga merupakan rekomendasi teratas Google untuk meningkatkan CLS.
2.1. Pastikan Halaman Layak untuk Bfcache
Peramban menggunakan fitur yang disebut back/forward cache (bfcache) yang memungkinkan halaman dimuat secara yang memungkinkan halaman dimuat secara instan dari awal atau akhir riwayat peramban menggunakan snapshot memori.
Fitur tersebut bisa meningkatkan kinerja secara signifikan dengan menghilangkan pergeseran tata letak selama pemuatan halaman.
Google sendiri merekomendasikan untuk memeriksa apakah halaman Anda memenuhi syarat untuk bfcache menggunakan Chrome DevTools serta mencari tahu alasannya mengapa tidak bisa.
2.2. Hindari Transisi dan Animasi
Adapun penyebab umum dari pergeseran tata letak yakni animasi elemen di situs website. Sebut saja spanduk cookie atau spanduk pemberitahuan lainnya yang meluncur dari atas dan bawah.
Animasi tersebut bisa menyingkirkan konten lainnya yang berdampak pada CLS. Meskipun tidak, melakukan animasinya masih bisa berpengaruh pada CLS.
Perlu Anda ketahui, Google menyatakan bahwa halaman yang menganimasikan properti CSS apapun yang bisa memengaruhi tata letak yang 15% lebih kecil kemungkinannya untuk memiliki CLS yang “baik”.
Untuk mengurangi hal tersebut, sebaiknya hindari menganimasikan atau mentransisikan properti CSS apapun yang mengharuskan browser memperbarui tata letaknya, kecuali jika itu merupakan respon terhadap masukan pengguna. Seperti halnya ketukan atau penekanan tombol.
Menggunakan properti transformasi CSS direkomendasikan untuk transisi dan animasi jika itu memungkinkan.
3. Mengoptimalkan First Input Delay (FID)
First Input Delay sendiri merupakan matrik yang mengukur seberapa cepat sebuah situs web merespon interaksi users. Meskipun sebagian besar situs web berkinerja baik untuk area ini, Google meyakinkan masih ada ruang untuk melakukan perbaikan.
Matrik baru Google yakni Interaction to Next Paint (INP) berpotensi sebagai pengganti FID dan rekomendasi yang diberikan dibawah ini sangat relevan untuk INP dan FID.
3.1. Hindari dan Break Up Tugas Panjang
Ketika tugas memakan waktu lama lebih dari 50 milidetik, mereka akan memblokir utas utama dan bisa mempersulit browser untuk merespon input pengguna dengan cepat.
Jadi, untuk menghindari hal tersebut pisahkan tugas yang panjang menjadi tugas yang lebih kecil dengan memberi utas utama lebih banyak kesempatan untuk memproses pekerjaan kritis yang terlihat oleh pengguna.
3.2. Hindari JavaScript yang Tidak Perlu
Situs dengan JavaScript dalam jumlah besar bisa menyebabkan tugas bersaing untuk mendapatkan perhatian utas utama. Itu bisa berdampak negatif pada daya tanggap situs web.
Untuk mengidentifikasi serta menghapus kode yang tidak diperlukan dari sumber daya situs web, Anda bisa menggunakan alat cakupan di Chrome DevTools.
Dengan mengurangi ukuran sumber daya yang diperlukan selama proses loading, situs website akan menghabiskan lebih sedikit waktu untuk mengurai serta menyusun kode. Dengan begitu bisa menghasilkan pengalaman pengguna yang lebih mulus.
3.3. Hindari Update Rendering yang Besar
JavaScript bukan satu-satunya hal yang dapat memengaruhi daya tanggap situs web. Rendering bisa mengganggu kemampuan situs web untuk menanggapi input pengguna.
Mengoptimalkan pekerjaan rendering pun bisa cukup rumit dan bergantung pada tujuan tertentu. Akan tetapi, ada beberapa cara untuk memastikan pembaruan rendering bisa dikelola serta tidak berubah menjadi tugas yang panjang.
Google sendiri merekomendasikan beberapa hal dibawah ini:
- Pertahankan ukuran DOM Anda agar tetap kecil.
- Hindari menggunakan Request Animation Frame untuk melakukan pekerjaan non-visual apapun.
- Gunakan penahanan CSS.
Itulah penjelasan penting seputar Data Web Inti yang Google Chrome berikan. Dengan mengikuti beberapa rekomendasi dan tips tersebut Anda bisa memanfaatkan waktu dengan lebih baik hingga mendapatkan hasil yang maksimal dari situs website.
Sekali lagi, semoga informasi yang kami berikan kali ini menginspirasi dan bermanfaat untuk Anda. Selamat mencoba!
Sumber : searchenginejournal
