Preconnect dan DNS-Prefetch

TL;DR: Preconnect dan dns-prefetch adalah resource hint di HTML yang memberitahu browser untuk menyiapkan koneksi ke domain eksternal sebelum aset dari domain itu benar-benar dibutuhkan. dns-prefetch hanya menyelesaikan DNS, sedangkan preconnect menyelesaikan DNS plus handshake TCP dan TLS. Keduanya memangkas waktu tunggu dan membantu metrik kecepatan seperti LCP.

Apa itu Preconnect dan DNS-Prefetch?

Saat halaman memuat aset dari domain lain (font Google, CDN, skrip analitik), browser harus menempuh beberapa langkah: mencari alamat domain (DNS), membuka koneksi (TCP), lalu mengamankannya (TLS). Resource hint membuat langkah ini dimulai lebih awal. Analogikan seperti menelepon restoran untuk memesan meja sebelum berangkat, jadi Anda tidak menunggu saat tiba. Teknik ini melengkapi optimasi Largest Contentful Paint.

Cara Pakai

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.contoh.com">

• Gunakan preconnect untuk domain kritis yang pasti dipakai segera (font, CDN utama)
• Gunakan dns-prefetch sebagai fallback ringan untuk domain yang mungkin dipakai
• Jangan berlebihan: terlalu banyak preconnect justru membebani koneksi awal

Dampaknya terasa pada Time to First Byte aset eksternal dan kecepatan render keseluruhan.

Kenapa Penting?

Banyak situs lambat bukan karena server sendiri, melainkan karena menunggu aset dari domain ketiga. Untuk situs bisnis yang memuat font kustom atau beberapa skrip eksternal, dua hint ini sering memberi perbaikan kecepatan yang nyata dengan usaha minimal. Detail teknisnya dijelaskan di dokumentasi web.dev soal resource hints.

Pertanyaan Umum

Apa beda preconnect dan dns-prefetch?

dns-prefetch hanya menyelesaikan DNS. Preconnect melakukan lebih: DNS, TCP, dan TLS sekaligus, sehingga lebih cepat tapi lebih berat.

Apakah selalu mempercepat situs?

Tidak otomatis. Manfaat terbesar untuk domain eksternal yang dipakai di awal pemuatan. Memakainya untuk domain yang tidak segera dipakai bisa membuang sumber daya.