Boost din hjemmesides hastighed med ressourcehints: Preload, Prefetch og Preconnect

I nutidens tempofyldte digitale verden er hjemmesidens hastighed altafgørende. Brugere forventer, at hjemmesider indlæses hurtigt og reagerer øjeblikkeligt. Langsomme indlæsningstider kan føre til en dårlig brugeroplevelse, højere afvisningsprocenter og i sidste ende tabt forretning. Ressourcehints er kraftfulde værktøjer, der kan hjælpe udviklere med at optimere hjemmesiders indlæsningstider ved at fortælle browseren, hvilke ressourcer der er vigtige, og hvordan de skal prioriteres. Denne artikel udforsker tre vigtige ressourcehints: preload, prefetch og preconnect, og giver praktiske eksempler på implementering.

Forståelse af ressourcehints

Ressourcehints er direktiver, der instruerer browseren om de ressourcer, en webside får brug for i fremtiden. De giver udviklere mulighed for proaktivt at informere browseren om kritiske ressourcer, hvilket gør det muligt at hente eller oprette forbindelse til dem tidligere, end den ellers ville gøre. Dette kan reducere indlæsningstiderne markant og forbedre den oplevede ydeevne.

De tre primære ressourcehints er:

Preload: Henter kritiske ressourcer, der er nødvendige for den indledende sideindlæsning.
Prefetch: Henter ressourcer, der sandsynligvis vil være nødvendige for fremtidige navigationer eller interaktioner.
Preconnect: Etablerer tidlige forbindelser til vigtige tredjepartsservere.

Preload: Prioritering af kritiske ressourcer

Hvad er Preload?

Preload er en deklarativ hentning, der giver dig mulighed for at fortælle browseren, at den skal hente en ressource, der er nødvendig for den aktuelle navigation, så tidligt som muligt. Dette er især nyttigt for ressourcer, der opdages sent af browseren, såsom billeder, skrifttyper, scripts eller stylesheets, der indlæses via CSS eller JavaScript. Ved at forudindlæse disse ressourcer kan du forhindre dem i at blive render-blocking og forbedre den oplevede indlæsningshastighed på din hjemmeside.

Hvornår skal man bruge Preload

Brug preload til:

Skrifttyper: Tidlig indlæsning af brugerdefinerede skrifttyper kan forhindre flash af uformateret tekst (FOUT) eller flash af usynlig tekst (FOIT).
Billeder: Prioritering af billeder over folden sikrer, at de indlæses hurtigt, hvilket forbedrer den indledende brugeroplevelse.
Scripts og Stylesheets: Tidlig indlæsning af kritisk CSS eller JavaScript-filer forhindrer render-blocking.
Moduler og Web Workers: Forudindlæsning af moduler eller web workers kan forbedre responsiviteten af din applikation.

Sådan implementeres Preload

Du kan implementere preload ved hjælp af <link>-tagget i <head>-delen af dit HTML-dokument:

<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": Angiver, at browseren skal forudindlæse ressourcen.
href="/path/to/resource": URL'en til den ressource, der skal forudindlæses.
as="type": Angiver typen af ressource, der forudindlæses (f.eks. font, style, script, image). `as`-attributten er obligatorisk og afgørende for, at browseren korrekt kan prioritere og håndtere ressourcen. Brug af den korrekte `as`-værdi sikrer, at browseren anvender den korrekte Content Security Policy (CSP) og sender den korrekte Accept-header.
type="mime/type": (Valgfrit, men anbefales) Angiver MIME-typen for ressourcen. Dette hjælper browseren med at vælge det korrekte ressourceformat, især for skrifttyper.
crossorigin="anonymous": (Kræves for skrifttyper, der indlæses fra en anden oprindelse) Angiver CORS-tilstanden for anmodningen. Hvis du indlæser skrifttyper fra et CDN, skal du sandsynligvis bruge denne attribut.

Eksempel: Forudindlæsning af en skrifttype

Forestil dig, at du har en brugerdefineret skrifttype kaldet 'OpenSans', der bruges på din hjemmeside. Uden preload opdager browseren først denne skrifttype efter at have fortolket CSS-filen. Dette kan forårsage en forsinkelse i gengivelsen af teksten med den korrekte skrifttype. Ved at forudindlæse skrifttypen kan du eliminere denne forsinkelse.

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

Eksempel: Forudindlæsning af en kritisk CSS-fil

Hvis din hjemmeside har en kritisk CSS-fil, der er essentiel for at gengive den første visning, kan forudindlæsning af den markant forbedre den oplevede ydeevne.

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

Bedste fremgangsmåder for Preload

