Er is veel manieren om webprestaties te verbeteren. Een daarvan is het voorladen van محتوا, dat later nodig is. Prefetchen van CSS, vóór renderen van de volledige pagina of het oplossen van de domeinnaam. We doen alles vooraf en tonen vervolgens het resultaat onmiddellijk! Klinkt geweldig.

Nog beter is dat dit heel eenvoudig te implementeren is. Vijf tags geven de browser de opdracht voor voorafgaande acties:

We zullen kort uitleggen wat ze doen en wanneer je ze moet gebruiken.

Ga naar: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> vertelt de browser om de bron zo snel mogelijk te downloaden en te cachen (bijvoorbeeld een script of stylesheet). Dit is nuttig wanneer de bron binnen een paar seconden na het laden van de pagina nodig is — en je het proces wilt versnellen.

De browser doet niets met de bron na het laden. Scripts worden niet uitgevoerd, stylesheets worden niet toegepast. De bron wordt gewoon gecached en onmiddellijk op aanvraag geleverd.

Syntax

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

href verwijst naar de bron die je wilt downloaden.

as kan alles zijn dat je kunt downloaden in de browser:

style voor stylesheets,
script voor scripts,
font voor lettertypen,
fetch voor bronnen die worden geladen met fetch() of XMLHttpRequest,
volledige lijst zie op MDN.

Het is belangrijk om het attribuut op te geven as – dit helpt de browser om de prioriteiten goed te ordenen en de laadtijden te plannen.

Wanneer te gebruiken

Gebruik preloading wanneer de bron binnenkort nodig is. Bijvoorbeeld:

Niet-standaard lettertypen van een extern bestand:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Standaard comic-sans.woff2 zal pas beginnen met laden nadat het is geladen en geparsed index.css. Om niet zo lang te hoeven wachten, kan het lettertype eerder worden geladen met <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Als je je stijlen scheidt volgens de aanpak Critical CSS in twee delen, kritisch (voor onmiddellijke rendering) en niet-kritisch:
```
/* Inlined critical styles */
```
Met deze aanpak worden niet-kritieke stijlen pas geladen bij het starten van JavaScript, wat een paar seconden na de rendering kan gebeuren. Gebruik in plaats van te wachten op JS <link rel= "preload">, om eerder te beginnen met laden:
```
/* Inlined critical styles */
```

Misbruik preload niet. Als alles tegelijk wordt geladen, zal de site niet magisch versnellen; eerder het tegendeel, het kan de browser hinderen om efficiënt te plannen.

Verwar dit niet met prefetching. Gebruik het niet <link rel= "preload">, als je de bron niet onmiddellijk na het laden van de pagina nodig hebt. Als het later nodig is, bijvoorbeeld voor de volgende pagina, gebruik dan <link rel= "prefetch">.

Details

Dit is een verplichte tag voor de browser (als deze deze ondersteunt), in tegenstelling tot alle andere -tags die met preloaden te maken hebben. De browser is verplicht om de bron te laden die is opgegeven in <link rel="preload">. In andere gevallen kan het preloaden genegeerd worden, bijvoorbeeld als deze op een langzame verbinding werkt.

Prioriteiten. Verschillende bronnen (stijlen, scripts, lettertypen, enz.) worden doorgaans een andere prioriteit toegekend door browsers, zodat ze in de eerste plaats de belangrijkste bronnen laden. In dit geval bepaalt de browser de prioriteit op basis van het attribuut as. Voor de Chrome-browser kun je kijken naar de volledige prioriteitstabel.

prefetch

<link rel= "prefetch"> verzoekt de browser om de bron (bijvoorbeeld een script of stylesheet) op de achtergrond te laden en in de cache op te slaan. De laadsnelheid is laag, zodat belangrijke bronnen niet worden gehinderd. Dit is nuttig als de bron op de volgende pagina nodig is en je deze van tevoren wilt cachen.

Ook hier doet de browser niets met de bron na het laden. Scripts worden niet uitgevoerd, stylesheets worden niet toegepast. De bron wordt gewoon gecachet en onmiddellijk beschikbaar gemaakt op verzoek.

Syntax

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

