Prefetch vs Preload

TL;DR: Preload dan prefetch sama-sama resource hint yang membantu browser mengambil file lebih cepat, tapi tujuannya berbeda. Preload memprioritaskan resource krusial untuk halaman yang sedang dibuka, sementara prefetch menyiapkan resource untuk halaman yang kemungkinan dikunjungi berikutnya. Memakai keduanya dengan tepat bisa memperbaiki kecepatan muat tanpa membebani jaringan.

Apa itu Prefetch dan Preload?

Preload adalah instruksi yang memberi tahu browser bahwa sebuah resource, misalnya font atau gambar utama, penting untuk halaman saat ini dan harus diambil sedini mungkin. Prefetch adalah instruksi yang lebih santai: browser mengambil resource untuk navigasi masa depan ketika koneksi sedang menganggur. Analoginya, preload seperti menyiapkan bahan masakan yang pasti dipakai sekarang, sedangkan prefetch seperti membeli bahan untuk menu besok ketika dapur sedang sepi. Keduanya berdampak pada Core Web Vitals, terutama metrik kecepatan muat.

Kapan Memakai yang Mana?

Salah pakai bisa kontraproduktif. Terlalu banyak preload justru memperebutkan bandwidth dan memperlambat resource lain.

Kenapa Penting?

Bagi developer dan marketer yang peduli kecepatan, kedua hint ini adalah alat presisi untuk mengatur prioritas jaringan. Dari pengalaman mengoptimasi situs berbasis CMS dan framework modern, memindahkan font utama ke preload sering memperbaiki pergeseran tata letak, sementara prefetch antar-halaman membuat navigasi terasa instan. Rujukan teknis lengkap tersedia di MDN Web Docs.

Pertanyaan Umum

Apakah prefetch membuang kuota data pengguna?

Bisa, jika dipakai berlebihan. Karena itu prefetch sebaiknya hanya untuk navigasi yang probabilitasnya tinggi, dan browser modern menundanya sampai koneksi menganggur.

Apa beda preload dengan preconnect?

Preload mengambil resource spesifik, sedangkan preconnect hanya membuka koneksi awal ke domain tertentu tanpa mengunduh file apa pun.