Mengoptimalkan Data Web Inti , Google membagikan rekomendasi Data Web Inti baru yang realistis untuk sebagian besar developer dan berlaku untuk sebagian besar situs.
- Data Web Inti adalah tiga metrik yang mengukur waktu pemuatan, interaktivitas, dan stabilitas visual.
- Tim Chrome Google menghabiskan waktu satu tahun untuk memikirkan saran paling penting yang dapat diberikan terkait Data Web Inti.
- Ini adalah rekomendasi yang harus Anda prioritaskan ketika waktu terbatas.
Google membagikan serangkaian rekomendasi terbaru untuk mengoptimalkan Core Web Vitals guna membantu Anda memutuskan apa yang harus diprioritaskan saat waktu terbatas.
Mengoptimalkan Data Web Inti
Data Web Inti adalah tiga metrik yang mengukur waktu pemuatan, interaktivitas, dan stabilitas visual.
Google menganggap metrik ini penting untuk memberikan pengalaman positif dan menggunakannya untuk memberi peringkat situs web dalam hasil pencariannya.
Selama bertahun-tahun, Google telah memberikan banyak saran untuk meningkatkan skor Data Web Inti.
Meskipun setiap rekomendasi Google layak untuk diterapkan, perusahaan menyadari bahwa tidak realistis mengharapkan siapa pun melakukan semuanya.
Jika Anda tidak memiliki banyak pengalaman dalam mengoptimalkan kinerja situs web, mungkin sulit untuk mengetahui apa yang akan memberikan dampak paling signifikan.
Anda mungkin tidak tahu harus mulai dari mana dengan waktu yang terbatas untuk mendedikasikan peningkatan Data Web Inti. Di situlah daftar rekomendasi Google yang direvisi masuk.
Dalam posting blog, Google mengatakan tim Chrome menghabiskan satu tahun untuk mencoba mengidentifikasi saran paling penting yang dapat diberikannya terkait Core Web Vitals.
Tim menyusun daftar rekomendasi yang realistis untuk sebagian besar pengembang, berlaku untuk sebagian besar situs web, dan memiliki dampak dunia nyata yang berarti.
Inilah yang disarankan oleh tim Google Chrome.
Mengoptimalkan (LCP)
Metrik Largest Contentful Paint (LCP) mengukur waktu yang diperlukan agar konten utama halaman dapat dilihat oleh pengguna.
Google menyatakan bahwa hanya sekitar setengah dari semua situs web yang memenuhi ambang batas LCP yang disarankan.
Ini adalah rekomendasi teratas Google untuk meningkatkan LCP.
Pastikan Sumber Daya LCP Mudah Ditemukan Di Sumber HTML
Menurut 2022 Web Almanac by HTTP Archive, 72% halaman web seluler memiliki gambar sebagai konten utamanya. Untuk meningkatkan LCP, situs web harus memastikan gambar dimuat dengan cepat.
Mungkin tidak mungkin memenuhi ambang batas LCP Google jika laman menunggu file CSS atau JavaScript diunduh sepenuhnya, diuraikan, dan diproses sebelum gambar dapat mulai dimuat.
Sebagai aturan umum, jika elemen LCP adalah gambar, URL gambar harus selalu dapat ditemukan dari sumber HTML.
Pastikan Sumber Daya LCP Diprioritaskan
Selain memiliki sumber daya LCP dalam kode HTML, Google merekomendasikan untuk memprioritaskannya dan tidak menunda sumber daya lain yang kurang penting.
Meskipun Anda telah menyertakan gambar LCP di sumber HTML menggunakan tag <img> standar, jika ada beberapa tag <script> di bagian <head> halaman web Anda sebelum tag <img>, ini dapat menunda waktu pemuatan sumber daya gambar Anda.
Akan lebih baik jika Anda juga menghindari tindakan apa pun yang dapat menurunkan prioritas gambar LCP, seperti menambahkan atribut loading=”lazy”.
Berhati-hatilah saat menggunakan alat pengoptimalan gambar apa pun yang secara otomatis menerapkan pemuatan lambat ke semua gambar.
Gunakan Jaringan Pengiriman Konten (CDN) Untuk Mengurangi Waktu Untuk Gigitan Pertama (TTFB)
Browser harus menerima byte pertama dari respons dokumen HTML awal sebelum memuat sumber daya tambahan apa pun.
Ukuran waktu ini disebut Time to First Byte (TTFB), dan semakin cepat ini terjadi, semakin cepat proses lain dapat dimulai.
Untuk meminimalkan TTFB, sajikan konten Anda dari lokasi yang dekat dengan pengguna Anda dan gunakan caching untuk konten yang sering diminta.
Cara terbaik untuk melakukan keduanya, kata Google, adalah dengan menggunakan jaringan pengiriman konten (CDN).
Mengoptimalkan Pergeseran Tata Letak Kumulatif (CLS)
Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang digunakan untuk mengevaluasi seberapa stabil tata letak visual situs web. Menurut Google, sekitar 25% situs web tidak memenuhi standar yang direkomendasikan untuk metrik ini.
Ini adalah rekomendasi teratas Google untuk meningkatkan CLS.
Tetapkan Ukuran Eksplisit Untuk Konten Pada Halaman
Pergeseran tata letak dapat terjadi ketika konten di situs web berubah posisi setelah selesai dimuat. Penting untuk memesan ruang terlebih dahulu sebanyak mungkin untuk mencegah hal ini terjadi.
Salah satu penyebab umum pergeseran tata letak adalah gambar yang tidak berukuran, yang dapat diatasi dengan menyetel atribut lebar dan tinggi secara eksplisit atau properti CSS yang setara.
Gambar bukan satu-satunya faktor yang dapat menyebabkan perubahan tata letak pada laman web. Konten lain, seperti iklan pihak ketiga atau video tersemat yang dimuat belakangan dapat berkontribusi pada CLS.
Salah satu cara untuk mengatasi masalah ini adalah dengan menggunakan properti rasio aspek di CSS. Properti ini relatif baru dan memungkinkan developer menyetel rasio aspek untuk gambar dan elemen non-gambar.
Memberikan informasi ini memungkinkan browser untuk secara otomatis menghitung tinggi yang sesuai ketika lebar didasarkan pada ukuran layar, mirip dengan gambar dengan dimensi yang ditentukan.
Pastikan Halaman Layak Untuk Bfcache
Peramban menggunakan fitur yang disebut back/forward cache, atau singkatnya bfcache, yang memungkinkan halaman dimuat secara instan dari awal atau akhir riwayat peramban menggunakan snapshot memori.
Fitur ini dapat meningkatkan kinerja secara signifikan dengan menghilangkan pergeseran tata letak selama pemuatan halaman.
Google merekomendasikan untuk memeriksa apakah halaman Anda memenuhi syarat untuk bfcache menggunakan Chrome DevTools dan mencari tahu alasan mengapa tidak.
Hindari Animasi/Transisi
Penyebab umum pergeseran tata letak adalah animasi elemen di situs web, seperti spanduk cookie atau spanduk pemberitahuan lainnya, yang meluncur dari atas atau bawah.
Animasi ini dapat menyingkirkan konten lain, yang berdampak pada CLS. Meskipun tidak, menganimasikannya masih dapat memengaruhi CLS.
Google mengatakan halaman yang menganimasikan properti CSS apa pun yang dapat memengaruhi tata letak 15% lebih kecil kemungkinannya untuk memiliki CLS yang “baik”.
Untuk mengurangi hal ini, sebaiknya hindari menganimasikan atau mentransisikan properti CSS apa pun yang mengharuskan browser untuk memperbarui tata letaknya kecuali jika itu adalah respons terhadap masukan pengguna, seperti ketukan atau penekanan tombol.
Menggunakan properti transformasi CSS direkomendasikan untuk transisi dan animasi jika memungkinkan.
Mengoptimalkan Penundaan Input Pertama (FID)
First Input Delay (FID) adalah metrik yang mengukur seberapa cepat situs web merespons interaksi pengguna.
Meskipun sebagian besar situs web berkinerja baik di area ini, Google yakin masih ada ruang untuk perbaikan.
Metrik baru Google, Interaction to Next Paint (INP), berpotensi sebagai pengganti FID, dan rekomendasi yang diberikan di bawah ini relevan untuk FID dan INP.
baca juga
Hindari Atau Long Task
Tugas adalah pekerjaan terpisah apa pun yang dilakukan browser, termasuk rendering , tata letak, penguraian, dan kompilasi serta eksekusi skrip.
Saat tugas memakan waktu lama, lebih dari 50 milidetik, mereka memblokir utas utama dan mempersulit browser untuk merespons input pengguna dengan cepat.
Untuk menghindari hal ini, sebaiknya pisahkan tugas yang panjang menjadi tugas yang lebih kecil dengan memberi utas utama lebih banyak kesempatan untuk memproses pekerjaan kritis yang terlihat oleh pengguna.
Hal ini dapat dicapai dengan sering mengalah pada thread utama sehingga rendering pembaruan dan interaksi pengguna lainnya dapat terjadi lebih cepat.
Hindari JavaScript yang Tidak Perlu
Situs web dengan JavaScript dalam jumlah besar dapat menyebabkan tugas bersaing untuk mendapatkan perhatian utas utama, yang dapat berdampak negatif pada daya tanggap situs web.
Untuk mengidentifikasi dan menghapus kode yang tidak diperlukan dari sumber daya situs web, Anda dapat menggunakan alat cakupan di Chrome DevTools.
Dengan mengurangi ukuran sumber daya yang diperlukan selama proses pemuatan, situs web akan menghabiskan lebih sedikit waktu untuk mengurai dan menyusun kode, sehingga menghasilkan pengalaman pengguna yang lebih mulus.
Hindari Pembaruan Rendering Besar
JavaScript bukan satu-satunya hal yang dapat memengaruhi daya tanggap situs web. Rendering bisa mahal dan mengganggu kemampuan situs web untuk menanggapi input pengguna.
Mengoptimalkan pekerjaan rendering bisa rumit dan bergantung pada tujuan tertentu. Namun, ada beberapa cara untuk memastikan pembaruan rendering dapat dikelola dan tidak berubah menjadi tugas yang panjang.
Google merekomendasikan hal berikut:
- Hindari menggunakan requestAnimationFrame() untuk melakukan pekerjaan non-visual apa pun.
- Pertahankan ukuran DOM Anda tetap kecil.
- Gunakan penahanan CSS.
Kesimpulan
Data Web Inti adalah metrik penting untuk memberikan pengalaman dan peringkat pengguna yang positif di hasil penelusuran Google.
Meskipun semua rekomendasi Google layak diterapkan, daftar ringkas ini realistis, dapat diterapkan di sebagian besar situs web, dan dapat memberikan dampak yang berarti.
Ini termasuk menggunakan CDN untuk menurunkan TTFB, menyetel ukuran eksplisit untuk konten di halaman untuk meningkatkan CLS, membuat halaman memenuhi syarat untuk bfcache, dan menghindari JavaScript dan animasi/transisi yang tidak perlu untuk FID.
Dengan mengikuti rekomendasi ini, Anda dapat memanfaatkan waktu Anda dengan lebih baik dan mendapatkan hasil maksimal dari situs web Anda.