Digital Transformation
Resource Hint (Petunjuk Sumber Daya)
TL;DR: Resource hint adalah kumpulan instruksi HTML (preload, preconnect, prefetch, dns-prefetch) yang memberi tahu browser sumber daya mana yang sebaiknya disiapkan lebih awal. Dipakai dengan tepat, resource hint bisa memangkas waktu muat halaman beberapa ratus milidetik, terutama untuk font, gambar hero, dan koneksi ke domain pihak ketiga.
Saat membangun website bisnis yang cepat, sering bukan ukuran file yang jadi masalah, tapi urutan dan waktu browser mulai mengambil sumber daya. Browser baru tahu sebuah font dibutuhkan setelah membaca CSS, dan baru menyambung ke domain gambar setelah menemui tag terkait. Resource hint memajukan keputusan itu.
Apa itu Resource Hint?
Resource hint adalah petunjuk yang Anda tulis di bagian <head> halaman untuk mengarahkan prioritas pengambilan sumber daya browser. Anggap seperti memberi daftar belanja lebih awal kepada asisten: alih-alih menunggu Anda menyebut satu per satu, ia bisa menyiapkan yang penting sambil Anda mengerjakan hal lain. Hint ini berkaitan erat dengan metrik LCP Element karena gambar atau font utama yang dimuat lebih awal akan mempercepat elemen terbesar di layar.
Empat Jenis Utama
| Hint | Fungsi | Contoh pemakaian |
|---|---|---|
preload | Ambil sumber daya penting lebih awal | Font, gambar hero, CSS kritis |
preconnect | Buka koneksi (DNS, TCP, TLS) ke domain | API, CDN gambar, Google Fonts |
dns-prefetch | Resolusi DNS saja, lebih ringan | Domain pihak ketiga sekunder |
prefetch | Ambil sumber daya untuk navigasi berikutnya | Halaman yang kemungkinan diklik |
Kenapa Penting?
Untuk pemilik website bisnis di Indonesia yang banyak pengunjungnya memakai jaringan seluler, latensi koneksi sering lebih mahal daripada ukuran file. Satu preconnect ke domain font atau CDN bisa menghemat waktu yang setara dengan beberapa kali bolak-balik jaringan. Praktik standar yang dianjurkan web.dev adalah membatasi preconnect pada 2-4 domain paling kritis, karena membuka terlalu banyak koneksi justru memboroskan sumber daya. Hint ini menjadi bagian dari upaya menjaga Core Web Vitals tetap hijau.
Pertanyaan Umum
Apakah memakai banyak preload bikin website lebih cepat?
Tidak selalu. Preload berlebihan membuat browser berebut bandwidth untuk hal yang belum tentu kritis, sehingga sumber daya penting malah tertunda. Gunakan hanya untuk aset yang benar-benar di jalur render awal.
Apa beda preconnect dan dns-prefetch?
Preconnect menyiapkan koneksi penuh (DNS, TCP, dan TLS), sementara dns-prefetch hanya menyelesaikan DNS. Preconnect lebih cepat tetapi lebih berat, jadi pakai untuk domain paling penting saja.
Istilah Terkait