Preloaden met instant.page voor een snellere website!

Een snelle website is erg belangrijk. Niet voor niets doen grote bedrijven zoals Google veelvuldig onderzoek naar welke impact de laadtijd op conversie heeft. Als websitebeheerder kun jij met veel factoren rekening houden, maar soms is het buiten je bereik. Denk aan bijvoorbeeld hoe snel de internetverbinding van je gebruiker is. Bekijk hoe preloaden met instant.page je hierbij toch kan helpen!

Wij doen er bij Antagonist uiteraard alles aan om je website zo snel mogelijk te maken. Zo presteert jouw website altijd optimaal, dankzij moderne servers en stabiele internetverbindingen. Er is alleen één ding waar wij niets aan kunnen doen: de netwerkverbinding van je bezoekers. Een langzame verbinding kan voor behoorlijk wat vertraging zorgen. Gelukkig is er een manier om dit deels af te vangen.

Wat is netwerklatency?

Onze servers zijn via meerdere verbindingen verbonden met het internet. Dit zorgt ervoor dat je website altijd goed bereikbaar is. De internetverbinding van de bezoeker zelf kan alleen ook een grote impact hebben op hoe snel een website aanvoelt. Wat gebeurt er als een gebruiker bijvoorbeeld net op het randje van 4G-dekking zit of thuis een traag wifi-netwerk heeft?

In zo’n situatie zorgt de verbinding van je bezoeker voor veel latency. Met latency bedoel ik de tijd die nodig is om data vanaf het apparaat van de bezoeker naar onze server te sturen en een antwoord te krijgen (een round trip). De latency is niet alleen afhankelijk van de kwaliteit van de verbinding. Ook het type verbinding (zoals glasvezel, kabel of inbel) en de afstand tussen de bezoeker en de server spelen een rol.

Je kunt niet zo veel doen om deze latency te verlagen, aangezien de oorzaak ervan immers niet bij jou of Antagonist ligt. Wel kun je het deels verminderen met behulp van preload tags. Met deze tags kun je bepaalde pagina’s van je website preloaden. Dat wil zeggen dat je ze al inlaadt, voordat ze nodig zijn. 

Wat is een preload tag?

Waarschijnlijk ben je wel bekend met de <link> tag. Je kunt deze tag gebruiken om relaties tussen documenten te leggen. Denk aan het toevoegen van stylesheets aan je website. In dat geval geef je aan dat het CSS-bestand waarnaar je verwijst verantwoordelijk is voor de styling van de pagina.

Er zijn ook andere vormen van een <link> tag, zoals de preload tag. Met een preload tag vertel je de browser om alvast een document of pagina in te laden die waarschijnlijk zo nodig gaat zijn. Als daar tijd voor is, zal de browser deze data downloaden. Dit gebeurt dus al, voordat iemand die pagina bezoekt. 

Merk op dat dit pas enkel gebeurt als alle resources die nodig zijn om de huidige pagina te weergeven zijn ingeladen. Het gebruik van een preload tag gaat dus niet ten koste van het laden van de huidige pagina. 

Voorbeeld van een preload tag

Stel dat je verwacht dat een bezoeker als volgende naar de over-ons-pagina gaat. Je probeert in dat geval de browser alvast de pagina ‘about.html’ te laten downloaden. De preload tag kan er dan als volgt uit zien.

<link rel="prefetch" href="/about.html">

Je kunt de tag ook gebruiken voor het preloaden van andere typen content, zoals een font. Met de waarde in het “as-attribuut” geef je aan wat het type van het document is dat je probeert te laden. Dit kan bijvoorbeeld een font, script of stylesheet zijn. Het type van het document dat je graag wilt preloaden is optioneel om te benoemen, maar wel belangrijk. Browsers gebruiken dit namelijk om de prioriteit te bepalen. 

<link rel="prefetch" href="/static/open-sans.ttf" as="font">

Preload tags toevoegen voor resources die direct op de pagina worden geladen, zoals scripts of stylesheets, is niet heel zinnig. Deze worden al vanzelf met hoge prioriteit door de browser opgepikt. Het kan echter wel nuttig zijn om een preload tag te plaatsen voor een font of plaatje dat ergens in een stylesheet wordt gebruikt (bijvoorbeeld via de “url-functie”). Zo weet de browser dat dit font of plaatje binnenkort nodig is, voordat het stylesheet helemaal is gedownload.

