Kaj so nasveti za resurse, kot so preload, prefetch in preconnect?

Question

Accepted Answer

**Nasveti za resurse** so `` oznake, ki povedo brskalniku, da naj preujem ali se poveže z viri že vnaprej, kar optimizira zmogljivost nalaganja. Vsak služi različni potrebi glede časa/prioritete. ```html ``` ## Kaj vsak od njih počne - **`preload`** — "To potrebujem **za trenutno stran**, prenesi jo takoj z visoko prioriteto." Za kritične vire, ki jih razčlenjevalnik odkrije pozno: pisave, героine slike, sredstva, ki se sklicujejo v CSS-u. Zahteva `as`, da brskalniku nastavi pravilno prioriteto/glave. - **`preconnect`** — "Povezal se bom s tem **izvorom** kmalu; naredi iskanje DNS + TCP + TLS rokovanje sedaj." Prihrani kroge pred prvo zahtevo tretje osebe (API, gostitelj pisav, CDN). Uporabi za nekaj kritičnih izvorov. - **`dns-prefetch`** — lažja različica preconnect: samo DNS resolucija. Dobra rezerva / za številne izvore. - **`prefetch`** — "To bom **verjetno** potreboval za **naslednjo** navigacijo; prenesi jo z nizko prioriteto, ko je prosti čas." Za verjetno naslednje strani/sredstva. Shranjeno za prihodnost, ne za trenutno stran. ## Pogost pravi primer: pisave ```html ``` Pisave so odkrije pozno (brskalniku je treba najprej razčleniti CSS), zato predhodno nalaganje njih izogne zamiki nevidnega besedila. ## Opozorilo: ne nasvete pretiranega Predhodno nalaganje vsega popači namen — konkurira resnično kritičnim virom za prepustnost. Navarati le tiste, ki so najbolj pomembni. ## Zakaj je to pomembno Nasveti za resurse zmanjšajo zakasnitev na kritični poti: `preconnect` odpravi zakasnjenje rokovanja za tretje osebe, `preload` daje prioriteto pozno odkritim kritičnim sredstvom (pisave, LCP slika), in `prefetch` naredi **naslednjo** navigacijo kot takoj. Uporabljeni kirurško, izboljšajo pomenljivo Core Web Vitals.