ProHoster > Blog > administration > Preload, prefetch og andre tags

Preload, prefetch og andre tags

Der er mange måder at forbedre nettets ydeevne på. En af dem er forudindlæsning af indhold, der vil være nødvendigt senere. CSS-forbehandling, fuldside-pre-rendering eller domænenavnsopløsning. Vi gør alt på forhånd, og viser derefter resultatet med det samme! Lyder fedt.

Hvad der er endnu sejere er, at det er meget enkelt implementeret. Fem tags giv browseren en kommando til at udføre foreløbige handlinger:

<link rel="prefetch" href="/da/style.css" as="style" />
<link rel="preload" href="/da/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.

Se: preload · amtmand · Forbind · dns-prefetch · prærender

preload

<link rel= "preload"> beder browseren om at indlæse og cache en ressource (såsom et script eller stylesheet) så hurtigt som muligt. Dette er nyttigt, når der er brug for en ressource et par sekunder efter, at siden er indlæst - og du vil fremskynde processen.

Browseren gør intet med ressourcen efter indlæsning. Scripts udføres ikke, typografiark anvendes ikke. Ressourcen cachelagres simpelthen og stilles straks til rådighed efter anmodning.

syntaks

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

href peger på den ressource, du vil downloade.

as kan være alt, der kan downloades i browseren:

  • style til style sheets,
  • script til scripts,
  • font til skrifttyper,
  • fetch for ressourcer indlæst vha fetch() eller XMLHttpRequest,
  • se hele listen på MDN.

Det er vigtigt at specificere attributten as – dette hjælper browseren med at prioritere og planlægge downloads korrekt.

Hvornår skal du bruge det?

Brug forhåndsindlæsning, når ressourcen er nødvendig i en meget nær fremtid. For eksempel:

  • Ikke-standard skrifttyper fra en ekstern fil: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Som standard comic-sans.woff2 begynder først at indlæse efter download og parsing index.css. For at undgå at vente så længe, ​​kan du downloade skrifttypen tidligere vha <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Hvis du adskiller dine stilarter efter tilgangen Kritisk CSS i to dele, kritisk (til øjeblikkelig gengivelse) og ikke-kritisk: 
    <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 kun begynde at indlæses, når JavaScript kører, hvilket kan ske få sekunder efter gengivelsen. I stedet for at vente JS brug <link rel= "preload">for at begynde at downloade tidligere:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/da/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Overbrug ikke preloading. Hvis du indlæser alt i en række, vil webstedet ikke på magisk vis fremskynde; tværtimod forhindrer det browseren i at planlægge sit arbejde korrekt.

Ikke at forveksle med forhåndshentning. Brug ikke <link rel= "preload">, hvis du ikke har brug for ressourcen umiddelbart efter, at siden er indlæst. Har du brug for det senere, for eksempel til næste side, så brug <link rel= "prefetch">.

Detaljer

Dette er et påkrævet tag skal udføres af browseren (hvis den understøtter det), i modsætning til alle andre tags relateret til preloading. Browseren skal downloade den ressource, der er angivet i <link rel="preload">. I andre tilfælde kan den ignorere forudindlæsning, for eksempel hvis den kører på en langsom forbindelse.

prioriteter. Browsere tildeler normalt forskellige prioriteter til forskellige ressourcer (typografier, scripts, skrifttyper osv.) for at indlæse de vigtigste ressourcer først. I dette tilfælde bestemmer browseren prioritet efter attribut as. For Chrome browser kan du se på fuld prioriteringstabel.

Preload, prefetch og andre tags

amtmand

<link rel= "prefetch"> beder browseren om at downloade og cache en ressource (såsom et script eller typografiark) i baggrunden. Indlæsning sker med lav prioritet, så det forstyrrer ikke vigtigere ressourcer. Dette er nyttigt, hvis ressourcen er nødvendig 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, typografiark anvendes ikke. Ressourcen cachelagres simpelthen og stilles straks til rådighed efter anmodning.

syntaks

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

href peger på den ressource, du vil downloade.

as kan være alt, der kan downloades i browseren:

  • style til style sheets,
  • script til scripts,
  • font til skrifttyper,
  • fetch for ressourcer indlæst vha fetch() eller XMLHttpRequest,
  • se hele listen på MDN.

Det er vigtigt at specificere attributten as - dette hjælper browseren med at prioritere og planlægge downloads korrekt.

Hvornår skal du bruge det?

For at indlæse ressourcer fra andre sider, hvis du har brug for en ressource fra en anden side, og du vil forudindlæse den for derefter at fremskynde gengivelsen af ​​den side. For eksempel:

  • Du har en netbutik, og 40 % af brugerne forlader startsiden for produktsiden. Brug <link rel= "prefetch">, indlæsning af CSS- og JS-filer for at gengive produktsider.
  • Du har en enkeltsideapplikation, og forskellige sider indlæser forskellige pakker. Når en bruger besøger en side, kan pakker til alle de sider, den linker til, forudindlæses.

