Øke hastigheten på nettsteder med ressurs hint: Preload, Prefetch og Preconnect

I dagens raske digitale verden er nettstedhastighet avgjørende. Brukere forventer at nettsteder lastes raskt og reagerer umiddelbart. Lange lastetider kan føre til en dårlig brukeropplevelse, høyere fluktfrekvens og til syvende og sist, tapt forretning. Ressurs hint er kraftige verktøy som kan hjelpe utviklere med å optimalisere lastetider for nettsteder ved å fortelle nettleseren hvilke ressurser som er viktige og hvordan de skal prioriteres. Denne artikkelen utforsker tre sentrale ressurs hint: preload, prefetch, og preconnect, og gir praktiske eksempler på implementering.

Forståelse av ressurs hint

Ressurs hint er direktiver som instruerer nettleseren om ressursene en nettside vil trenge i fremtiden. De lar utviklere proaktivt informere nettleseren om kritiske ressurser, slik at den kan hente eller koble seg til dem tidligere enn den ellers ville gjort. Dette kan redusere lastetider betydelig og forbedre opplevd ytelse.

De tre primære ressurs hintene er:

Preload: Henter kritiske ressurser som trengs for den første sidelastingen.
Prefetch: Henter ressurser som sannsynligvis vil være nødvendige for fremtidige navigasjoner eller interaksjoner.
Preconnect: Etablerer tidlige tilkoblinger til viktige tredjepartsservere.

Preload: Prioritering av kritiske ressurser

Hva er Preload?

Preload er en deklarativ henting som lar deg fortelle nettleseren at den skal hente en ressurs som trengs for den nåværende navigasjonen så tidlig som mulig. Dette er spesielt nyttig for ressurser som blir oppdaget sent av nettleseren, som bilder, fonter, skript eller stilark lastet via CSS eller JavaScript. Ved å forhåndslaste disse ressursene kan du forhindre at de blir render-blokkerende og forbedre den opplevde lastehastigheten på nettstedet ditt.

Når skal man bruke Preload

Bruk preload for:

Fonter: Tidlig lasting av egendefinerte fonter kan forhindre "flash of unstyled text" (FOUT) eller "flash of invisible text" (FOIT).
Bilder: Prioritering av bilder over bretten sikrer at de lastes raskt, noe som forbedrer den første brukeropplevelsen.
Skript og stilark: Tidlig lasting av kritiske CSS- eller JavaScript-filer forhindrer render-blokkering.
Moduler og Web Workers: Forhåndslasting av moduler eller web workers kan forbedre responsiviteten til applikasjonen din.

Hvordan implementere Preload

Du kan implementere preload ved å bruke <link>-taggen i <head>-delen av HTML-dokumentet ditt:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Forklaring:

rel="preload": Spesifiserer at nettleseren skal forhåndslaste ressursen.
href="/sti/til/ressurs": URL-en til ressursen som skal forhåndslastes.
as="type": Spesifiserer typen ressurs som forhåndslastes (f.eks. font, style, script, image). `as`-attributtet er obligatorisk og avgjørende for at nettleseren skal kunne prioritere og håndtere ressursen riktig. Å bruke riktig `as`-verdi sikrer at nettleseren bruker riktig Content Security Policy (CSP) og sender riktig Accept-header.
type="mime/type": (Valgfritt, men anbefalt) Spesifiserer MIME-typen til ressursen. Dette hjelper nettleseren med å velge riktig ressursformat, spesielt for fonter.
crossorigin="anonymous": (Påkrevd for fonter som lastes fra et annet opphav) Spesifiserer CORS-modusen for forespørselen. Hvis du laster fonter fra en CDN, vil du sannsynligvis trenge dette attributtet.

Eksempel: Forhåndslasting av en font

Tenk deg at du har en egendefinert font kalt 'OpenSans' som brukes på nettstedet ditt. Uten preload oppdager nettleseren denne fonten først etter å ha parset CSS-filen. Dette kan forårsake en forsinkelse i renderingen av teksten med riktig font. Ved å forhåndslaste fonten kan du eliminere denne forsinkelsen.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Eksempel: Forhåndslasting av en kritisk CSS-fil

Hvis nettstedet ditt har en kritisk CSS-fil som er essensiell for å rendre den første visningen, kan forhåndslasting av den forbedre den opplevde ytelsen betydelig.

<link rel="preload" href="/styles/critical.css" as="style">

Beste praksis for Preload

Prioriter kritiske ressurser: Forhåndslast kun ressurser som er essensielle for den første sidelastingen. Overdreven bruk av preload kan påvirke ytelsen negativt.
Bruk riktig as-attributt: Spesifiser alltid riktig as-attributt for å sikre at nettleseren håndterer ressursen korrekt.
Inkluder type-attributtet: Inkluder type-attributtet for å hjelpe nettleseren med å velge riktig ressursformat.
Bruk crossorigin for fonter fra annet opphav: Når du laster fonter fra et annet opphav, sørg for å inkludere crossorigin-attributtet.
Test ytelsen: Test alltid ytelsespåvirkningen av preload for å sikre at det faktisk forbedrer lastetidene. Bruk verktøy som Google PageSpeed Insights eller WebPageTest for å måle effekten.

