Ce sunt indiciile de resurse, cum sunt preload, prefetch și preconnect?

Question

Accepted Answer

**Indiciile de resurse** sunt etichete `` care spun browserului să prelucreze sau să se conecteze la resurse devreme, optimizând performanța încărcării. Fiecare servește o nevoie diferită de timing/prioritate. ```html ``` ## Ce face fiecare - **`preload`** — "Am nevoie de aceasta **pentru pagina curentă**, prelucrează-o acum cu prioritate ridicată." Pentru resurse critice pe care parserul le descoperă târziu: fonturi, imagini hero, active referențiate în CSS. Necesită `as` pentru ca browserul să stabilească prioritate/headere corecte. - **`preconnect`** — "Mă voi conecta la această **origine** în curând; fă lookup-ul DNS + TCP + apăstrarea TLS acum." Economisește round-trip-urile înainte de prima cerere către un terț (API, gazdă de fonturi, CDN). Utilizează pentru câteva origini critice. - **`dns-prefetch`** — o versiune mai ușoară a preconnect: doar rezoluția DNS. Bun fallback / pentru multe origini. - **`prefetch`** — "Voi **probabil** avea nevoie de aceasta pentru **următoarea** navigare; prelucrează-o cu prioritate scăzută când inactiv." Pentru pagini/asset-uri probabil următoare. Salvate în cache pentru viitor, nu pentru pagina curentă. ## Un exemplu real comun: fonturi ```html ``` Fonturile sunt descoperite târziu (browserul trebuie să analizeze mai întâi CSS), deci preîncărcarea lor evită întârzierile de text invizibil. ## Avertisment: nu da prea multe indicii Preîncărcarea totului distruge scopul — se confruntă cu resurse cu adevărat critice pentru lățimea de bandă. Indica doar pe cele care contează cel mai mult. ## De ce conteaza Indiciile de resurse reduc latența pe calea critică: `preconnect` elimină întârziera apăstrării pentru terți, `preload` prioritizează asset-uri critice descoperite târziu (fonturi, imagine LCP), iar `prefetch` face ca *următoarea* navigare să pară instantanee. Utilizate chirurgical, ele îmbunătățesc semnificativ Core Web Vitals.