Doelgericht preloaden

In ons geval zijn we geïnteresseerd in het versnellen van de laadtijden van pagina’s binnen onze website. We zouden daarom voor alle pagina’s een preload tag kunnen toevoegen. Dit is echter niet zo’n goed idee, zeker niet op een grote website. Bijvoorbeeld een paar honderd blogs preloaden, heeft niet veel zin. Hoe gerichter je preload, hoe beter het werkt. Je wilt daarom de link preloaden waar de gebruiker op gaat klikken. Dat is natuurlijk moeilijk, want hoe voorspel je dit? Gelukkig is er een stukje JavaScript wat hierbij kan helpen.

Preloaden met instant.page

Instant.page is een stukje open-source JavaScript. Daarmee plaats je op alle links binnen je website een preload tag, maar alleen als het script voorspelt dat de gebruiker op die link gaat klikken. Dit klikgedrag kan op drie manieren worden voorspeld. Zo kun je kijken naar alle links die zichtbaar zijn op het moment dat de gebruiker door een pagina scrollt. Die links krijgen dan een preload tag. Eenvoudig, maar niet erg effectief. Je zult hierdoor namelijk veel links preloaden die waarschijnlijk toch niet worden aangeklikt.

Je kunt ook links preloaden, zodra de gebruiker er een tijdje met de muis er overheen gaat. Deze tweede methode is een stuk effectiever. Met ‘een tijdje’ bedoel ik hier 60 milliseconden (heel kort dus). De achterliggende gedachte is dat de bezoeker even met de cursor boven de link hangt, voordat er op wordt geklikt. Dit wil zeggen dat er een kleine pauze zit tussen het verplaatsen van de cursor en het klikken. In deze pauze wordt er snel een preload tag geplaatst. Dit kan een aardige snelheidswinst opleveren, omdat deze methode selectief is – je preload per keer slechts één link. Deze methode staat bij instant.page standaard ingesteld, omdat het goed werkt en weinig problemen veroorzaakt. 

Er is nog een derde manier. Een muisklik bestaat eigenlijk uit twee stappen: het indrukken van de muisknop en het loslaten ervan. Normaal gesproken registreert een browser de klik, wanneer je de muisknop loslaat. Nu kun je instant.page zo instellen dat het een preload tag plaatst op het moment je de muisknop indrukt – dus net vóór dat je het loslaat. De snelheidswinst die je zo behaalt, is kleiner dan bij de tweede methode. De kans dat een gebruiker daadwerkelijk gaat klikken, is daarentegen wel nagenoeg gegarandeerd.

Instant.page implementeren binnen je website

Oke, heel mooi allemaal! Maar hoe gebruik ik dit? Instant.page binnen je website implementeren, is gelukkig heel erg simpel. Het enige wat je hoeft te doen, is de volgende script tag aan je website toe te voegen.

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

Plak dit vóór de </body> tag en daarna ben je klaar! Vanaf nu worden links binnen je website gepreload als de bezoeker er minstens 60 milliseconden overheen zweeft met de cursor.

Instant.page als WordPress-plugin

Gebruik je WordPress, dan kun je instant.page eenvoudig gebruiken door de plugin te installeren. Dit regel je als volgt.

• Log in op WordPress en ga naar Plugins → Plugins toevoegen.
• Zoek rechts bovenaan op ‘instant.page’.

• Installeer de plugin en klik op Activate. Dat is alles, vanaf nu worden links op je blog gepreload!

Veel succes!

Met instant.page kun je links binnen je website selectief preloaden. Door alvast te voorspellen naar welke pagina je bezoeker gaat, kan dit je flink wat snelheidswinst opleveren. Hopelijk heb je dan ook wat aan dit artikel gehad. Wil je graag meer weten over de verschillende configuratiemogelijkheden van dit script, dan verwijs ik je graag de website van instant.page. Veel succes gewenst als je ermee aan de slag gaat!

P.S. Blijf op de hoogte en volg ons via Facebook, Twitter, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!