Digital Transformation
Preconnect (Resource Hint)
Preconnect adalah resource hint berbentuk tag link yang memerintahkan browser membuka koneksi awal ke domain pihak ketiga sebelum aset diminta, memangkas latensi DNS, TCP, dan TLS.
TL;DR: Preconnect adalah resource hint dengan tag
<link rel="preconnect" href="https://...">yang memerintahkan browser membuka koneksi DNS, TCP, dan TLS ke domain penting lebih awal. Ketika aset (font, gambar, atau API) akhirnya diminta, koneksi sudah siap, sehingga waktu transfer pertama lebih cepat. Cocok untuk dipasang ke domain font Google, CDN gambar, dan endpoint analytics.
Apa itu Preconnect?
Preconnect adalah salah satu resource hint yang ditetapkan di spesifikasi HTML. Ketika browser memuat halaman, setiap permintaan ke domain baru memerlukan tiga langkah, yaitu DNS lookup, pembentukan koneksi TCP, dan negosiasi TLS untuk HTTPS. Total waktu langkah ini bisa mencapai 100 hingga 500 ms tergantung jaringan pengguna. Preconnect memerintahkan browser melakukan ketiga langkah itu lebih awal sehingga aset yang datang setelahnya tinggal melakukan transfer data.
Bandingkan dengan DNS prefetch yang hanya menyelesaikan langkah DNS, preconnect menyelesaikan paket lengkap. Hasilnya, dampak terhadap LCP dan TTFB lebih signifikan, terutama untuk halaman yang banyak menarik aset dari domain pihak ketiga.
Format dan Contoh Implementasi
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
Atribut crossorigin wajib ditambahkan jika permintaan ke domain itu nantinya bersifat CORS, misalnya font, fetch JSON, atau modul JavaScript.
| Skenario | Pakai Preconnect? |
|---|---|
| Font Google atau Adobe | Ya, dengan crossorigin |
| Gambar dari CDN utama | Ya |
| Endpoint analytics yang dipanggil dini | Ya |
| Aset di domain yang sama | Tidak, browser sudah pakai koneksi yang ada |
| Domain yang baru dipanggil setelah 5 detik | Tidak, browser akan menutup koneksi idle |
Kenapa Penting?
Untuk situs bisnis Indonesia yang sering memuat font kustom, video embed, atau script analytics dari berbagai domain, preconnect dapat memangkas LCP sekitar 100 hingga 300 ms. Pemangkasan ini langsung terasa ketika Core Web Vitals diukur dari jaringan seluler 4G yang masih dominan. Browser modern membatasi jumlah preconnect aktif, jadi prioritaskan untuk dua hingga empat domain paling kritis di atas-the-fold.
Pertanyaan Umum
Apa beda preconnect dan preload?
Preconnect membuka koneksi ke sebuah domain, preload mengunduh aset spesifik dengan prioritas tinggi. Keduanya bisa dipakai bersama, misalnya preconnect ke domain font lalu preload font file utama.
Apakah terlalu banyak preconnect berbahaya?
Ya. Setiap koneksi memakan resource browser dan jaringan. Lebih dari empat preconnect aktif sering kali memperlambat halaman karena bersaing dengan permintaan kritis lain.