Resource hints

Technisch is bovenstaand niet helemaal de correcte uitleg. Je geeft met resource hints namelijk aan, met welke domeinen de browser alvast verbinding moet (gaan) maken. Maar dat doe je uiteraard enkel omdat er bronnen vanaf zo een domein benut zullen worden.

En alhoewel je middels de inzet van resource hints, websites een snelheids-boost zou kunnen geven, is dit geen controle mechanisme in de 100% Google PageSpeed score; je kunt dus zelfs bovenop een 100% score, een nog snellere website afleveren.

Resource hints, achtergrond informatie

Niet zelden maakt een website gebruik van bronnen die extern gehost worden, denk aan jQuery files, Disqus, addThis of shareThis voor social media iconen. Een webbrowser zal proberen om de verbindingen met deze externe servers tijdig tot stand te brengen, maar elke tot stand koming (DNS lookup), neemt tijd in beslag. En niemand anders dan de frontend programmeur, weet welke bronnen het belangrijkst zijn, en wat van secundair belang is.

Primair en secundair

Indien jQuery gebruikt is, zullen aanvullende JavaScript regels vaak gebaseerd zijn op de jQuery syntax, en dus wil je de jQuery framework zo snel mogelijk ingeladen hebben, om bijvoorbeeld aanvullende DOM-mutaties te kunnen doen. Sociale deel mogelijkheden zullen van secundair belang zijn; niet al in de eerste seconden, zal iemand een pagina/bericht delen. Met deze achterliggende gedachte, bepaal je wat direct benodigd is, en wat even kan wachten.

Verschillende resource hints

Er zijn verschillende resource hints in het leven geroepen om de prioriteit aan te geven. Deze verschillende resoure hints, zijn als volgt:

1. dns-prefetch
   Middels de resource hint dns-prefetch, geef je aan dat er bronbestanden vanaf dat domein geserveerd gaan worden. Browsers (die het ondersteunen) dienen een verbinding tot het betreffend domein zo snel mogelijk tot stand te brengen (oftewel, een DNS lookup);
2. preconnect
   De preconnect-methode gaat verder dan de dns-prefetch resource hint, in het tot stand brengen van een verbinding met een andere omgeving. Hierbij ligt de exacte uitvoer echter in handen van de browser; de browser bepaalt of het een preconnect-verzoek honoreert, en welke stappen daadwerkelijk uitgevoerd worden.
3. prefetch
   In tegenstelling tot dns-prefetch, gebruik je de prefetch-methode om een specifiek bronbestand (afbeelding, JS, CSS of zelfs HTML bestand) vooraf in te laden, in voorbereiding op een volgende navigatie. In geval van prefetch, zal de resource tevens door de browser gecached worden. Deze optie is bijvoorbeeld te gebruiken in het geval van font-files, zij het niet dat verschillende browsers verschillende bestands-type voorkeuren hebben. Let wel dat de prefetch resource hint, met lage prioriteit plaats vindt in de browser;
4. prerender
   Deze prerender-methode kan gebruikt worden om een HTML pagina vooraf in te laden. Stel dat je een paginering hebt, en de kans erg groot is dat men naar een volgende pagina navigeert, kun je een pagina vooraf inladen, wat laadtijd bespaart op het moment dat men daadwerkelijk naar een volgende pagina navigeert. In tegenstelling tot prefetch, wordt de betreffende HTML pagina in het geval van prerender, uitgevoerd door de browser;
5. preload
   Deze resource hint, kan als opvolger van de preload resource hint worden gezien, met als verschil dat het type van een document aangegeven kan worden middels de as-attribuut. Daar waar prefetch ingezet kan worden om bronnen voor een volgende navigatie in te laden, wordt preload toegepast binnen de huidige navigatie. Preload geniet daarnaast nog enkele andere voordelen.
   Opmoment van schrijven, wordt de preload resource hint nog niet in alle browsers ondersteund. Wij vallen in geval van JavaScript oplossingen, dan ook terug op de prefetch resource hint.
6. subresource
   Chrome ondersteunde tijdelijksubresource als resource hint, bedoeld als tegennhanger van de prefetch resource hint. In plaats van voor een volgende navigatie, kon je met subresource aangeven dat er iets voor de huidige navigatie ingeladen moest worden. Echter, door gebrek toentertijd om prioriteit mee te geven aan de resource hint, waardoor de toegevoegde waarde van het toepassen van deze resource hint, verwaarloosbaar was.

Wellicht heb je ze al eens gezien wanneer je broncodes afstruint. Preconnect en dns-prefetch zijn de meest bekende en ongetwijfeld ook meest gebruikte resource hints.

Resource hint ondersteuning

De ondersteuning laat vooral in Microsoft gebaseerde browsers nog te wensen over. De resource hint dns-prefetch geniet gelukkig goede ondersteuning. In Internet Explorer versie 10, werd het zelfs al ondersteund. De resource hint preconnect is een nieuwere specificatie (2015), en wordt bijvoorbeeld niet in Internet Explorer, maar ook niet in Edge 15 ondersteund.

Uitvoeren van een resource hint

Een resource hint is op drie manieren uit te voeren:

1. als HTML link-attribuut;
2. als HTTP headers;
3. via JavaScript. Dit wordt praktisch, wanneer je niet direct een resource hint toe wilt passen, maar bijvoorbeeld pas wanneer men een bepaalde plek in het document bereikt, een foto-gallerij opent of met de muiscursor over een vorige/volgende pagina navigeert.

Van deze drie methoden om resource hints af te vuren, is de meest gebruikte methode de HTML link-element methode.

Vragen over resource hints, of juist tips over hoe jij resource hints in zet? We horen ze graag. Volgende week komen we met een praktijk voorbeeld, over hoe je niet om moet gaan met resource hints.