Det er sandsynligt, at dette tag kan bruges sikkert i ethvert omfang.. Browsere planlægger normalt forhåndshentning med den laveste prioritet, så det generer ingen. Bare husk på, at det forbruger brugertrafik, hvilket kan koste penge.

Ikke til presserende anmodninger. Brug ikke <link rel= "prefetch">, når ressourcen er nødvendig på få sekunder. Brug i dette tilfælde <link rel= "preload">.

Detaljer

Valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion; den kan ignorere den, for eksempel ved en langsom forbindelse.

Prioritet i Chrome. I Chrome <link rel= "prefetch"> udføres normalt med minimum prioritet (se fuld prioriteringstabel), det vil sige efter indlæsning af alt andet.

Forbind

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

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

Etablering af en ny forbindelse tager normalt et par hundrede millisekunder. Det gøres én gang, men det tager stadig tid. Hvis du har etableret en forbindelse på forhånd, sparer du tid og downloader ressourcer fra dette domæne hurtigere.

syntaks

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

href angiver det domænenavn, som du vil bestemme IP-adressen for. Kan angives med et præfiks (https://domain.com) eller uden det (//domain.com).

Hvornår skal du bruge det?

Bruges til domæner, der snart bliver nødvendige at downloade en vigtig stilart, et script eller et billede derfra, men du kender ikke ressourcens URL endnu. For eksempel:

  • Din applikation er hostet på my-app.com og laver AJAX-anmodninger til api.my-app.com: Du kender ikke de specifikke forespørgsler på forhånd, fordi de er lavet dynamisk fra JS. Her er det ganske passende at bruge et tag til at pre-connecte til domænet.
  • Din applikation er hostet på my-app.com og bruger Google Fonts. De downloades i to trin: Først downloades CSS-filen fra domænet fonts.googleapis.com, så anmoder denne fil om skrifttyper med fonts.gstatic.com. Du kan ikke vide, hvilke specifikke skrifttypefiler er fra fonts.gstatic.com du skal bruge, indtil du indlæser CSS-filen, så vi kan kun lave en foreløbig forbindelse på forhånd.

Brug dette tag til at fremskynde noget tredjepartsscript eller style lidt på grund af på forhånd etableret forbindelse.

Må ikke misbruges. Etablering og vedligeholdelse af en forbindelse er en dyr operation for både klienten og serveren. Brug dette tag til maksimalt 4-6 domæner.

Detaljer

Valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion og kan ignorere den, for eksempel hvis der allerede er etableret mange forbindelser eller i andre tilfælde.

Hvad omfatter forbindelsesprocessen?. For at oprette forbindelse til hvert websted skal browseren gøre følgende:

  • DNS-opløsning. Find serverens IP-adresse (216.58.215.78) for det angivne domænenavn (google.com).
  • TCP håndtryk. Udveksle pakker (klient → server → klient) for at starte en TCP-forbindelse med serveren.
  • TLS-håndtryk (kun HTTPS-websteder). To runder med pakkeudveksling (klient → server → klient → server → klient) for at starte en sikker TLS-session.

Bemærk: HTTP/3 vil forbedre og fremskynde håndtryksmekanismen, men det er stadig langt væk.

dns-prefetch

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

Browseren skal bestemme domænets IP-adresse, hvis den vil hente ressourcer fra et nyt tredjepartsdomæne. For eksempel indlæsning af Google Fonts, React-skrifttyper fra en CDN eller anmodning om et JSON-svar fra en API-server.

For hvert nyt domæne tager DNS-postopløsning typisk omkring 20-120 ms. Dette påvirker kun indlæsningen af ​​den første ressource fra et givet domæne, men introducerer stadig en forsinkelse. Hvis vi udfører DNS-opløsning på forhånd, sparer vi tid og indlæser ressourcen hurtigere.

syntaks

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

href angiver det domænenavn, som du vil indstille IP-adressen for. Kan angives med et præfiks (https://domain.com) eller uden det (//domain.com).

Hvornår skal du bruge det?

Bruges til domæner, der snart bliver nødvendige at downloade ressourcer derfra, som browseren ikke kender til på forhånd. For eksempel:

  • Din applikation er hostet på my-app.com og laver AJAX-anmodninger til api.my-app.com: Du kender ikke de specifikke forespørgsler på forhånd, fordi de er lavet dynamisk fra JS. Her er det ganske passende at bruge et tag til at pre-connecte til domænet.
  • Din applikation er hostet på my-app.com, og bruger Google Fonts. De downloades i to trin: Først downloades CSS-filen fra domænet fonts.googleapis.com, så anmoder denne fil om skrifttyper med fonts.gstatic.com. Du kan ikke vide, hvilke specifikke skrifttypefiler er fra fonts.gstatic.com du skal bruge den, indtil du indlæser CSS-filen, så vi kan kun lave en foreløbig forbindelse på forhånd.

Brug dette tag til at fremskynde noget tredjepartsscript eller style lidt på grund af på forhånd etableret forbindelse.

Bemærk venligst lignende egenskaber til <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Det giver normalt ikke mening at bruge dem sammen til ét domæne: <link rel= "preconnect"> omfatter allerede <link rel= "dns-prefetch"/> og meget mere. Dette kan begrundes i to tilfælde:

  • Vil du understøtte ældre browsere?. <link rel= "dns-prefetch" /> støttet af siden IE10 og Safari 5. <link rel= "preconnect"> blev understøttet i et stykke tid i Chrome og Firefox, men blev kun tilføjet til Safari i 11.1 og stadig ikke understøttet i IE/Edge. Hvis du har brug for at understøtte disse browsere, så brug <link rel= "dns-prefetch" /> som backup mulighed for <link rel= "preconnect">.
  • Du ønsker at fremskynde forbindelser til mere end 4-6 domæner. Tag <link rel= "preconnect"> Det anbefales ikke at bruge med mere end 4-6 domæner, da etablering og vedligeholdelse af en forbindelse er en dyr operation. <link rel= "dns-prefetch" /> bruger færre ressourcer, så brug det evt.

Detaljer

Valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion, så den udfører muligvis ikke DNS-opløsning, 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, som ser ud 216.58.215.78. Navnet på webstedet indtastes normalt i browserens adresselinje (f.eks. google.com), og DNS-servere (Domain Name System) matcher det med serverens IP-adresse (216.58.215.78).

For at bestemme en IP-adresse skal browseren forespørge på DNS-serveren. Det tager 20−120 ms, når der oprettes forbindelse til et nyt tredjepartsdomæne.

DNS er cachelagret, selvom det ikke er særlig pålideligt. Nogle operativsystemer og browsere cacherer DNS-forespørgsler: Dette vil spare tid på gentagne forespørgsler, men caching kan ikke stole på. På Linux virker det normalt slet ikke. Chrome har en DNS-cache, men den varer kun et minut. Windows cacherer DNS-svar i fem dage.

prærender

<link rel= "prerender"> beder browseren om at downloade URL'en og vise den på en usynlig fane. Når brugeren klikker på linket, skal siden vises med det samme. Dette er nyttigt, hvis du er sikker på, at brugeren vil besøge en bestemt side og vil fremskynde dens visning.

På trods af (eller på grund af) den usædvanlige effektivitet af dette tag, i 2019 <link rel= "prerender"> dårligt understøttet i større browsere. Se flere detaljer. nedenfor.

syntaks

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

href peger på den URL, du vil begynde at gengive i baggrunden.

Hvornår skal du bruge det?

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

Må ikke misbruges. Pre-rendering er ekstremt dyrt med hensyn til båndbredde og hukommelse. Brug ikke <link rel= "prerender"> for mere end én side.

Detaljer

Valgfrit tag. Browseren er ikke forpligtet til at følge denne instruktion og kan ignorere den, for eksempel ved en langsom forbindelse, eller når der ikke er tilstrækkelig ledig hukommelse.

For at spare hukommelse Chrome udfører ikke fuld gengivelseOg forudindlæs kun NoState. Det betyder, at Chrome indlæser siden og alle dens ressourcer, men ikke gengiver eller udfører JavaScript.

Firefox og Safari understøtter slet ikke dette tag. Dette overtræder ikke specifikationen, da browsere ikke er forpligtet til at følge denne instruktion; men stadig trist. Implementeringsfejl Firefox har været åben i syv år. Der er rapporter om, at Safari understøtter heller ikke dette tag.

Resumé

Brug:

  • <link rel= "preload"> - når du har brug for en ressource på få sekunder
  • <link rel= "prefetch"> - når du har brug for ressourcen på næste side
  • <link rel= "preconnect"> - når du ved, at du snart skal bruge en ressource, men du endnu ikke kender dens fulde URL
  • <link rel= "dns-prefetch"> - på samme måde, når du ved, at du snart skal bruge en ressource, men du endnu ikke kender dens fulde URL (for ældre browsere)
  • <link rel= "prerender"> — når du er sikker på, at brugere vil gå til en bestemt side, og du vil fremskynde dens visning

Kilde: www.habr.com

Tilføj en kommentar