Prefetch: Forutse fremtidige behov

Hva er Prefetch?

Prefetch er et ressurs hint som forteller nettleseren at den skal hente ressurser som sannsynligvis vil være nødvendige for fremtidige navigasjoner eller interaksjoner. I motsetning til preload, som fokuserer på ressurser som trengs for den nåværende siden, forutser prefetch brukerens neste trekk. Dette er spesielt nyttig for å forbedre lastehastigheten på påfølgende sider eller komponenter.

Når skal man bruke Prefetch

Bruk prefetch for:

Ressurser for neste side: Hvis du vet at brukeren sannsynligvis vil navigere til en spesifikk side neste gang, kan du forhåndshende ressursene til den.
Ressurser for brukerinteraksjoner: Hvis en brukerinteraksjon utløser lasting av spesifikke ressurser (f.eks. et modalvindu, et skjema), kan du forhåndshende disse ressursene.
Bilder og ressurser på andre sider: Forhåndslast bilder eller ressurser som brukes på andre sider som brukeren sannsynligvis vil besøke.

Hvordan implementere Prefetch

Du kan implementere prefetch ved å bruke <link>-taggen i <head>-delen av HTML-dokumentet ditt:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Forklaring:

rel="prefetch": Spesifiserer at nettleseren skal forhåndshende ressursen.
href="/sti/til/ressurs": URL-en til ressursen som skal forhåndshentes.

Eksempel: Forhåndshenting av ressurser for neste side

Hvis nettstedet ditt har en tydelig brukerflyt, for eksempel et flertrinnsskjema, kan du forhåndshende ressursene for neste trinn mens brukeren er på det nåværende trinnet.

<link rel="prefetch" href="/form/step2.html">

Eksempel: Forhåndshenting av ressurser for et modalvindu

Hvis nettstedet ditt bruker et modalvindu som laster inn ekstra ressurser når det åpnes, kan du forhåndshende disse ressursene for å sikre en jevn brukeropplevelse.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Beste praksis for Prefetch

Bruk med måte: Prefetch bør brukes sparsomt, da det kan bruke båndbredde og ressurser selv om brukeren ikke trenger de forhåndshentede ressursene.
Prioriter sannsynlige navigasjoner: Forhåndshent ressurser for sider eller interaksjoner som mest sannsynlig vil skje.
Vurder nettverksforhold: Prefetch er best egnet for brukere med stabile og raske internettforbindelser. Unngå å forhåndshende store ressurser for brukere på trege eller målte tilkoblinger. Du kan bruke Network Information API til å oppdage brukerens tilkoblingstype og justere forhåndshentingen deretter.
Overvåk ytelsen: Overvåk effekten av prefetch på nettstedets ytelse for å sikre at det gir en netto fordel.
Bruk dynamisk forhåndshenting: Implementer forhåndshenting dynamisk basert på brukeratferd og analysedata. For eksempel, forhåndshent ressurser for sider som ofte besøkes av brukere som for øyeblikket er på den nåværende siden.

Preconnect: Etablering av tidlige tilkoblinger

Hva er Preconnect?

Preconnect er et ressurs hint som lar deg etablere tidlige tilkoblinger til viktige tredjepartsservere. Etablering av en tilkobling innebærer flere trinn, inkludert DNS-oppslag, TCP-håndtrykk og TLS-forhandling. Disse trinnene kan legge til betydelig forsinkelse ved lasting av ressurser fra disse serverne. Preconnect lar deg starte disse trinnene i bakgrunnen, slik at når nettleseren trenger å hente en ressurs fra serveren, er tilkoblingen allerede etablert.

Når skal man bruke Preconnect

Bruk preconnect for:

Tredjepartsservere: Servere som hoster fonter, CDN-er, API-er eller andre ressurser nettstedet ditt er avhengig av.
Ofte brukte servere: Servere som ofte aksesseres av nettstedet ditt.

Hvordan implementere Preconnect

Du kan implementere preconnect ved å bruke <link>-taggen i <head>-delen av HTML-dokumentet ditt:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Forklaring:

rel="preconnect": Spesifiserer at nettleseren skal forhåndskoble til serveren.
href="https://example.com": URL-en til serveren du skal forhåndskoble til.
crossorigin: (Valgfritt, men påkrevd for ressurser lastet med CORS) Spesifiserer at tilkoblingen krever CORS.

Eksempel: Forhåndskobling til Google Fonts

Hvis nettstedet ditt bruker Google Fonts, kan forhåndskobling til https://fonts.gstatic.com redusere forsinkelsen ved lasting av fonter betydelig.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

