Digital Transformation
DNS Prefetch
TL;DR: DNS Prefetch adalah hint berbentuk
<link rel="dns-prefetch" href="//domain.com">yang membuat browser melakukan resolusi DNS lebih dulu sebelum aset dari domain itu dibutuhkan. Praktiknya, hint ini memangkas 20 sampai 120 ms per domain pihak ketiga, signifikan untuk halaman yang memanggil banyak script analytics atau widget.
Apa itu DNS Prefetch?
DNS Prefetch adalah satu dari lima resource hints di standar W3C. Saat browser menemui tag ini di <head>, browser memulai DNS lookup ke domain target tanpa membuka TCP connection. Berbeda dengan preconnect yang melakukan DNS plus TCP plus TLS handshake, DNS prefetch lebih ringan dan lebih cocok untuk domain yang belum pasti dipakai.
Cara Kerja
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//connect.facebook.net">
Browser melakukan DNS lookup di background. Saat aset dari domain itu akhirnya dipanggil, langkah resolusi sudah selesai dan browser tinggal membuka koneksi.
| Praktik | Beban | Penghematan |
|---|---|---|
| Tanpa hint | DNS + TCP + TLS saat request | 100 sampai 300 ms |
| DNS prefetch | DNS lookup di background | 20 sampai 120 ms |
| Preconnect | DNS + TCP + TLS di background | 100 sampai 250 ms |
Kenapa Penting?
Di Core Web Vitals, terutama LCP, tiap milidetik lookup DNS menambah blocking time. Untuk website bisnis Indonesia yang masih banyak pakai 4G, Vito Atmo merekomendasikan DNS prefetch untuk semua domain pihak ketiga yang dipakai di above-the-fold (CDN gambar, font, analytics).
Pertanyaan Umum
Bedanya dengan preconnect apa?
Preconnect lebih agresif karena membuka TCP dan TLS, cocok untuk domain yang pasti dipakai cepat. DNS prefetch lebih ringan, cocok untuk domain yang baru dipakai beberapa detik kemudian.
Apakah aman pakai untuk banyak domain?
Aman, tapi batasi maksimal 4 sampai 6 domain prioritas. Terlalu banyak hint justru bisa menyumbat antrian network.
Istilah Terkait