Mik azok a resource hintek, mint a preload, prefetch és a preconnect?

Question

Accepted Answer

A **resource hints** `` címkék, amelyek azt mondják a böngészőnek, hogy korán szerezzen be vagy kapcsolódjon erőforrásokhoz, optimalizálva a betöltési teljesítményt. Mindegyik más időzítési/prioritási igényt szolgál. ```html ``` ## Mit csinál mindegyik - **`preload`** — "Erre szükségem van **az aktuális oldalhoz**, szerezd be most magas prioritással." Kritikus erőforrásokhoz, amelyeket az elemző későn fedez fel: betűtípusok, hero képek, CSS-re hivatkozott eszközök. Az `as` szükséges, hogy a böngésző helyesen állítsa a prioritást/fejléceket. - **`preconnect`** — "Nemsokára csatlakozom ehhez az **originhoz**; végezd el most a DNS keresést + TCP + TLS kézfogást." Megtakarít round-trip-eket, mielőtt az első kérés egy harmadik félhez (API, betűtípus host, CDN) érkezne. Használd néhány kritikus origonál. - **`dns-prefetch`** — a preconnect könnyebb változata: csak a DNS feloldása. Jó fallback / sok origonál. - **`prefetch`** — "**Valószínűleg** szükségem lesz erre a **következő** navigációhoz; szerezd be alacsony prioritással, amikor tétlen." A valószínű következő oldalakhoz/eszközökhöz. Gyorsítótárazva a jövőre, nem az aktuális oldalra. ## Egy gyakori valós példa: betűtípusok ```html ``` A betűtípusok később derülnek ki (a böngészőnek először CSS-t kell elemeznie), ezért az előtöltésük elkerüli az láthatatlan szöveggel járó késedelmet. ## Figyelmeztetés: ne vigyél túl sok hintet Minden előtöltése ellenkezik a céllal — verseng a valóban kritikus erőforrásokkal a sávszélességért. Csak a legfontosabbakhoz adj hintet. ## Miért számít A resource hints csökkentik a késleltetést a kritikus útvonalon: a `preconnect` eltávolítja a kézfogás késleltetését harmadik felekhez, a `preload` prioritást ad a késően felfedezett kritikus erőforrásoknak (betűtípusok, LCP kép), a `prefetch` pedig a *következő* navigációt azonnalinak érzetessé teszi. Célzottan használva, érdemben javítják a Core Web Vitals-t.