Der er Mange måder at forbedre webydelsen på.En af dem er at forudindlæse indhold, der skal bruges senere. Prefetching af CSS, forudindlæsning af hele siden eller opløsning af domænenavnet. Vi gør det hele på forhånd, og så viser vi straks resultatet! Det lyder cool.

Endnu mere fantastisk er, at det er meget enkelt at implementere. Fem <link rel>-tags giver browseren besked om at foretage forudgående handlinger:

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

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

Lad os kort forklare, hvad de gør, og hvornår de skal bruges.

Gå til: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> fortæller browseren, at den hurtigst muligt skal hente og cache ressourcen (for eksempel et script eller en stylesheet). Dette er nyttigt, når ressourcen vil være nødvendig få sekunder efter indlæsningen af siden — og du vil fremskynde processen.

Browseren gør ikke noget med ressourcen efter indlæsningen. Scripts køres ikke, stylesheets anvendes ikke. Ressourcen caches blot og stilles straks til rådighed efter anmodning.

Syntaks

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

href angiver den ressource, du ønsker at downloade.

as kan være hvad som helst, der kan downloades i browseren:

style for stylesheets,
script for scripts,
font for skrifttyper,
fetch for ressourcer, der hentes med fetch() eller XMLHttpRequest,
fuld liste se. på MDN.

Det er vigtigt at angive attributten as — det hjælper browseren med at prioritere og planlægge indlæsningen korrekt.

Hvornår skal man bruge

Brug preload, når ressourcen vil være nødvendig om kort tid. For eksempel:

Skrifttyper fra eksterne filer:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
By default comic-sans.woff2 vil begynde at blive indlæst først efter indlæsning og parsing af index.css. For ikke at vente så længe kan du indlæse skrifttypen tidligere med <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Hvis du opdeler dine styles i henhold til tilgangen Critical CSS i to dele, kritiske (til omgående rendering) og ikke-kritiske:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Med denne tilgang vil ikke-kritiske stilarter begynde at indlæse først, når JavaScript aktiveres, hvilket kan ske et par sekunder efter rendering. I stedet for at vente på JS, brug <link rel="preload">, for at starte indlæsningen tidligere:
```
/* Inline kritiske stilarter */
```

Misbrug ikke preloading. Hvis du indlæser alt muligt, vil hjemmesiden ikke magisk accelerere; tværtimod vil det hindrer browseren i at planlægge arbejdet ordentligt.

Forveksl ikke med prefetching. Brug ikke <link rel="preload">, hvis du ikke har brug for ressourcen straks efter sideindlæsning. Hvis den skal bruges senere, for eksempel til næste side, så brug <link rel= "prefetch">.

Detaljer

Dette er et obligatorisk tag for browseren at udføre (hvis den understøtter det), i modsætning til alle andre tags der er relateret til forhåndsindlæsning. Browseren er forpligtet til at indlæse ressourcen angivet i <link rel="preload">. I andre tilfælde kan den ignorere forhåndsindlæsningen, for eksempel hvis den arbejder på en langsom forbindelse.

Prioriteter. Forskellige ressourcer (stilarter, scripts, skrifttyper osv.) tildeles typisk forskellige prioriteter af browsere, så de vigtigste ressourcer indlæses først. I dette tilfælde bestemmer browseren prioriteten ud fra attributten as. For Chrome-browsere kan du se den komplette prioritets tabel.

prefetch

<link rel= "prefetch"> beder browseren om at indlæse og cache ressourcen (for eksempel et script eller en stylesheet) i baggrunden. Indlæsningen sker med lav prioritet, så det ikke hindrer vigtigere ressourcer. Dette er nyttigt, hvis ressourcen skal bruges på næste side, og du vil cache den på forhånd.

Her gør browseren heller ikke noget med ressourcen efter indlæsning. Scripts udføres ikke, stylesheets anvendes ikke. Ressourcen caches simpelthen og stilles straks til rådighed på anmodning.

Syntaks

<link rel="prefetch" href="/style.css" as="style" />

href angiver den ressource, du ønsker at downloade.

as kan være hvad som helst, der kan downloades i browseren:

style for stylesheets,
script for scripts,
font for skrifttyper,
fetch for ressourcer, der hentes med fetch() eller XMLHttpRequest,
fuld liste se. på MDN.

Det er vigtigt at angive attributten as — det hjælper browseren med at prioritere ordentligt og planlægge indlæsning.

Hvornår skal man bruge

For at indlæse ressourcer fra andre sider, hvis du har brug for en ressourc fra en anden side, og du ønsker at forudindlæse den for at fremskynde rendering af denne side. For eksempel:

Du har en e-handelsbutik, og 40% af brugerne forlader startsiden for en produktside. Brug <link rel= "prefetch">, ved at indlæse CSS- og JS-filer til rendering af sider med produktet.
Du har en enkelt-sides applikation, hvor forskellige sider indlæser forskellige pakker. Når en bruger besøger en bestemt side, kan du forudindlæse pakkerne for alle de sider, som den henviser til.