Prioriter kritiske ressourcer: Forudindlæs kun ressourcer, der er essentielle for den indledende sideindlæsning. Overdreven brug af preload kan have en negativ indvirkning på ydeevnen.
Brug den korrekte as-attribut: Angiv altid den korrekte as-attribut for at sikre, at browseren håndterer ressourcen korrekt.
Inkluder type-attribut: Inkluder type-attributten for at hjælpe browseren med at vælge det korrekte ressourceformat.
Brug crossorigin til Cross-Origin-skrifttyper: Når du indlæser skrifttyper fra en anden oprindelse, skal du sørge for at inkludere crossorigin-attributten.
Test ydeevne: Test altid virkningen af preload på ydeevnen for at sikre, at det faktisk forbedrer indlæsningstiderne. Brug værktøjer som Google PageSpeed Insights eller WebPageTest til at måle effekten.

Prefetch: Forudse fremtidige behov

Hvad er Prefetch?

Prefetch er et ressourcehint, der fortæller browseren, at den skal hente ressourcer, der sandsynligvis vil være nødvendige for fremtidige navigationer eller interaktioner. I modsætning til preload, der fokuserer på ressourcer, der er nødvendige for den aktuelle side, forudser prefetch brugerens næste træk. Dette er især nyttigt til at forbedre indlæsningshastigheden for efterfølgende sider eller komponenter.

Hvornår skal man bruge Prefetch

Brug prefetch til:

Næste sides ressourcer: Hvis du ved, at brugeren sandsynligvis vil navigere til en specifik side næste gang, skal du forudhente dens ressourcer.
Ressourcer til brugerinteraktioner: Hvis en brugerinteraktion udløser indlæsning af specifikke ressourcer (f.eks. et modalvindue, en formular), skal du forudhente disse ressourcer.
Billeder og aktiver på andre sider: Forudindlæs billeder eller aktiver, der bruges på andre sider, som brugeren sandsynligvis vil besøge.

Sådan implementeres Prefetch

Du kan implementere prefetch ved hjælp af <link>-tagget i <head>-delen af dit HTML-dokument:

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

Forklaring:

rel="prefetch": Angiver, at browseren skal forudhente ressourcen.
href="/path/to/resource": URL'en til den ressource, der skal forudhentes.

Eksempel: Forudhentning af den næste sides ressourcer

Hvis din hjemmeside har et klart brugerflow, såsom en flertrinsformular, kan du forudhente ressourcerne til det næste trin, når brugeren er på det aktuelle trin.

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

Eksempel: Forudhentning af ressourcer til et modalvindue

Hvis din hjemmeside bruger et modalvindue, der indlæser yderligere ressourcer, når det åbnes, kan du forudhente disse ressourcer for at sikre en problemfri brugeroplevelse.

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

Bedste fremgangsmåder for Prefetch

Brug sparsomt: Prefetch bør bruges sparsomt, da det kan forbruge båndbredde og ressourcer, selvom brugeren ikke har brug for de forudhentede ressourcer.
Prioriter sandsynlige navigationer: Forudhent ressourcer til sider eller interaktioner, der er mest sandsynlige at forekomme.
Overvej netværksforhold: Prefetch er bedst egnet til brugere med stabile og hurtige internetforbindelser. Undgå at forudhente store ressourcer til brugere på langsomme eller afregnede forbindelser. Du kan bruge Network Information API til at registrere brugerens forbindelsestype og justere forudhentningen i overensstemmelse hermed.
Overvåg ydeevne: Overvåg virkningen af forudhentning på din hjemmesides ydeevne for at sikre, at det giver en nettogevinst.
Udnyt dynamisk forudhentning: Implementer forudhentning dynamisk baseret på brugeradfærd og analysedata. For eksempel kan du forudhente ressourcer til sider, der ofte besøges af brugere, der i øjeblikket er på den aktuelle side.

Preconnect: Etablering af tidlige forbindelser

Hvad er Preconnect?

Preconnect er et ressourcehint, der giver dig mulighed for at etablere tidlige forbindelser til vigtige tredjepartsservere. Etablering af en forbindelse involverer flere trin, herunder DNS-opslag, TCP-håndtryk og TLS-forhandling. Disse trin kan tilføje betydelig latenstid til indlæsningen af ressourcer fra disse servere. Preconnect giver dig mulighed for at starte disse trin i baggrunden, så når browseren har brug for at hente en ressource fra serveren, er forbindelsen allerede etableret.

Hvornår skal man bruge Preconnect

Brug preconnect til:

Tredjepartsservere: Servere, der hoster skrifttyper, CDN'er, API'er eller andre ressourcer, som din hjemmeside er afhængig af.
Hyppigt anvendte servere: Servere, der ofte tilgås af din hjemmeside.

Sådan implementeres Preconnect

Du kan implementere preconnect ved hjælp af <link>-tagget i <head>-delen af dit HTML-dokument:

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

Forklaring:

rel="preconnect": Angiver, at browseren skal oprette forbindelse til serveren.
href="https://example.com": URL'en til den server, der skal oprettes forbindelse til.
crossorigin: (Valgfrit, men påkrævet for ressourcer, der indlæses med CORS) Angiver, at forbindelsen kræver CORS.

Eksempel: Forbindelse til Google Fonts

Hvis din hjemmeside bruger Google Fonts, kan forbindelse til https://fonts.gstatic.com reducere latenstiden for skrifttypeindlæsning betydeligt.

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

