Det er mange måter å forbedre nettytelsen på. En av dem er forhåndsinnlasting av innhold som vil være nødvendig senere. CSS-forbehandling, forhåndsgjengivelse av helside eller oppløsning av domenenavn. Vi gjør alt på forhånd, og viser deretter resultatet umiddelbart! Høres kult ut.

Det som er enda kulere er at det er veldig enkelt implementert. Fem tagger gi nettleseren en kommando for å utføre foreløpige handlinger:

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

La oss kort forklare hva de gjør og når de skal brukes.

Hoppe til: forspenning · prefetch · forhåndskoble · dns-prefetch · forhåndsgjengivelse

forspenning

<link rel= "preload"> ber nettleseren laste inn og hurtigbufre en ressurs (som et skript eller et stilark) så snart som mulig. Dette er nyttig når en ressurs er nødvendig noen sekunder etter at siden er lastet inn – og du vil fremskynde prosessen.

Nettleseren gjør ingenting med ressursen etter innlasting. Skript blir ikke utført, stilark brukes ikke. Ressursen bufres ganske enkelt og gjøres umiddelbart tilgjengelig på forespørsel.

syntaks

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

href peker på ressursen du vil laste ned.

as kan være alt som kan lastes ned i nettleseren:

style for stilark,
script for skript,
font for fonter,
fetch for ressurser lastet ved hjelp av fetch() eller XMLHttpRequest,
se hele listen på MDN.

Det er viktig å spesifisere attributtet as – dette hjelper nettleseren med å prioritere og planlegge nedlastinger riktig.

Når skal brukes

Bruk forhåndsinnlasting når ressursen er nødvendig i nær fremtid. For eksempel:

