Links prefetchen

Een methode om het laden van een webpagina te versnellen is door de webserver alvast te melden dat er een verzoek aankomt om een bestand naar de gebruiker te versturen. Dat heet prefetchen.

Prefetchen doe je met een <link>-tag, die je opneemt in de HEAD. Er zijn twee attributen, die allebei noodzakelijk zijn: rel en href.

De <link>-tag ziet er als volgt uit:

Deze tag heeft geen sluit-tag.
Het attribuut rel legt de relatie vast tussen het huidige document en het bestand in href. De URL in href kan zowel binnen als buiten het huidige domein zijn.

Dit formaat komt je wellicht bekend voor, want je gebruikt het ook het linken van stylesheets:

Behalve voor stylesheets kun je dit ook gebruiken om bestanden die 'straks' nodig zijn, alvast aan te haken op de server. Mogelijkheden voor het attribuut rel zijn:
 
• dns-prefetch   Specificeert dat de browser alvast het IP-adres van de bron in href moet ophalen van een DNS-server.
• preconnect   Specificeert dat de browser alvast de bron in href moet aanhaken, maar nog niet moet downloaden.
• prefetch   Specificeert dat de browser alvast de bron in href moet downloaden en in de browser-cache moet opslaan, omdat deze in de volgende navigatie-stap waarschijn­lijk nodig zal zijn.
• preload   Specificeert dat de browser alvast de bron in href moet downloaden en in de browser-cache moet opslaan, omdat deze in het huidige document nodig is.
• prerender   Specificeert dat de browser alvast de bron in href in de achtergrond moet downloaden en in het geheugen moet opslaan, omdat deze snel nodig zal zijn. Wees er op bedacht dat dit rekencapaciteit vraagt, die ten koste gaat van andere processen op de PC.

Opmerking: Voor het pre-loaden van audio- en video-bestanden beschikken de tags <audio> en <video> over eigen attributen. In voorkomende gevallen hebben die de voorkeur.

Opmerking: De ondersteuning voor alle mogelijkheden verschilt nogal per browser. Alleen DNS-prefetch wordt door alle grote browsers ondersteund. prefetch wordt niet ondersteund door Safari. preload wordt alleen ondersteund door Chrome. preconnect wordt niet ondersteund door Safari en Internet Explorer, Edge ondersteunt het maar beperkt.

In de praktijk zijn alleen dns-prefetch en prefetch bruikbaar. Goede ondersteuning voor de overige mogelijkheden van rel zal nog wel even op zich laten wachten (als die er ooit komt).