Digital Transformation
Preconnect Resource Hint
TL;DR: Preconnect adalah baris HTML
<link rel="preconnect" href="https://example.com">yang memberitahu browser untuk membuka koneksi DNS, TCP, dan TLS handshake lebih awal. Browser bisa langsung pakai koneksi tersebut saat resource benar-benar dibutuhkan, memangkas 100-500 ms latency yang biasanya hilang menunggu handshake selesai.
Apa itu Preconnect?
Preconnect adalah salah satu jenis resource hint yang berfungsi memberi tahu browser bahwa origin tertentu akan dipakai segera. Browser tidak menunggu HTML selesai parse, melainkan langsung membuka jalur koneksi. Ini berguna untuk font Google, CDN gambar, analytics, dan API pihak ketiga. Hubungan preconnect dengan Largest Contentful Paint sangat erat karena LCP element sering ditarik dari CDN eksternal yang butuh handshake.
Cara Pakai
| Resource hint | Apa yang dilakukan | Kapan dipakai |
|---|---|---|
| dns-prefetch | DNS resolution saja | Banyak origin tapi tidak yakin terpakai |
| preconnect | DNS + TCP + TLS | Origin yang pasti dipakai dalam 1-2 detik |
| preload | Ambil resource spesifik | File LCP atau font kritis |
Contoh implementasi di Next.js layout: <link rel="preconnect" href="https://images.supabase.co" />. Batasi 4-6 preconnect total. Terlalu banyak preconnect malah membebani CPU dan menurunkan TTI karena browser kehabisan thread untuk parsing HTML.
Kenapa Penting?
Setiap koneksi baru ke origin eksternal biasanya makan 200-300 ms di koneksi Indonesia 4G, lebih lama di area dengan latency tinggi. Preconnect memindahkan biaya itu ke fase awal saat browser masih punya kapasitas. Dalam audit Web Vitals yang Vito Atmo lakukan untuk klien LMS Atmo, penambahan tiga preconnect strategis menurunkan LCP dari 2,9 detik ke 2,1 detik di handset menengah, cukup untuk lulus ambang "Good" Google. Pelajari lebih lanjut di dokumentasi web.dev tentang preconnect.
Pertanyaan Umum
Apakah preconnect dan preload bisa dipakai bersamaan?
Bisa dan sering disarankan. Preconnect membangun jalur, preload meminta resource spesifik. Untuk font kustom, pasang keduanya: preconnect ke origin font, preload ke file .woff2.
Apa risiko terlalu banyak preconnect?
Browser dibatasi jumlah koneksi paralel. Preconnect berlebih membuang resource untuk origin yang ternyata tidak dipakai, dan justru memperlambat halaman.
Istilah Terkait