href verwijst naar de bron die je wilt downloaden.

as kan alles zijn dat je kunt downloaden in de browser:

style voor stylesheets,
script voor scripts,
font voor lettertypen,
fetch voor bronnen die worden geladen met fetch() of XMLHttpRequest,
volledige lijst zie op MDN.

Het is belangrijk om het attribuut op te geven as — dit helpt de browser om prioriteiten correct in te stellen en de laadplanning te optimaliseren.

Wanneer te gebruiken

Voor het laden van bronnen van andere pagina's, als je een bron van een andere pagina nodig hebt en deze van tevoren wilt laden om de rendering van die pagina te versnellen. Bijvoorbeeld:

Je hebt een webwinkel, en 40% van de gebruikers verlaat de hoofdpagina voor de productpagina. Gebruik <link rel= "prefetch">, door CSS- en JS-bestanden te laden voor het weergeven van pagina's met producten.
Je hebt een single-page app, terwijl verschillende pagina's verschillende pakketten laden. Wanneer een gebruiker een pagina bezoekt, kunnen de pakketten voor alle pagina's die eraan zijn gekoppeld vooraf worden geladen.

Waarschijnlijk kan deze tag veilig in elke hoeveelheid worden gebruikt. Browsers plannen meestal prefetch met de laagste prioriteit, zodat het niemand hindert. Houd er alleen rekening mee dat dit de gebruikerstrafiek kost, wat geld kan kosten.

Niet voor urgente verzoeken. Gebruik het niet <link rel= "prefetch">, wanneer de bron binnen enkele seconden nodig is. In dit geval gebruik <link rel= "preload">.

Details

Een optionele tag. De browser is niet verplicht om deze instructie op te volgen, hij kan deze negeren, bijvoorbeeld bij een langzame verbinding.

Prioriteit in Chrome. In Chrome <link rel= "prefetch"> wordt meestal met een minimale prioriteit uitgevoerd (zie volledige prioriteitstabel), dat wil zeggen nadat al het andere is geladen.

preconnect

<link rel= "preconnect"> verzoekt de browser om vooraf verbinding te maken met het domein wanneer je de verbindingsopstelling in de toekomst wilt versnellen.

De browser moet een verbinding tot stand brengen als hij bronnen van een nieuw extern domein ophaalt. Bijvoorbeeld, als het Google Fonts-lettertypen, React van een CDN laadt of een JSON-antwoord van de API-server opvraagt.

Het tot stand brengen van een nieuwe verbinding duurt gewoonlijk enkele honderden milliseconden. Het gebeurt één keer, maar kost alsnog tijd. Als je een verbinding vooraf hebt vastgesteld, bespaar je tijd en laad je sneller bronnen van dit domein.

Syntax

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

