Apa iku resource hint kaya preload, prefetch lan preconnect?

Question

Accepted Answer

**Resource hint** minangka tag `` sing mènèhi tahu marang browser supaya nggoleki utawa nyambung marang sumber daya nang-andi wektu, nglimpaké kaluaran beban. Saben-saben nglayani kebutuhan waktu/prioritas sing beda. ```html ``` ## Apa sing ditindakké saben siji - **`preload`** — "Aku butuh iki **kanggo kaca current**, goleki saiki kanthi prioritas dhuwur." Kanggo sumber daya penting sing dijaluk parser keri: font, gambar hero, aset sing dituduhake CSS. Butuh `as` supaya browser nyetel prioritas/header sing bener. - **`preconnect`** — "Aku bakal nyambung marang **origin** iki gedhean; jaluk DNS + TCP + TLS handshake saiki." Ngandura round-trip sadurunge panjaluk pertama marang pihak katelu (API, font host, CDN). Gawa kanggo sawetara origin penting. - **`dns-prefetch`** — versi ringan saking preconnect: DNS resolution thok. Mundur apik / kanggo akeh origin. - **`prefetch`** — "Aku **mungkin** bakal butuh iki kanggo navigasi **sabanjure**; goleki kanthi prioritas rendah nalika benggang." Kanggo kaca/aset sing mungkin sabanjure. Cached kanggo masa ngarep, ora kanggo kaca current. ## Conto nyata umum: font ```html ``` Font dijaluk keri (browser kudu jumbuh CSS dhisit), supaya preloading ilang karandawan teks. ## Ati: aja over-hint Preloading kabeh ngerusak tujuan — bakal nglawan karo sumber daya penting kanggo bandwidth. Hint mung sawetara sing penting banget. ## Mengapa penting Resource hint nyikat latency ing dalan penting: `preconnect` ngilangi karandawan handshake kanggo pihak katelu, `preload` mangertosi aset penting sing dijaluk keri (font, gambar LCP), lan `prefetch` nggawa navigasi *sabanjure* kaya sekejap. Digunakaké kanthi tepat, nambahi Core Web Vitals kanthi bermakna.