Di dalam SEO (Search Engine Optimization), preload merujuk pada file HTML yang memberi tahu browser (peramban) untuk mengunduh aset penting.
Jika teman-teman ingin tahu lebih dalam dan menerapkan preload pada website Anda, yuk baca tulisan ini sampai akhir!
Daftar Isi
Pengertian Preload
Preload adalah kode di dalam file HTML yang memberi tahu browser untuk mengunduh critical asset (aset penting) yang dibutuhkan saat pertama kali halaman dimuat.
Critical asset yang dimaksud adalah:
- CSS
- JavaScript
- Fonts
- Gambar
- Video
- File JSON & WebVTT
Fungsi dan Manfaat Preload untuk SEO
Teman-teman DailySEO ID mungkin sudah tidak asing jika site speed (kecepatan situs) merupakan salah satu faktor ranking Google dan search engine lainnya.
Nah, preload ini berfungsi untuk memprioritaskan critical asset yang telah disebutkan di atas.
Preload memastikan aset-aset penting untuk tampilan pertama dimuat dengan segera, menghindari penundaan yang berpotensi menghambat rendering.
Sebagai hasilnya, manfaat dari penerapan preload ini adalah dapat membantu meningkatkan kinerja situs web dengan mengurangi waktu yang dibutuhkan saat memuat dan menampilkan halaman.
Artinya user tidak perlu lagi menunggu lama untuk dapat melihat isi konten halaman tersebut.
Manfaat preload lainnya:
- Meningkatkan skor CWV (Core Web Vitals) seperti Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP).
- Menyimpan resource di cache untuk permintaan di waktu mendatang, lalu menggunakan kembalinya jika sesuai.
- Menerapkan content security policy yang benar ke resource tersebut.
- Menetapkan Accept request headers yang tepat.
Contoh Kode Preload
Contoh kode preload adalah sebagai berikut:
<link rel="preload">Contoh untuk URL image jika ditulis secara utuh di antara tag <head>:
<link rel="preload" as="image" href="hero-image.webp" fetchpriority="high" />Contoh untuk URL CSS dan JavaScript:
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />Cara Mengimplementasikan Preload
Implementasi Manual
Cara sederhana untuk menerapkan preload adalah dengan menambahkan tag <link rel=””> ke bagian <head> dokumen:
<head>
<link rel="preload" as="script" href="critical.js">
</head>Teman-teman hanya perlu mengganti bagian critical pada URL di tag href=””.
Apakah itu URL CSS, JavaScript, hingga media (gambar & video).
Jika Anda tidak memiliki pengalaman, teman-teman bisa minta bantuan tim developer untuk mengaplikasikannya.
Implementasi di WordPress
Jika website yang teman-teman kelola menggunakan CMS WordPress, maka Anda bisa menggunakan plugin seperti Preloader Plus, Loft Loader, WP Smart Preloader, atau plugin performa seperti WP Rocket.
Caranya mudah, cukup download, install, lalu aktifkan.
Terkait langkah penerapan spesifik, teman-teman bisa kunjungi file dokumentasi di masing-masing plugin.
Perbedaan Preload dan Prefetch
Perbedaan utama antara preload dan prefetch terletak pada kapan resource tersebut dibutuhkan.
Jika preload digunakan untuk resource yang penting bagi halaman saat ini dan ingin dimuat dengan prioritas tinggi, maka prefetch digunakan untuk resource yang mungkin dibutuhkan untuk navigasi halaman di masa mendatang, dimuat dengan prioritas rendah selama waktu idle browser.
Perbedaannya jika kita lihat dari penerapan kode di file HTML:
Preload:
<link rel="preload" href="foo.js" as="script">Prefetch:
<link rel="prefetch" href="foo.js">Penutup
Dari penjelasan di atas, seharusnya kita sebagai praktisi SEO semakin mengerti bahwa SEO tidak hanya sebatas konten dan backlink, tapi juga tentang sisi technical SEO.
Salah satu irisan dari sisi teknis ya dengan cara pengaplikasian preload ini.
Halaman web yang cepat dan ringan dimuat juga tidak selalu tentang ranking, tapi lebih jauh dari pada itu, contohnya seperti rasa puas user yang berpotensi meningkatkan trust bahkan konversi yang terjadi di dalam website.
Demikianlah tulisan mengenai apa itu preload, fungsi, manfaatnya di SEO, hingga cara implementasi pada website ini, jika teman-teman memiliki pertanyaan silakan tuliskan di kolom komentar di bawah atau bisa gabung ke grup Telegram DailySEO ID di sini.
Teman-teman juga bisa ajukan topik selanjutnya untuk kami bahas! Jika ingin belajar SEO dari ahlinya, yuk belajar di course-nya DailySEO ID!
Referensi:
https://www.link-assistant.com/seo-wiki/preloading
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload
