Preload & Prefetch

TL;DR: Preload dan prefetch adalah petunjuk untuk browser agar mengambil sumber daya penting lebih awal. Preload memprioritaskan aset yang dibutuhkan halaman saat ini (seperti font atau gambar utama), sementara prefetch menyiapkan aset untuk halaman yang kemungkinan dikunjungi berikutnya. Keduanya membuat website terasa lebih responsif.

Apa itu Preload & Prefetch?

Keduanya adalah resource hint, yaitu cara memberi tahu browser apa yang sebaiknya diambil duluan. Analoginya seperti pelayan restoran yang menyiapkan air dan roti sebelum diminta: kebutuhan yang sudah pasti disiapkan lebih awal agar tidak ada jeda saat dibutuhkan.

Preload untuk aset yang pasti dipakai di halaman saat ini, misalnya font utama atau gambar hero. Prefetch untuk aset halaman berikutnya yang kemungkinan dikunjungi, diambil saat browser senggang. Teknik ini sering dipakai bersama critical CSS dan lazy loading untuk menyeimbangkan kecepatan.

Kapan Memakai yang Mana

Memakai keduanya secara berlebihan justru membebani jaringan. Pertimbangkan rendering budget agar prioritas pengambilan aset tetap sehat dan tidak memperlambat time to first byte.

Kenapa Penting?

Bagi website bisnis di Indonesia dengan kondisi jaringan beragam, mengatur urutan pengambilan aset sering memberi dampak kecepatan lebih besar dibanding sekadar memperkecil ukuran file. Halaman yang aset pentingnya datang lebih dulu terasa cepat meski total ukurannya sama. Panduan resmi tersedia di web.dev.

Pertanyaan Umum

Apa bedanya preload dan prefetch?

Preload untuk aset yang dibutuhkan halaman saat ini dengan prioritas tinggi. Prefetch untuk aset halaman berikutnya yang diambil saat browser senggang dengan prioritas rendah.

Apakah memakai banyak preload selalu lebih cepat?

Tidak. Terlalu banyak preload justru bersaing memperebutkan jaringan dan bisa memperlambat aset yang benar-benar kritis. Gunakan secukupnya untuk aset paling penting.