Dette tag kan sandsynligvis sikkert bruges i hvilken som helst mængde. Browsere planlægger typisk prefetch med lavest prioritet, så det generer ikke nogen. Bare husk, at det bruger brugerens data, hvilket kan koste penge.

Ikke til presserende anmodninger. Brug ikke <link rel= "prefetch">, når ressourcen er nødvendig inden for et par sekunder. I dette tilfælde skal du anvende <link rel="preload">.

Detaljer

Et valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion, den kan ignorere den, for eksempel på en langsom forbindelse.

Prioritet i Chrome. I Chrome <link rel= "prefetch"> udføres normalt med minimal prioritet (se den komplette prioritets tabel), dvs. efter at hele resten er indlæst.

preconnect

<link rel= "preconnect"> beder browseren om at oprette forbindelse til domænet på forhånd, når du ønsker at fremskynde forbindelsesetableringen i fremtiden.

Browseren skal oprette forbindelsen, hvis den henter ressourcer fra et nyt tredjepartsdomæne. For eksempel, hvis den indlæser skrifttyper fra Google Fonts, React fra CDN eller anmoder om et JSON-svar fra API-serveren.

Oprettelse af en ny forbindelse tager normalt et par hundrede millisekunder. Det sker én gang, men tager stadig tid. Hvis du opretter forbindelsen på forhånd, sparer du tid og indlæser ressourcer fra dette domæne hurtigere.

Syntaks

<link rel= "preconnect" href="https://api.my-app.com" />

