Digital Transformation
Preload Resource
TL;DR: Preload adalah petunjuk
<link rel="preload">yang menyuruh browser mengunduh aset kritikal lebih awal, sebelum ia menemukannya secara alami di HTML. Dipakai dengan tepat, preload memperbaiki LCP dan mempercepat render konten utama. Dipakai berlebihan, ia justru memperlambat halaman karena memperebutkan bandwidth.
Apa itu Preload Resource?
Preload resource adalah teknik optimasi performa web di mana developer secara eksplisit memberi tahu browser: "aset ini penting, ambil sekarang." Caranya dengan menambahkan <link rel="preload" href="..." as="font"> di bagian head. Tanpa preload, browser baru mengunduh font atau gambar saat parser HTML sampai pada baris yang merujuknya, sehingga ada jeda. Analogi sederhananya seperti menyiapkan bahan masakan sebelum mulai memasak, bukan mengambilnya satu per satu saat dibutuhkan.
Preload paling berdampak pada aset yang memengaruhi Largest Contentful Paint, misalnya font web dan gambar hero. Karena aset ini sering ditemukan terlambat oleh browser, mendahuluinya bisa memangkas waktu render konten utama.
Kapan Memakai Preload
| Aset | Preload? | Catatan |
|---|---|---|
| Font web utama | Ya | Pakai as="font" + crossorigin |
| Gambar hero / LCP | Ya | Hanya satu, jangan semua |
| CSS kritikal | Kadang | Jika di-load via JS |
| Script pihak ketiga | Jarang | Biasanya tidak kritikal |
| Semua gambar | Tidak | Justru memperlambat |
Kenapa Penting?
Preload yang tepat sasaran adalah salah satu cara termurah memperbaiki skor Core Web Vitals tanpa menulis ulang aplikasi. Dalam beberapa proyek Next.js yang saya tangani, memindahkan font hero ke preload memangkas LCP beberapa ratus milidetik, cukup untuk menggeser halaman dari zona "perlu perbaikan" ke "baik". Kuncinya disiplin: preload hanya aset yang benar-benar menentukan tampilan awal, sisanya biarkan browser yang mengatur lewat cache dan prioritas bawaan. Panduan resmi soal ini bisa dibaca di dokumentasi web.dev tentang preload.
Pertanyaan Umum
Apa beda preload dan prefetch?
Preload untuk aset yang dibutuhkan di halaman saat ini dengan prioritas tinggi. Prefetch untuk aset yang mungkin dibutuhkan di navigasi berikutnya dengan prioritas rendah.
Apakah preload selalu mempercepat halaman?
Tidak. Preload terlalu banyak aset membuat browser memperebutkan bandwidth dan justru menunda aset kritikal. Batasi pada satu hingga tiga aset paling penting.
Istilah Terkait