Apa itu resource hints seperti preload, prefetch, dan preconnect?

Question

Accepted Answer

**Resource hints** adalah tag `` yang memberi tahu browser untuk mengambil atau terhubung ke resource lebih awal, mengoptimalkan performa loading. Masing-masing melayani kebutuhan timing/prioritas yang berbeda. ```html ``` ## Apa yang dilakukan masing-masing - **`preload`** — "Saya membutuhkan ini **untuk halaman saat ini**, ambil sekarang dengan prioritas tinggi." Untuk resource kritis yang parser temukan terlambat: font, hero image, asset yang direferensikan CSS. Memerlukan `as` agar browser menetapkan prioritas/header yang benar. - **`preconnect`** — "Saya akan terhubung ke **origin** ini segera; lakukan lookup DNS + TCP + TLS handshake sekarang." Menghemat round-trip sebelum request pertama ke pihak ketiga (API, font host, CDN). Gunakan untuk beberapa origin kritis. - **`dns-prefetch`** — versi yang lebih ringan dari preconnect: hanya resolusi DNS. Fallback yang baik / untuk banyak origin. - **`prefetch`** — "Saya **mungkin** membutuhkan ini untuk navigasi **berikutnya**; ambil dengan prioritas rendah saat idle." Untuk kemungkinan halaman/asset berikutnya. Di-cache untuk masa depan, bukan halaman saat ini. ## Contoh nyata yang umum: font ```html ``` Font ditemukan terlambat (browser harus parse CSS terlebih dahulu), jadi preload font menghindari delay invisible-text. ## Hati-hati: jangan berlebihan memberi hint Mengpreload semua mengalahkan tujuannya — bersaing dengan resource benar-benar kritis untuk bandwidth. Hanya beri hint untuk beberapa yang paling penting. ## Mengapa ini penting Resource hints mengurangi latency di critical path: `preconnect` menghilangkan delay handshake untuk pihak ketiga, `preload` memprioritaskan asset kritis yang ditemukan terlambat (font, LCP image), dan `prefetch` membuat navigasi *berikutnya* terasa instant. Digunakan secara selektif, mereka meningkatkan Core Web Vitals secara signifikan.