Digital Transformation
Preload (Resource Hint)
Preload adalah resource hint HTML yang menyuruh browser mengambil aset penting (font, gambar hero, CSS kritikal) lebih awal demi memperbaiki LCP.
TL;DR: Preload adalah perintah HTML lewat tag link rel preload yang menyuruh browser mengambil aset penting lebih awal sebelum parser HTML menemukannya secara natural. Cocok untuk font, gambar hero, dan CSS kritikal. Pakai dengan disiplin, terlalu banyak preload justru memperlambat halaman.
Apa itu Preload?
Preload adalah salah satu jenis resource hint di HTML, dideklarasikan dengan format <link rel="preload" href="..." as="...">. Tujuannya: memberi tahu browser bahwa sebuah aset penting akan dipakai di awal pemuatan halaman, sehingga browser bisa mulai mengunduhnya tanpa menunggu parser sampai ke baris kode yang membutuhkannya.
Anggap browser sebagai pelayan restoran. Tanpa preload, dia membaca menu (HTML) dari atas ke bawah baru memesan ke dapur. Dengan preload, kita bilang dari awal, "tolong sekalian siapkan font Inter dan gambar hero, ini pasti dipakai." Hasilnya, aset siap lebih cepat dan LCP bisa turun signifikan.
Preload vs Prefetch vs DNS Prefetch
| Tipe | Tujuan | Kapan dipakai |
|---|---|---|
preload | Aset halaman ini, prioritas tinggi | Font, gambar hero, CSS kritikal |
prefetch | Aset halaman berikutnya | Halaman yang kemungkinan besar diklik |
dns-prefetch | Resolve DNS domain pihak ketiga | Origin Google Fonts, Supabase, CDN |
[preconnect](/glosarium/preconnect) | Setup TCP+TLS handshake awal | Origin yang krusial untuk LCP |
Praktik baik: gunakan preload hanya untuk 1-3 aset paling kritikal. Preload font WOFF2 dengan atribut as="font" dan crossorigin wajib supaya tidak terjadi double-fetch. Untuk gambar LCP, next/image di Next.js 15 sudah otomatis memberi sinyal prioritas saat properti priority dipasang.
Kenapa Penting?
Resource hint yang tepat sasaran dapat memangkas LCP 200-800 ms di kondisi jaringan Indonesia 4G. Riset Cloudflare menunjukkan preload font kritikal saja sudah dapat menghilangkan flash of unstyled text (FOUT) yang merusak persepsi kecepatan. Untuk situs e-commerce dengan konten visual berat, menjaga gambar hero terpreload adalah salah satu first-line optimization sebelum masuk ke perubahan arsitektur. Dokumentasi resmi dari Web.dev tentang preload memberi contoh implementasi yang dapat dijadikan patokan.
Pertanyaan Umum
Apakah preload bikin halaman saya lebih cepat secara otomatis?
Tidak otomatis. Preload yang salah sasaran (preload aset yang tidak benar-benar dibutuhkan di awal) malah menyita bandwidth dan menunda aset lain yang lebih penting. Audit dengan PageSpeed Insights dan Chrome DevTools sebelum menambah preload.
Berapa banyak preload yang aman dipakai?
Praktik umum: maksimum 3 aset kritikal per halaman. Lebih dari itu efeknya berbalik karena browser sibuk paralel-download yang tidak relevan dan menahan koneksi yang dibutuhkan aset lain.
Istilah Terkait