Digital Transformation
Resource Hints (Petunjuk Sumber Daya Browser)
TL;DR: Resource Hints adalah empat instruksi HTML, yaitu preload, preconnect, dns-prefetch, dan prefetch, yang membantu browser memprioritaskan pengambilan aset kritis. Pemakaian yang tepat dapat memangkas LCP 200-600 ms tanpa mengubah desain halaman.
Apa itu Resource Hints?
Resource Hints adalah sekumpulan tag <link rel="..."> yang berfungsi sebagai sinyal kepada browser untuk menyiapkan jaringan, DNS, atau aset jauh sebelum aset itu benar-benar dibutuhkan. Resource Hints bekerja di lapisan yang sama dengan optimasi LCP dan [TTFB](/glosarium/ttfb-time-to-first-byte), tapi tidak mengubah konten visual halaman. Analoginya, ini seperti pelayan restoran yang sudah membawa air dan menu sebelum tamu duduk.
Empat Jenis Utama
| Jenis | Fungsi | Kapan Dipakai |
|---|---|---|
preload | Mengambil aset kritis (font, hero image, CSS) lebih awal | Aset yang pasti dipakai di viewport pertama |
preconnect | Membuka koneksi TCP+TLS ke origin pihak ketiga | CDN, font provider, analytics yang dipakai segera |
dns-prefetch | Resolusi DNS lebih awal saja | Origin sekunder yang belum tentu dipakai cepat |
prefetch | Mengambil aset untuk halaman berikutnya | Halaman yang kemungkinan besar dikunjungi |
Pakai preload dengan hati-hati. Terlalu banyak preload justru bikin browser bingung memprioritaskan dan bisa memperlambat aset utama.
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak mengandalkan CDN eksternal seperti Google Fonts, Supabase Storage, atau Cloudinary, Resource Hints adalah cara murah memangkas waktu negosiasi koneksi. Praktik standar di industri menunjukkan satu preconnect ke origin font bisa menghemat 100-300 ms di koneksi 4G. Kombinasi yang sehat dengan Performance Budget menjaga halaman tetap ringan meski memakai banyak aset eksternal.
Pertanyaan Umum
Apakah preload sama dengan prefetch?
Tidak. preload untuk aset kritis di halaman saat ini dengan prioritas tinggi. prefetch untuk aset halaman berikutnya dengan prioritas rendah, baru diambil saat browser idle.
Berapa banyak Resource Hints yang aman dipakai?
Umumnya 3-5 hint per halaman cukup. Lebih dari itu sering kontraproduktif karena bersaing dengan permintaan aset utama.
Istilah Terkait