Digital Transformation
DNS Prefetch (Resource Hint)
DNS Prefetch adalah resource hint yang memerintahkan browser melakukan resolusi DNS ke domain pihak ketiga lebih awal, supaya request asset berikutnya tidak menunggu lookup.
TL;DR: DNS Prefetch adalah resource hint berupa tag HTML yang memberi tahu browser untuk meresolusi DNS ke domain pihak ketiga sebelum asset benar-benar dibutuhkan. Praktik ini menghemat 20-120 ms per request asset eksternal seperti font, analytics, dan CDN, dan ikut menaikkan skor LCP di Core Web Vitals.
Apa itu DNS Prefetch?
Saat browser memuat halaman, setiap domain pihak ketiga (misal Google Fonts, GA4, Cloudflare) memerlukan tiga langkah jaringan: DNS lookup, TCP handshake, TLS negotiation. DNS Prefetch menyelesaikan langkah pertama lebih awal, biasanya saat browser masih parsing HTML. Implementasinya satu baris di <head>:
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
Untuk domain kritis seperti CDN gambar utama, sering dikombinasikan dengan preconnect yang sekaligus menjalankan TCP plus TLS.
DNS Prefetch vs Preconnect vs Prefetch
| Hint | Yang dikerjakan | Kapan dipakai |
|---|---|---|
dns-prefetch | Resolusi DNS saja | Domain dengan beberapa asset, biaya rendah |
preconnect | DNS + TCP + TLS | Domain kritis 1-2 saja, hemat 100-300 ms |
prefetch | Download resource | File yang pasti dipakai di navigasi berikut |
Kenapa Penting?
Dampaknya kecil tapi konsisten. Dalam beberapa proyek website client, saya melihat dns-prefetch ke domain Supabase Storage dan Google Fonts memangkas LCP 80-200 ms di koneksi 4G Indonesia. Untuk situs yang memuat banyak CDN dan analytics, ini termasuk optimasi termurah dengan ROI tertinggi karena cukup beberapa baris HTML, tanpa refactor.
Pertanyaan Umum
Apakah DNS Prefetch otomatis didukung semua browser?
Mayoritas iya. Chrome, Edge, Firefox, dan Safari versi modern mendukungnya. Browser lawas yang tidak mengenali tag akan mengabaikannya tanpa error, jadi aman dipasang.
Berapa domain ideal untuk di-prefetch?
Biasanya 3-6 domain pihak ketiga paling kritis. Lebih dari itu, manfaatnya menurun dan justru menambah beban awal. Prioritaskan font, CDN gambar utama, dan analytics.
Istilah Terkait