href angiver domænenavnet, for hvilket IP-adressen skal bestemmes. Du kan angive det med præfiks (https://domain.com) eller uden (//domain.com).

Hvornår skal man bruge

Brug det til domæner, der snart vil være nødvendige til at indlæse vigtig stil, script eller billede derfra, men du kender endnu ikke URL-adressen på ressourcen. For eksempel:

Din applikation hostes på my-app.com og laver AJAX-anmodninger til api.my-app.com: du ved ikke på forhånd de specifikke anmodninger, fordi de gøres dynamisk fra JS. Her er brugen af tagget til forhåndsoprettelse af forbindelsen til domænet passende.
Din applikation hostes på my-app.com og bruger skrifttyper fra Google Fonts. De indlæses i to trin: først indlæses CSS-filen fra domænet fonts.googleapis.com, derefter anmoder denne fil om skrifttyper fra fonts.gstatic.com. Du kan ikke vide, hvilke specifikke skrifttypefiler der kommer fra fonts.gstatic.com du har brug for, indtil du uploader CSS-filen, så vi kan kun oprette en forudgående forbindelse på forhånd.

Brug denne tag for at lidt hurtigere indlæse et tredjeparts script eller stil ved hjælp af forudgående forbindelse.

Misbrug ikke. Etablering og vedligeholdelse af forbindelsen er en kostbar operation både for klienten og serveren. Brug denne tag maks til 4-6 domæner.

Detaljer

Et valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion og kan ignorere den, for eksempel hvis der allerede er oprettet mange forbindelser eller i en anden situation.

Hvad processen med tilslutning indebærer. For at oprette forbindelse til hvert websted skal browseren udføre følgende handlinger:

DNS-opløsning. Find IP-adressen på serveren (216.58.215.78) for det angivne domænenavn (google.com).
TCP-handshake. Pakkeudveksling (klient → server → klient) for at initiere en TCP-forbindelse til serveren.
TLS-handshake (kun for HTTPS-websteder). To runder af pakkeudveksling (klient → server → klient → server → klient) for at initiere en sikker TLS-session.

Bemærk: HTTP/3 vil forbedre og fremskynde handshake-mekanismen, men det er stadig langt.

dns-prefetch

<link rel= "dns-prefetch"> beder browseren om at udføre DNS-opløsningen på forhånd for domænet, hvis du snart vil oprette forbindelse til det og ønsker at fremskynde den indledende forbindelse.

Browseren skal bestemme IP-adressen for domænet, hvis den vil hente nogen ressourcer fra et nyt tredjepartsdomæne. For eksempel at indlæse skrifttyper fra Google Fonts, React fra CDN eller anmode om et JSON-svar fra API-serveren.

For hvert nyt domæne tager det normalt omkring 20-120 ms at opløse DNS-posten. Dette påvirker kun indlæsningen af den første ressource fra dette domæne, men udgør stadig en forsinkelse. Hvis vi udfører DNS-opløsningen på forhånd, sparer vi tid og indlæser ressourcen hurtigere.

Syntaks

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href angiver domænenavnet, for hvilket IP-adressen skal etableres. Kan angives med præfix (https://domain.com) eller uden (//domain.com).

Hvornår skal man bruge

Brug det til domæner, der snart vil være nødvendige for at indlæse ressourcer derfra, som browseren ikke kender på forhånd. For eksempel:

Din applikation hostes på my-app.com og laver AJAX-anmodninger til api.my-app.com: du ved ikke på forhånd de specifikke anmodninger, fordi de gøres dynamisk fra JS. Her er brugen af tagget til forhåndsoprettelse af forbindelsen til domænet passende.
Din applikation hostes på my-app.com, og bruger skrifttyper fra Google Fonts. Disse indlæses i to faser: først indlæses CSS-filen fra domænet, fonts.googleapis.com, derefter anmoder denne fil om skrifttyper fra fonts.gstatic.com. Du kan ikke vide, hvilke specifikke skrifttypefiler der kommer fra fonts.gstatic.com du har brug for, indtil du uploader CSS-filen, så vi kan kun oprette en forudgående forbindelse på forhånd.

Brug denne tag for at lidt hurtigere indlæse et tredjeparts script eller stil ved hjælp af forudgående forbindelse.

Bemærk de lignende karakteristika i <link rel= "dns-prefetch"/> og <link rel= "preconnect">. At anvende dem sammen til et domæne giver normalt ikke mening: <link rel= "preconnect"> allerede inkluderer <link rel= "dns-prefetch"/> og meget mere. Dette kan retfærdiggøres i to tilfælde:

Du ønsker at understøtte gamle browsere. <link rel= "dns-prefetch" /> understøttes begyndende fra IE10 og Safari 5. <link rel= "preconnect"> var understøttet i et stykke tid i Chrome og Firefox, men blev først tilføjet i Safari i 11.1 og understøttes stadig ikke i IE/Edge. Hvis du skal understøtte disse browsere, så brug <link rel= "dns-prefetch" /> som et backup-alternativ for <link rel= "preconnect">.

Du ønsker at accelerere forbindelsen til mere end 4-6 domæner. Taggen <link rel= "preconnect"> anbefales ikke til brug med mere end 4-6 domæner, da oprettelsen og vedligeholdelsen af forbindelsen er en kostbar operation. <link rel= "dns-prefetch" /> forbruger mindre ressourcer, så brug det i tilfælde af behov.

Detaljer

Et valgfrit tag. Browsere er ikke forpligtede til at følge denne instruktion, så de kan undlade at udføre DNS-opslag, for eksempel hvis der er mange sådanne tags på siden eller i andre tilfælde.

Hvad er DNS. Hver server på internettet har en unik IP-adresse, der ser ud som 216.58.215.78. I browserens adresselinje indtastes normalt webstedets navn (for eksempel, google.com), og DNS-servere (Domain Name System) kortlægger det til serverens IP-adresse (216.58.215.78).

For at bestemme IP-adressen skal browseren foretage en anmodning til DNS-serveren. Det tager 20-120 ms ved forbindelse til et nyt eksternt domæne.

DNS caches, selvom det ikke er meget pålideligt. Nogle operativsystemer og browsere cacher DNS-anmodninger: det sparer tid ved gentagne anmodninger, men man kan ikke stole på cachen. I Linux virker det normalt ikke overhovedet. Chrome har en DNS-cache, men den lever kun i et minut. Windows cacher DNS-svar i fem dage.

prerender

<link rel= "prerender"> beder browseren om at indlæse URL'en og vise den på en usynlig fane. Når brugeren klikker på linket, skal siden vises straks. Dette er nyttigt, hvis du er sikker på, at brugeren vil besøge en bestemt side, og du ønsker at fremskynde visningen.

På trods af dette tags enestående effektivitet (eller måske på grund af den), i 2019 <link rel= "prerender"> er den dårligt understøttet i de fleste browsere. Læs mere nedenfor.

Syntaks

<link rel="prerender" href="https://my-app.com/pricing" />

href henviser til URL'en, som du ønsker at køre baggrundsrendering for.

Hvornår skal man bruge

Når du virkelig er sikker på, at brugeren vil gå til en bestemt sideHvis du har en 'tunnel', hvor 70% af besøgende på side A går til side B, så <link rel= "prerender"> vil side A hurtigt hjælpe med at vise side B.

Misbrug ikkeForhåndsrendering er ekstremt dyrt i forhold til trafik og hukommelse. Brug ikke <link rel= "prerender"> mere end til én side.

Detaljer

Et valgfrit tagBrowseren er ikke forpligtet til at følge denne instruktion og kan ignorere den, for eksempel på en langsom forbindelse eller ved utilstrækkelig ledig hukommelse.

For at spare hukommelse udfører Chrome ikke en fuld rendering, og kun preloading NoState. Det betyder, at Chrome indlæser siden og alle dens ressourcer, men ikke udfører renderingen eller kører JavaScript.

Firefox og Safari understøtter slet ikke denne tag. Det bryder ikke specifikationen, da browserne ikke er forpligtet til at følge denne instruktion; men det er stadig ærgerligt. Implementeringsfejlen i Firefox har været åben i syv år. Der er rapporter om, at Safari heller ikke understøtter denne tag.

CV

Brug:

<link rel="preload"> — når du har brug for en ressource om et par sekunder
<link rel= "prefetch"> — når du har brug for en ressource på den næste side
<link rel= "preconnect"> — når du ved, at du snart får brug for en ressource, men endnu ikke kender dens fulde URL
<link rel= "dns-prefetch"> — på samme måde, når du ved, at du snart får brug for en ressource, men endnu ikke kender dens fulde URL (til gamle browsere)
<link rel= "prerender"> — når du er sikker på, at brugerne vil gå til en bestemt side og ønsker at fremskynde dens visning

Kilde: habr.com