crossorigin-attributten er afgørende her, fordi Google Fonts bruger CORS til at levere skrifttyperne.

Eksempel: Forbindelse til et CDN

Hvis din hjemmeside bruger et CDN til at levere statiske aktiver, kan forbindelse til CDN'ets værtsnavn reducere latenstiden for indlæsning af disse aktiver.

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

Bedste fremgangsmåder for Preconnect

Brug med omtanke: Forbindelse til for mange servere kan faktisk forringe ydeevnen, da browseren har begrænsede ressourcer til at etablere forbindelser.
Prioriter vigtige servere: Forbind til de servere, der er mest kritiske for din hjemmesides ydeevne.
Overvej DNS-Prefetch: For servere, som du ikke behøver at oprette fuld forbindelse til, men stadig ønsker at løse DNS'en tidligt, kan du overveje at bruge <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch udfører kun DNS-opslaget, hvilket er mindre ressourcekrævende end en fuld preconnect.
Test ydeevne: Test altid virkningen af preconnect på ydeevnen for at sikre, at det giver en nettogevinst.
Kombiner med andre ressourcehints: Brug preconnect sammen med preload og prefetch for at opnå optimal ydeevne. For eksempel kan du oprette forbindelse til den server, der hoster dine skrifttyper, og derefter forudindlæse skrifttypefilerne.

Kombinering af ressourcehints for optimal ydeevne

Den sande styrke ved ressourcehints ligger i at kombinere dem strategisk. Her er et praktisk eksempel:

Forestil dig en hjemmeside, der bruger en brugerdefineret skrifttype, der hostes på et CDN, og indlæser en kritisk JavaScript-fil.

Forbind til CDN'et: Etabler en tidlig forbindelse til CDN'et, der hoster skrifttypen og JavaScript-filen.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Forudindlæs skrifttypen: Prioriter indlæsning af skrifttypen for at forhindre FOUT.

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

Forudindlæs JavaScript-filen: Prioriter indlæsning af JavaScript-filen for at sikre, at den er tilgængelig, når det er nødvendigt.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Værktøjer til analyse af ressourcehints

Flere værktøjer kan hjælpe dig med at analysere effektiviteten af dine ressourcehints:

Google PageSpeed Insights: Giver anbefalinger til optimering af din hjemmesides ydeevne, herunder brugen af ressourcehints.
WebPageTest: Giver dig mulighed for at teste din hjemmesides ydeevne fra forskellige placeringer og netværksforhold.
Chrome DevTools: Netværkspanelet i Chrome DevTools viser timingen af ressourceindlæsning og kan hjælpe dig med at identificere muligheder for optimering.
Lighthouse: Et automatiseret værktøj til at forbedre kvaliteten af websider. Det har audits for ydeevne, tilgængelighed, progressive web apps, SEO og mere.

Almindelige faldgruber og hvordan man undgår dem

Overdreven brug af ressourcehints: Brug af for mange ressourcehints kan have en negativ indvirkning på ydeevnen. Fokuser på de mest kritiske ressourcer.
Forkert as-attribut: Brug af den forkerte as-attribut til preload kan forhindre ressourcen i at blive indlæst korrekt.
Ignorering af CORS: Manglende inkludering af crossorigin-attributten ved indlæsning af ressourcer fra en anden oprindelse kan forårsage indlæsningsfejl.
Manglende test af ydeevne: Test altid virkningen af ressourcehints på ydeevnen for at sikre, at de giver en nettogevinst.
Forkerte stier: Dobbelttjek og sørg for, at alle filstier og URL'er, der er angivet for ressourcehintene, er korrekte, ellers vil det resultere i en fejl.

Fremtiden for ressourcehints

Ressourcehints er i konstant udvikling, med nye funktioner og forbedringer, der tilføjes til browserspecifikationerne. At holde sig opdateret med den seneste udvikling inden for ressourcehints kan hjælpe dig med yderligere at optimere din hjemmesides ydeevne. For eksempel er modulepreload et nyere ressourcehint, der er specielt designet til forudindlæsning af JavaScript-moduler. Desuden giver priority-attributten for ressourcehints dig mulighed for at angive prioriteten for en ressource i forhold til andre ressourcer. Browserstøtte til disse funktioner er stadig i udvikling, så tjek kompatibiliteten, før du implementerer dem.

Konklusion

Ressourcehints er kraftfulde værktøjer til optimering af hjemmesiders indlæsningstider og forbedring af brugeroplevelsen. Ved strategisk at bruge preload, prefetch og preconnect kan du proaktivt informere browseren om kritiske ressourcer, reducere latenstiden og forbedre den oplevede ydeevne af din hjemmeside. Husk at prioritere kritiske ressourcer, bruge ressourcehints med omtanke og altid teste virkningen af dine ændringer på ydeevnen. Ved at følge de bedste fremgangsmåder, der er beskrevet i denne artikel, kan du forbedre din hjemmesides ydeevne markant og give en bedre oplevelse for dine brugere over hele kloden.