href duidt de domeinnaam aan waarvan het IP-adres moet worden bepaald. Dit kan met een voorvoegsel worden aangegeven (https://domain.com) of zonder (//domain.com).

Wanneer te gebruiken

Gebruik voor domeinen die binnenkort nodig zijn om belangrijke stijl, script of afbeelding daar te laden, maar waarvan je nog niet weet wat de URL is. Bijvoorbeeld:

Je applicatie wordt gehost op my-app.com en doet AJAX-verzoeken naar api.my-app.com: je kent de specifieke verzoeken niet van tevoren, omdat deze dynamisch vanuit JS worden gedaan. Hier is het volledig passend om de tag voor voorafgaand verbinden met het domein te gebruiken.
Je applicatie wordt gehost op my-app.com en gebruikt Google Fonts-lettertypen. Deze worden in twee fasen geladen: eerst wordt het CSS-bestand van het domein fonts.googleapis.com, daarna vraagt dit bestand de lettertypen op van fonts.gstatic.com. Je kunt niet weten welke specifieke lettertypebestanden uit fonts.gstatic.com u heeft deze nodig totdat u het CSS-bestand heeft geüpload, dus vooraf kunnen we alleen een voorlopige verbinding tot stand brengen.

Gebruik deze tag om een externe script of stijl iets sneller te laden. door het tot stand brengen van een voorlopige verbinding.

Misbruik het niet.Het tot stand brengen en onderhouden van een verbinding is een kostbare operatie voor zowel de client als de server. Gebruik deze tag maximaal voor 4-6 domeinen.

Details

Een optionele tagDe browser is niet verplicht deze instructie op te volgen en kan deze negeren, bijvoorbeeld als er al veel verbindingen zijn tot stand gebracht of in een andere situatie.

Wat omvat het aansluiten?Om verbinding te maken met elke website moet de browser de volgende stappen doorlopen:

DNS-resolutieZoek het IP-adres van de server (216.58.215.78) voor de opgegeven domeinnaam (google.com).
TCP-handshakeVerzendpakketten (client → server → client) om een TCP-verbinding met de server tot stand te brengen.
TLS-handshake (alleen voor HTTPS-sites)Twee rondes van pakketuitwisseling (client → server → client → server → client) om een veilige TLS-sessie te initiëren.

Opmerking: HTTP/3 zal het handshake-mechanisme verbeteren en versnellen, maar het is nog niet ver gevorderd.

dns-prefetch

<link rel= "dns-prefetch"> verzoekt de browser om de DNS-resolutie voor het domein vooraf uit te voeren, als u binnenkort verbinding wilt maken en de initiële verbinding wilt versnellen.

De browser moet het IP-adres van het domein bepalen als het bronnen van een nieuw extern domein gaat ophalen. Bijvoorbeeld het laden van lettertypen van Google Fonts, React van een CDN of het opvragen van een JSON-respons van de API-server.

Voor elke nieuwe domein duurt de DNS-recordresolutie meestal ongeveer 20−120 ms. Dit beïnvloedt alleen de laadtijd van de eerste resource van dat domein, maar het blijft een vertraging. Door DNS vooraf te resolveren, besparen we tijd en laden we de resource sneller.

Syntax

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

href geeft de domeinnaam aan waarvoor het IP-adres moet worden vastgesteld. U kunt het opgeven met een prefix (https://domain.com) of zonder (//domain.com).

Wanneer te gebruiken

Gebruik voor domeinen die binnenkort nodig zijn om daar resources te laden waarmee de browser niet vooraf bekend is. Bijvoorbeeld:

Je applicatie wordt gehost op my-app.com en doet AJAX-verzoeken naar api.my-app.com: je kent de specifieke verzoeken niet van tevoren, omdat deze dynamisch vanuit JS worden gedaan. Hier is het volledig passend om de tag voor voorafgaand verbinden met het domein te gebruiken.
Je applicatie wordt gehost op my-app.com, en maakt gebruik van lettertypen van Google Fonts. Ze worden in twee stappen geladen: eerst wordt het CSS-bestand van het domein geladen. fonts.googleapis.com, daarna vraagt dit bestand de lettertypen op van fonts.gstatic.com. Je kunt niet weten welke specifieke lettertypebestanden uit fonts.gstatic.com u heeft deze nodig totdat u het CSS-bestand heeft geüpload, dus vooraf kunnen we alleen een voorlopige verbinding tot stand brengen.

Gebruik deze tag om een externe script of stijl iets sneller te laden. door het tot stand brengen van een voorlopige verbinding.

Let op overeenkomstige kenmerken op <link rel= "dns-prefetch"/> en <link rel= "preconnect">Het heeft meestal geen zin om ze samen voor één domein te gebruiken: <link rel= "preconnect"> al inbegrepen <link rel= "dns-prefetch"/> en nog veel meer. Dit kan gerechtvaardigd zijn in twee gevallen:

U wilt oude browsers ondersteunen. <link rel= "dns-prefetch" /> ondersteunt beginnend met IE10 en Safari 5. <link rel= "preconnect"> werd enige tijd ondersteund in Chrome en Firefox, maar werd pas in Safari toegevoegd in 11.1 en wordt nog steeds niet ondersteund in IE/Edge. Als u deze browsers moet ondersteunen, gebruik dan <link rel= "dns-prefetch" /> als een alternatieve optie voor <link rel= "preconnect">.

U wilt de verbinding met meer dan 4-6 domeinen versnellen. Het is niet aanbevolen om de tag <link rel= "preconnect"> met meer dan 4-6 domeinen te gebruiken, omdat het opzetten en onderhouden van de verbinding een kostbare operatie is. <link rel= "dns-prefetch" /> verbruikt minder middelen, dus gebruik het indien nodig.

Details

Een optionele tag. De browser is niet verplicht om deze instructie op te volgen, dus deze kan DNS-resolutie negeren, bijvoorbeeld als er veel van zulke tags op de pagina staan of in een andere situatie.

Wat is DNS. Aan elke server op het internet is een uniek IP-adres gekoppeld, dat eruitziet als 216.58.215.78. In de adresbalk van de browser wordt meestal de naam van de site ingevoerd (bijvoorbeeld, google.com), en DNS-servers (Domain Name System) koppelen deze aan het IP-adres van de server (216.58.215.78).

Om het IP-adres te bepalen, moet de browser een verzoek indienen bij de DNS-server. Dit duurt 20-120 ms bij verbinding met een nieuw derden-domein.

DNS wordt gecachet, hoewel niet erg betrouwbaar. Sommige besturingssystemen en browsers cachen DNS-verzoeken: dit bespaart tijd bij herhaalde verzoeken, maar je kunt niet op caching rekenen. In Linux werkt het meestal helemaal niet. Chrome heeft een DNS-cache, maar deze leeft maar een minuut. Windows cached DNS-antwoorden gedurende vijf dagen.

prerender

<link rel= "prerender"> vraagt de browser om de URL te laden en deze weer te geven op een onzichttabblad. Wanneer de gebruiker op de link klik, moet de pagina onmiddellijk worden weergegeven. Dit is nuttig als je er zeker van bent dat de gebruiker een bepaalde pagina zal bezoeken en je de weergave ervan wilt versnellen.

Ondanks de uitzonderlijke effectiviteit van deze tag (of daardoor) wordt deze in 2019 <link rel= "prerender"> slecht ondersteund door de meeste browsers. Meer informatie in below.

Syntax

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

href verwijst naar de URL waarvoor u de render in de achtergrond wilt starten.

Wanneer te gebruiken

Wanneer u er echt zeker van bent dat de gebruiker naar een bepaalde pagina zal gaan. Als je een 'tunnel' hebt waarbij 70% van de bezoekers van pagina A naar pagina B gaat, dan <link rel= "prerender"> kan het op pagina A deweergave van pagina B aanzienlijk versnellen.

Misbruik het niet.. Vooraf renderen is extreem kostbaar in termen van verkeer en geheugen. Gebruik het niet <link rel= "prerender"> voor meer dan één pagina.

Details

Een optionele tag. De browser is niet verplicht deze instructie op te volgen en kan deze negeren, bijvoorbeeld bij een trage verbinding of onvoldoende vrije geheugenruimte.

Om geheugen te besparen voert Chrome geen volledige weergave uit,, met behulp van 1 bit, gelijk aan 0, alleen NoState preloading.. Dit betekent dat Chrome de pagina en al haar bronnen laadt, maar geen rendering uitvoert en geen JavaScript uitvoert.

Firefox en Safari ondersteunen deze tag helemaal niet. Dit schendt de specificatie niet, aangezien browsers niet verplicht zijn deze instructie op te volgen; het is echter nog steeds jammer. Een implementatiefout in Firefox is al zeven jaar bekend. Er zijn berichten dat Safari deze tag ook niet ondersteunt..

Samenvatting

Gebruik:

<link rel= "preload"> — wanneer je een bron nodig hebt binnen enkele seconden,
<link rel= "prefetch"> — wanneer je een bron op de volgende pagina nodig hebt,
<link rel= "preconnect"> — wanneer je weet dat je binnenkort een bron nodig hebt, maar je kent de volledige URL nog niet,
<link rel= "dns-prefetch"> — soortgelijk, wanneer je weet dat je binnenkort een bron nodig hebt, maar je kent de volledige URL nog niet (voor oudere browsers),
<link rel= "prerender"> — wanneer je zeker weet dat gebruikers naar een bepaalde pagina gaan en je de weergave wilt versnellen.

Bron: habr.com