Mitä ovat resurssivihjeet kuten preload, prefetch ja preconnect?

Question

Accepted Answer

**Resurssivihjeet** ovat `` -tageja, jotka kertovat selaimelle hakea tai muodostaa yhteyksiä resursseihin etukäteen, mikä optimoi lataussuoritusta. Jokainen palvelee eri ajoitus-/prioriteettitarpeita. ```html ``` ## Mitä jokainen tekee - **`preload`** — "Tarvitsen tämän **tälle sivulle**, hae se nyt korkealla prioriteetilla." Kriittiset resurssit, jotka jäsentäjä löytää myöhään: fontit, pääkuvat, CSS:n viitaamat resurssit. Vaatii `as` -attribuutin, jotta selain asettaa oikean prioriteetin/otsikot. - **`preconnect`** — "Muodostan yhteyden tähän **alkuperään** pian; tee DNS-haku + TCP + TLS-kättelö nyt." Säästää kierrosajat ennen ensimmäistä pyyntöä kolmannen osapuolen palveluun (API, fonttipalvelin, CDN). Käytä muutamalla kriittisellä alkuperällä. - **`dns-prefetch`** — kevyempi versio preconnectista: vain DNS-ratkaisu. Hyvä varasuunnitelma / monille alkuperille. - **`prefetch`** — "Minun on **todennäköisesti** tarvittava tämä **seuraavalla** navigoinnilla; hae se matalalla prioriteetilla silloin kun idle." Todennäköisesti seuraavien sivujen/resurssien osalta. Välimuistissa tulevaisuudelle, ei nykyiselle sivulle. ## Yleinen käytännön esimerkki: fontit ```html ``` Fontit löydetään myöhään (selain joutuu ensin jäsentämään CSS:n), joten niiden preload-lataus välttää näkymättömän tekstin viiveet. ## Varoitus: älä anna liikaa vihjeitä Jokaisen preload-lataus kumoaa tarkoituksen — se kilpailee todella kriittisten resurssien kanssa kaistanleveydestä. Anna vihjeitä vain muutamille, jotka todella merkitsevät. ## Miksi sillä on merkitystä Resurssivihjeet leikkaavat viivettä kriittiseltä polulta: `preconnect` poistaa kättelöviiveen kolmannen osapuolen palveluille, `preload` priorisoi myöhään löydetyt kriittiset resurssit (fontit, LCP-kuva), ja `prefetch` tekee *seuraavasta* navigoinnista tuntuvan välittömältä. Tarkkaan käytettynä ne parantavat merkityksellisesti Core Web Vitals -mittareita.