Ikke-standard fonter fra en ekstern fil:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Som standard comic-sans.woff2 vil begynne å laste først etter nedlasting og parsing index.css. For å unngå å vente så lenge, kan du laste ned skriften tidligere ved å bruke <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```

Hvis du skiller stilene dine i henhold til tilnærmingen Kritisk CSS i to deler, kritisk (for umiddelbar gjengivelse) 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 tilnærmingen vil ikke-kritiske stiler først begynne å laste når JavaScript kjører, noe som kan skje noen sekunder etter gjengivelsen. I stedet for å vente JS bruk <link rel= "preload">for å begynne å laste ned tidligere:

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

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

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

Ikke overbruk forhåndslasting. Hvis du laster inn alt på rad, vil ikke nettstedet på magisk vis øke hastigheten, tvert imot vil det forhindre nettleseren i å planlegge arbeidet riktig.

For ikke å forveksle med forhåndshenting. Ikke bruk <link rel= "preload">, hvis du ikke trenger ressursen umiddelbart etter at siden er lastet inn. Hvis du trenger det senere, for eksempel til neste side, så bruk <link rel= "prefetch">.

detaljer

Dette er et obligatorisk merke skal kjøres av nettleseren (hvis den støtter det), i motsetning til alle andre tagger relatert til forhåndslasting. Nettleseren må laste ned ressursen spesifisert i <link rel="preload">. I andre tilfeller kan den ignorere forhåndsinnlasting, for eksempel hvis den kjører på en treg tilkobling.

Prioriteringer. Nettlesere tildeler vanligvis forskjellige prioriteter til forskjellige ressurser (stiler, skript, fonter osv.) for å laste de viktigste ressursene først. I dette tilfellet bestemmer nettleseren prioritet etter attributt as. For Chrome-nettleseren kan du se på full prioritetstabell.

prefetch

<link rel= "prefetch"> ber nettleseren laste ned og hurtigbufre en ressurs (som et skript eller et stilark) i bakgrunnen. Lasting skjer med lav prioritet, slik at det ikke forstyrrer viktigere ressurser. Dette er nyttig hvis ressursen er nødvendig på neste side og du ønsker å bufre den på forhånd.

Også her gjør nettleseren ingenting med ressursen etter innlasting. Skript blir ikke utført, stilark brukes ikke. Ressursen bufres og gjøres umiddelbart tilgjengelig på forespørsel.

syntaks

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

href peker på ressursen du vil laste ned.

as kan være alt som kan lastes ned i nettleseren:

style for stilark,
script for skript,
font for fonter,
fetch for ressurser lastet ved hjelp av fetch() eller XMLHttpRequest,
se hele listen på MDN.

Det er viktig å spesifisere attributtet as - Dette hjelper nettleseren med å prioritere og planlegge nedlastinger riktig.

Når skal brukes

For å laste ressurser fra andre sider, hvis du trenger en ressurs fra en annen side, og du vil forhåndslaste den for å øke hastigheten på gjengivelsen av den siden. For eksempel:

Du har en nettbutikk, og 40 % av brukerne forlater hjemmesiden til produktsiden. Bruk <link rel= "prefetch">, laster CSS- og JS-filer for å gjengi produktsider.
Du har en enkeltsideapplikasjon, og forskjellige sider laster forskjellige pakker. Når en bruker besøker en side, kan pakker for alle sidene den lenker til forhåndslastes.

Det er sannsynlig at denne taggen kan brukes trygt i noen grad.. Nettlesere planlegger vanligvis forhåndshenting med lavest prioritet, så det plager ingen. Bare husk at det forbruker brukertrafikk, noe som kan koste penger.

Ikke for presserende forespørsler. Ikke bruk <link rel= "prefetch">, når ressursen er nødvendig om noen få sekunder. I dette tilfellet, bruk <link rel= "preload">.

detaljer

Valgfri tag. Nettleseren er ikke pålagt å følge denne instruksjonen; den kan ignorere den, for eksempel ved en treg tilkobling.

Prioritet i Chrome. I Chrome <link rel= "prefetch"> vanligvis utført med minimum prioritet (se full prioritetstabell), det vil si etter å ha lastet alt annet.

forhåndskoble

<link rel= "preconnect"> ber nettleseren om å koble til domenet på forhånd når du ønsker å fremskynde tilkoblingsoppsettet i fremtiden.

Nettleseren må opprette en tilkobling hvis den henter ressurser fra et nytt tredjepartsdomene. For eksempel, hvis den laster inn Google Fonts, React-fonter fra en CDN eller ber om et JSON-svar fra en API-server.

Å etablere en ny tilkobling tar vanligvis noen hundre millisekunder. Det gjøres en gang, men tar likevel tid. Hvis du har opprettet en tilkobling på forhånd, vil du spare tid og laste ned ressurser fra dette domenet raskere.

syntaks

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

href angir domenenavnet du vil bestemme IP-adressen for. Kan spesifiseres med et prefiks (https://domain.com) eller uten det (//domain.com).

Når skal brukes

Bruk for domener som vil være nødvendig snart for å laste ned en viktig stil, et skript eller et bilde derfra, men du vet ikke ressurs-URLen ennå. For eksempel:

Applikasjonen din er vert på my-app.com og gjør AJAX-forespørsler til api.my-app.com: Du kjenner ikke de spesifikke spørringene på forhånd fordi de er laget dynamisk fra JS. Her er det ganske hensiktsmessig å bruke en tag for å forhåndskoble til domenet.
Applikasjonen din er vert på my-app.com og bruker Google Fonts. De lastes ned i to trinn: Først lastes CSS-filen ned fra domenet fonts.googleapis.com, så ber denne filen om skrifter med fonts.gstatic.com. Du kan ikke vite hvilke spesifikke skriftfiler er fra fonts.gstatic.com du trenger til du laster CSS-filen, så vi kan bare lage en foreløpig tilkobling på forhånd.

Bruk denne taggen for å øke hastigheten på et tredjepartsskript eller stil litt på grunn av forhåndsetablert forbindelse.

Ikke bruk for mye. Å etablere og vedlikeholde en tilkobling er en kostbar operasjon for både klienten og serveren. Bruk denne taggen for maksimalt 4-6 domener.

detaljer

Valgfri tag. Nettleseren er ikke pålagt å følge denne instruksjonen og kan ignorere den, for eksempel hvis mange tilkoblinger allerede er etablert eller i andre tilfeller.

Hva inkluderer tilkoblingsprosessen?. For å koble til hvert nettsted må nettleseren gjøre følgende:

DNS-oppløsning. Finn serverens IP-adresse (216.58.215.78) for det angitte domenenavnet (google.com).
TCP-håndtrykk. Utveksle pakker (klient → server → klient) for å starte en TCP-forbindelse med serveren.
TLS-håndtrykk (kun HTTPS-nettsteder). To runder med pakkeutveksling (klient → server → klient → server → klient) for å starte en sikker TLS-sesjon.

Merk: HTTP/3 vil forbedre og øke hastigheten på håndtrykkmekanismen, men det er fortsatt et stykke unna.

dns-prefetch

<link rel= "dns-prefetch"> ber nettleseren om å utføre DNS-oppløsning for domenet på forhånd hvis du snart skal koble til det og vil øke hastigheten på den første tilkoblingen.

Nettleseren må bestemme domenets IP-adresse hvis den vil hente ressurser fra et nytt tredjepartsdomene. For eksempel å laste inn Google Fonts, React-fonter fra en CDN eller be om et JSON-svar fra en API-server.

For hvert nytt domene tar DNS-postoppløsningen vanligvis omtrent 20-120 ms. Dette påvirker kun lasting av den første ressursen fra et gitt domene, men introduserer likevel en forsinkelse. Hvis vi utfører DNS-oppløsning på forhånd, vil vi spare tid og laste ressursen raskere.

syntaks

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

href angir domenenavnet du vil angi IP-adressen for. Kan spesifiseres med et prefiks (https://domain.com) eller uten det (//domain.com).

Når skal brukes

Bruk for domener som vil være nødvendig snart å laste ned ressurser derfra som nettleseren ikke vet om på forhånd. For eksempel:

Applikasjonen din er vert på my-app.com og gjør AJAX-forespørsler til api.my-app.com: Du kjenner ikke de spesifikke spørringene på forhånd fordi de er laget dynamisk fra JS. Her er det ganske hensiktsmessig å bruke en tag for å forhåndskoble til domenet.
Applikasjonen din er vert på my-app.com, og bruker Google Fonts. De lastes ned i to trinn: Først lastes CSS-filen ned fra domenet fonts.googleapis.com, så ber denne filen om skrifter med fonts.gstatic.com. Du kan ikke vite hvilke spesifikke skriftfiler er fra fonts.gstatic.com du trenger den til du laster inn CSS-filen, så vi kan bare lage en foreløpig tilkobling på forhånd.

Bruk denne taggen for å øke hastigheten på et tredjepartsskript eller stil litt på grunn av forhåndsetablert forbindelse.

Vær oppmerksom på lignende egenskaper som <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Det er vanligvis ikke fornuftig å bruke dem sammen for ett domene: <link rel= "preconnect"> inkluderer allerede <link rel= "dns-prefetch"/> og mye mer. Dette kan begrunnes i to tilfeller:

Vil du støtte eldre nettlesere?. <link rel= "dns-prefetch" /> støttet av siden IE10 og Safari 5. <link rel= "preconnect"> ble støttet en stund i Chrome og Firefox, men ble bare lagt til Safari i 11.1 og fortsatt ikke støttet i IE/Edge. Hvis du trenger å støtte disse nettleserne, bruk <link rel= "dns-prefetch" /> som backup-alternativ for <link rel= "preconnect">.

Du vil øke hastigheten på tilkoblinger til mer enn 4-6 domener. stikkord <link rel= "preconnect"> Det anbefales ikke å bruke med mer enn 4-6 domener, siden etablering og vedlikehold av en tilkobling er en kostbar operasjon. <link rel= "dns-prefetch" /> bruker mindre ressurser, så bruk det om nødvendig.

detaljer

Valgfri tag. Nettleseren er ikke pålagt å følge denne instruksjonen, så det kan hende den ikke utfører DNS-oppløsning, for eksempel hvis det er mange slike tagger på siden eller i andre tilfeller.

Hva er DNS. Hver server på Internett har en unik IP-adresse, som ser ut som 216.58.215.78. Navnet på nettstedet skrives vanligvis inn i adressefeltet til nettleseren (f.eks. google.com), og DNS-servere (Domain Name System) matcher den med serverens IP-adresse (216.58.215.78).

For å finne en IP-adresse, må nettleseren spørre DNS-serveren. Det tar 20−120 ms når du kobler til et nytt tredjepartsdomene.

DNS er bufret, men ikke veldig påliteligNoen operativsystemer og nettlesere mellomlagrer DNS-forespørsler: dette vil spare tid når du gjentar forespørsler, men mellomlagring kan ikke stoles på. Linux Det fungerer vanligvis ikke i det hele tatt. Chrome har en DNS-buffer, men den varer bare i ett minutt. Windows Lagrer DNS-svar i fem dager.

forhåndsgjengivelse

<link rel= "prerender"> ber nettleseren laste ned URL-en og vise den i en usynlig fane. Når brukeren klikker på lenken, skal siden vises umiddelbart. Dette er nyttig hvis du er sikker på at brukeren vil besøke en bestemt side og ønsker å fremskynde visningen.

Til tross for (eller på grunn av) den eksepsjonelle effektiviteten til denne taggen, i 2019 <link rel= "prerender"> dårlig støttet i store nettlesere. Se flere detaljer. under.

syntaks

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

href peker på URL-en du vil begynne å gjengi i bakgrunnen.

Når skal brukes

Når du er virkelig sikker på at brukeren vil gå til en bestemt side. Hvis du har en "tunnel" der 70 % av besøkende til side A går til side B, da <link rel= "prerender"> på side A vil bidra til å vise side B veldig raskt.

Ikke bruk for mye. Pre-rendering er ekstremt dyrt når det gjelder båndbredde og minne. Ikke bruk <link rel= "prerender"> for mer enn én side.

detaljer

Valgfri tag. Nettleseren er ikke pålagt å følge denne instruksjonen og kan ignorere den, for eksempel ved en treg tilkobling eller når det ikke er nok ledig minne.

For å spare minne Chrome utfører ikke full gjengivelseOg bare forhåndslast NoState. Dette betyr at Chrome laster inn siden og alle dens ressurser, men ikke gjengir eller kjører JavaScript.

Firefox og Safari støtter ikke denne taggen i det hele tatt. Dette bryter ikke med spesifikasjonen, siden nettlesere ikke er pålagt å følge denne instruksjonen; men fortsatt trist. Implementeringsfeil Firefox har vært åpen i syv år. Det er rapporter om at Safari støtter ikke denne taggen heller.

Oppsummering

Bruk:

<link rel= "preload"> - når du trenger en ressurs på noen få sekunder
<link rel= "prefetch"> - når du trenger ressursen på neste side
<link rel= "preconnect"> - når du vet at du snart trenger en ressurs, men du vet ennå ikke den fullstendige URL-adressen
<link rel= "dns-prefetch"> - på samme måte, når du vet at du snart trenger en ressurs, men du ennå ikke kjenner den fullstendige URL-adressen (for eldre nettlesere)
<link rel= "prerender"> — når du er sikker på at brukere vil gå til en bestemt side, og du vil fremskynde visningen

Kilde: www.habr.com