admin
Resource hint sering dipasang asal-asalan: semua asset di-preload, domain pihak ketiga di-preconnect massal, lalu LCP malah turun. Di 2026, browser dan crawler semakin ketat memprioritaskan bandwidth. Artikel perbandingan ini membedah preload vs prefetch vs preconnect, lalu memberi tutorial langkah demi langkah agar Anda memilih hint yang tepat tanpa membakar kuota koneksi.
Ringkasan perbedaan tiga resource hint
Ketiganya adalah instruksi di <link> atau header HTTP, tetapi prioritas dan risiko SEO-nya berbeda.
- Preload: unduh resource kritis sekarang dengan prioritas tinggi (font LCP, hero image, CSS above-the-fold). Salah pakai = antri unduhan penting tertunda.
- Prefetch: unduh spekulatif untuk navigasi berikutnya, prioritas rendah. Cocok untuk HTML/JS halaman yang hampir pasti diklik.
- Preconnect: buka TCP+TLS ke origin pihak ketiga lebih awal, tanpa mengunduh file. Ideal untuk CDN font, analytics, atau API checkout.
Angka praktis 2026: satu preconnect menghemat ~100–300 ms handshake; preload font woff2 yang benar bisa memangkas LCP 50–150 ms; prefetch berlebih di 3G/4G lemah justru menunda LCP 5–12%.
Kapan masing-masing unggul untuk SEO
Preload menang jika…
Resource benar-benar dibutuhkan di render pertama dan ada di critical path (misalnya hero.avif atau main.woff2). Google menilai LCP dan INP; preload yang tepat mendukung skor tanpa mengubah ranking secara langsung, tetapi lewat sinyal pengalaman halaman.
Prefetch menang jika…
Pola navigasi sangat prediktif: dari listing ke detail produk, atau dari artikel ke halaman layanan. Prefetch HTML/JSON berikutnya mempercepat pogo-sticking menurun. Jangan prefetch seluruh arsip blog—crawl budget pengguna (bukan bot Google) yang terbuang, dan data plan pengunjung mobile ikut terbakar.
Preconnect menang jika…
Anda memanggil 1–3 origin eksternal di first paint (CDN gambar, payment, font). Lebih dari empat preconnect paralel sering kontraproduktif di Chrome 2026 karena slot koneksi terbatas.
Tutorial 7 langkah: pilih dan pasang dengan aman
Langkah 1 — Audit critical path 24 jam
Buka Chrome DevTools → Network → disable cache, throttling “Fast 4G”. Catat file yang memblokir LCP: biasanya 1 CSS, 1–2 font, 1 gambar hero. Hanya kandidat ini yang boleh preload.
Langkah 2 — Batasi preload maksimal tiga resource
Contoh di header.php tema child WordPress:
<link rel=”preload” href=”/wp-content/themes/child/assets/hero.avif” as=”image” type=”image/avif” fetchpriority=”high”>
<link rel=”preload” href=”/fonts/inter-latin.woff2″ as=”font” type=”font/woff2″ crossorigin>
Sertakan as, type, dan crossorigin untuk font agar tidak double-fetch.
Langkah 3 — Preconnect hanya origin yang terlihat di 1,5 detik pertama
Dari waterwall, ambil host yang handshake-nya >80 ms. Contoh:
<link rel=”preconnect” href=”https://cdn.example.com” crossorigin>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
Tambahkan dns-prefetch sebagai fallback lama hanya untuk domain non-kritis, bukan pengganti preconnect.
Langkah 4 — Prefetch berbasis intent, bukan spekulasi buta
Pasang prefetch saat hover/touch pada kartu produk atau setelah 2 detik idle di artikel panjang:
<link rel=”prefetch” href=”/produk/sepatu-lari-x/” as=”document”>
Untuk SPA/headless, prefetch JSON API yang sama. Hindari prefetch file >300 KB.
Langkah 5 — Bandingkan di field data, bukan hanya lab
Uji A/B 7 hari: varian A preload agresif (5 file), varian B disiplin (≤3). Pantau CrUX / RUM: LCP p75, INP, bounce rate mobile. Target realistis 2026: LCP p75 di bawah 2,5 detik untuk segmen 4G Indonesia.
Langkah 6 — Sinkronkan dengan cache dan CDN
Preload URL harus sama persis dengan URL final (termasuk query hash file). Jika Cloudflare atau Bunny mengubah path, preload miss = unduhan dobel. Set header Link: <…>; rel=preload; as=image di edge hanya untuk homepage dan template produk teratas.
Langkah 7 — Jaga kebersihan untuk crawler dan AI bot
Resource hint tidak menuntun Googlebot seperti sitemap, tetapi HTML yang gemuk oleh 15 tag link memperlambat TTFB parse. Audit bulanan: hapus preconnect ke tool yang sudah tidak dipakai (chat lama, A/B test sunset). Pastikan tidak mem-preload URL yang di-noindex atau di balik login.
Tabel keputusan cepat
- Hero image / font LCP → preload
- Origin CDN/font/API di first paint → preconnect (maks 3–4)
- Halaman tujuan klik berikutnya yang jelas → prefetch
- Script analitik di bawah fold → jangan preload; defer/delay saja
Kesalahan umum yang masih muncul 2026
Preload seluruh CSS theme “untuk jaga-jaga”, preconnect ke sepuluh pixel marketing, dan prefetch infinite scroll page 2–10. Ketiganya menaikkan contention bandwidth. Gabungkan keputusan hint dengan budget performa: total hint early ≤4 link kritis di <head>.
Dengan membandingkan perilaku preload, prefetch, dan preconnect lalu mengikuti tujuh langkah di atas, Anda mengoptimalkan sinyal pengalaman halaman tanpa mengorbankan stabilitas crawl atau kuota pengunjung. Terapkan bertahap, ukur p75 lapangan, dan dokumentasikan setiap origin yang Anda izinkan di head template.
