Resource Hints: een slimme manier om websites snel te laden
Hoe sneller een website laadt, hoe prettiger voor bezoekers. Er bestaan vele technieken om een website te optimaliseren en de pagina sneller in te laden. Denk dan bijvoorbeeld aan het wel of niet inladen van bestanden op basis van user context, zoals welk device of browser wordt er gebruikt, wat is de internetsnelheid, etc.
Deze optimalisaties werken goed, maar met Resource Hints kan de pagina of vervolgpagina nog gerichter en sneller worden geladen. Met Resource Hints krijgt de browser van de bezoeker de opdracht om bepaalde bronnen vast op te vragen, wanneer een pagina bekeken wordt. De browser heeft dan even niets te doen, maar kan aan de hand van Resource Hints alvast bestanden van een andere pagina ophalen. Vooraf wordt bepaald bij welke bestanden en connecties dit gedaan moet worden. Wanneer een website wordt opgevraagd door een bezoeker, geeft de website direct informatie mee welke andere bronnen moeten worden opgevraagd. Dan hoeft dit niet te gebeuren op het moment dat dit gevraagd wordt en dat scheelt in de laadsnelheid van de pagina. Ook kan er website informatie worden meegestuurd voordat hier om gevraagd wordt, zodat de volgende pagina nog sneller kan worden ingeladen.
De smaken binnen Recource Hints
Er zijn vier verschillende smaken Resource Hints en ieder heeft zijn eigen handleiding wanneer deze het beste kan worden ingezet.
DNS Prefetch
Bij het opvragen van de pagina kan er worden meegegeven welke andere websites opgevraagd moeten worden voor de betreffende pagina. Voorbeeld: De website maakt gebruik van een externe beeldbank. Diverse media wordt hier vanaf gehaald om getoond te worden op de website. Normaal gesproken zou de connectie naar de externe website pas gebeuren op het moment dat er media wordt ingeladen. Met DNS Prefetch gebeurt dat meteen bij het laden van de pagina en hoeft dit niet meer te gebeuren wanneer media wordt opgevraagd. Quick win in performance!
Preconnect
Preconnect gaat verder op DNS Prefetch. Waar DNS Prefetch het begin van de connectie naar een andere website afhandelt, handelt Preconnect de volledige connectie af. Er bestaan namelijk meerdere fases in het maken van een connectie naar een website, maar dat is voor dit blog iets te technisch van aard.
Prefetch
Prefetch maakt ook connectie, maar nu naar een specifiek document. Dit kan een pagina zijn, maar ook media of scripts. Prefetch haalt het volledige document op met de content die hier op staat, maar voert hier niks van uit. Dit betekent dat teksten en code al zijn ingeladen, maar media en scripts nog niet. De url van de bestanden staan er wel in, maar pas als die pagina daadwerkelijk bezocht wordt, wordt het pas ingeladen.
Prerender
Prerender doet hetzelfde als Prefetch, maar laadt ook de media en scripts in die uitgevoerd moeten worden. Prerender wil je alleen gebruiken wanneer je zeker weet dat de pagina die je “prerendered” bezocht gaat worden met de volgende navigatie actie. Anders is het geen performance optimalisatie meer, maar werkt het zelfs vertragend. Een goed voorbeeld is wanneer je in een checkout proces zit van een webshop: vooraf is het door te lopen proces bepaald.
Preload
Hoewel ik het eerder over vier smaken had, is er toch al - bijna - een vijfde, genaamd Preload. Waar de bovenstaande features rustig wachten tot zij aan de beurt zijn en dan pas hun werk doen, dwingt Preload af dat de pagina direct wordt ingeladen als hoogste prioriteit. Doordat Preload nog volop in ontwikkeling is en alleen door Chrome ondersteund wordt staat hij nog even aan de zijlijn.
Ondersteuning browsers
Iedere feature heeft zijn eigen ondersteuning per browser. Browser-makers bepalen zelf wat zij wel of niet inbouwen, waardoor er verschil in ondersteuning is tussen de verschillende browsers. Zo is DNS Prefetch en Prefetch breed ondersteund door verschillende browsers, zoals Internet Explorer, Chrome, Firefox en Safari. Preconnect en Prerender zijn daarentegen weer minder goed ondersteund. Kennis van het gedrag van de verschillende browsers is nuttig om te weten wanneer het effect heeft.
Maakt ondersteuning door browsers veel uit wanneer je het wilt inzetten? Nee, als een browser het niet ondersteunt, worden de Resource Hints genegeerd. Het devies is dus: waar het kan, toepassen op een verantwoordelijke manier. Toepassing van Resource Hints kunnen quick wins zijn om de bezoeker te ontlasten met onnodige wachttijden en de gebruikservaring te verbeteren.