Resource hints kama preload, prefetch na preconnect ni nini?

Question

Accepted Answer

**Resource hints** ni tagi za `` zinazoambia kivinjari kufetch au kuunganisha kwa rasilimali mapema, zikiboresha utendaji wa upakiaji. Kila moja inahudumia hitaji tofauti la wakati/kipaumbele. ```html ``` ## Kila moja inafanya nini - **`preload`** — "Ninahitaji hii **kwa ukurasa wa sasa**, ifetch sasa kwa kipaumbele cha juu." Kwa rasilimali muhimu ambazo parser inazigundua kuchelewa: fonts, hero images, rasilimali zinazorejelewa na CSS. Inahitaji `as` ili kivinjari kiweke kipaumbele/headers sahihi. - **`preconnect`** — "Nitaunganisha kwa **origin** hii hivi karibuni; fanya DNS lookup + TCP + TLS handshake sasa." Inaokoa round-trips kabla ya ombi la kwanza kwa mtu wa tatu (API, font host, CDN). Tumia kwa origins chache muhimu. - **`dns-prefetch`** — toleo jepesi la preconnect: ni utatuzi wa DNS tu. Mbadala mzuri / kwa origins nyingi. - **`prefetch`** — "**Pengine** nitahitaji hii kwa navigation **inayofuata**; ifetch kwa kipaumbele cha chini wakati wa kupumzika." Kwa kurasa/rasilimali zinazowezekana kufuata. Inahifadhiwa cache kwa ajili ya baadaye, si kwa ukurasa wa sasa. ## Mfano halisi wa kawaida: fonts ```html ``` Fonts hugunduliwa kuchelewa (kivinjari lazima kichanganue CSS kwanza), kwa hivyo kuzi-preload kunaepuka ucheleweshaji wa maandishi yasiyoonekana. ## Tahadhari: usitie hints kupita kiasi Ku-preload kila kitu kunaharibu lengo — kunashindana na rasilimali muhimu za kweli kwa bandwidth. Tia hint kwa zile chache zinazojalisha zaidi tu. ## Kwa nini ni muhimu Resource hints zinapunguza latency kwenye njia muhimu: `preconnect` inaondoa ucheleweshaji wa handshake kwa watu wa tatu, `preload` inapa kipaumbele rasilimali muhimu zilizogunduliwa kuchelewa (fonts, picha ya LCP), na `prefetch` inafanya navigation *inayofuata* ihisi ya papo hapo. Zinapotumika kwa umakini, zinaboresha Core Web Vitals kwa kiasi kikubwa.