crossorigin-attributtet er avgjørende her fordi Google Fonts bruker CORS for å levere fontene.

Eksempel: Forhåndskobling til en CDN

Hvis nettstedet ditt bruker en CDN for å levere statiske ressurser, kan forhåndskobling til CDN-ens vertsnavn redusere forsinkelsen ved lasting av disse ressursene.

<link rel="preconnect" href="https://cdn.example.com">

Beste praksis for Preconnect

Bruk med omhu: Forhåndskobling til for mange servere kan faktisk forringe ytelsen, da nettleseren har begrensede ressurser for å etablere tilkoblinger.
Prioriter viktige servere: Forhåndskoble til serverne som er mest kritiske for nettstedets ytelse.
Vurder DNS-Prefetch: For servere du ikke trenger å forhåndskoble fullstendig til, men fortsatt ønsker å løse opp DNS-en tidlig, vurder å bruke <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch utfører kun DNS-oppslaget, noe som er mindre ressurskrevende enn en fullstendig forhåndskobling.
Test ytelsen: Test alltid ytelsespåvirkningen av preconnect for å sikre at det gir en netto fordel.
Kombiner med andre ressurs hint: Bruk preconnect i kombinasjon med preload og prefetch for å oppnå optimal ytelse. For eksempel, forhåndskoble til serveren som hoster fontene dine, og forhåndslast deretter fontfilene.

Kombinere ressurs hint for optimal ytelse

Den sanne kraften til ressurs hint ligger i å kombinere dem strategisk. Her er et praktisk eksempel:

Tenk deg et nettsted som bruker en egendefinert font hostet på en CDN og laster en kritisk JavaScript-fil.

Forhåndskoble til CDN: Etabler en tidlig tilkobling til CDN-en som hoster fonten og JavaScript-filen.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Forhåndslast fonten: Prioriter lasting av fonten for å forhindre FOUT.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Forhåndslast JavaScript-filen: Prioriter lasting av JavaScript-filen for å sikre at den er tilgjengelig når det trengs.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Verktøy for å analysere ressurs hint

Flere verktøy kan hjelpe deg med å analysere effektiviteten av dine ressurs hint:

Google PageSpeed Insights: Gir anbefalinger for å optimalisere nettstedets ytelse, inkludert bruk av ressurs hint.
WebPageTest: Lar deg teste nettstedets ytelse fra forskjellige steder og nettverksforhold.
Chrome DevTools: Nettverkspanelet i Chrome DevTools viser tidspunktet for ressurslasting og kan hjelpe deg med å identifisere muligheter for optimalisering.
Lighthouse: Et automatisert verktøy for å forbedre kvaliteten på nettsider. Det har revisjoner for ytelse, tilgjengelighet, progressive webapper, SEO og mer.

Vanlige fallgruver og hvordan man unngår dem

Overdreven bruk av ressurs hint: Bruk av for mange ressurs hint kan påvirke ytelsen negativt. Fokuser på de mest kritiske ressursene.
Feil as-attributt: Bruk av feil as-attributt for preload kan forhindre at ressursen lastes korrekt.
Ignorering av CORS: Å unnlate å inkludere crossorigin-attributtet når du laster ressurser fra et annet opphav kan forårsake lastefeil.
Ikke teste ytelsen: Test alltid ytelsespåvirkningen av ressurs hint for å sikre at de gir en netto fordel.
Feil stier: Dobbeltsjekk og sørg for at alle filstier og URL-er som er spesifisert for ressurs hintene er korrekte, ellers vil det resultere i en feil.

Fremtiden for ressurs hint

Ressurs hint er i konstant utvikling, med nye funksjoner og forbedringer som legges til i nettleserspesifikasjoner. Å holde seg oppdatert på den siste utviklingen innen ressurs hint kan hjelpe deg med å optimalisere nettstedets ytelse ytterligere. For eksempel er modulepreload et nyere ressurs hint spesielt designet for forhåndslasting av JavaScript-moduler. I tillegg lar `priority`-attributtet for ressurs hint deg spesifisere prioriteten til en ressurs i forhold til andre ressurser. Nettleserstøtte for disse funksjonene er fortsatt under utvikling, så sjekk kompatibilitet før du implementerer dem.

Konklusjon

Ressurs hint er kraftige verktøy for å optimalisere lastetider for nettsteder og forbedre brukeropplevelsen. Ved å strategisk bruke preload, prefetch og preconnect kan du proaktivt informere nettleseren om kritiske ressurser, redusere forsinkelse og forbedre den opplevde ytelsen til nettstedet ditt. Husk å prioritere kritiske ressurser, bruke ressurs hint med omhu og alltid teste ytelsespåvirkningen av endringene dine. Ved å følge beste praksis som er beskrevet i denne artikkelen, kan du forbedre nettstedets ytelse betydelig og gi en bedre opplevelse for brukerne dine over hele verden.