“High performance web sites lead to higher visitor engagement, retention and conversions” – Google.

Een positieve gebruikerservaring is een van de bepalende factoren voor het succes van uw website. De gebruikerservaring verbetert door de laadsnelheid van uw website te optimaliseren. Dit kan met prerenderen en prefetchen, twee technieken die ervoor zorgen dat een (complete) pagina al is geladen voordat de bezoeker op de link heeft geklikt. Enige terughoudendheid is hierbij geboden. Het succesvol implementeren van prefetchen en prerenderen is afhankelijk van een evenwichtige toepassing. Gebruik het niet over uw volledige website, want dan krijgt u het tegenovergestelde effect.

Hieronder staat uitgelegd wanneer u dit het beste kan gebruiken, hoe u het kan implementeren en waar u op moet letten.

Wanneer prerenderen/ prefetchen?

Het idee is dat u pagina’s laat prerenderen en prefetchen waarvan u zeker weet dat uw bezoeker daar naartoe gaat vanuit de pagina die ze bekijken op uw website. Via Google Analytics of een soortgelijke tool kunt u erachter komen hoe bezoekers meestal door uw website navigeren. Zo kunt u zien welke pagina meestal de volgende pagina is (eerste interactie) waar een bezoeker naartoe gaat. Die pagina kunt u dan vervolgens laten prerenderen en prefetchen.

Google-Analytics-Guapa-Media
Bron: Google Analytics over guapa.nl

Ook kan het handig zijn om JavaScripts, afbeeldingen en CSS-bestanden die vaker voorkomen op de website te laten prefetchen en prerenderen.

Prerenderen

Prerenderen kan eenvoudig gedaan worden door een linktag te plaatsen binnen een < head > -gedeelte:
Prerender-code-Guapa-Media

Hoe werkt prerenderen?

Stel dat de meerderheid van uw bezoekers vanuit uw homepage naar de FAQ gaat (eerste interactie). Dan zou u dus uw FAQ willen laten prerenderen. U plaatst een linktag op de homepage van uw website. In de href van de linktag zet u dan de URL naar de FAQ. Als een gebruiker dan op uw homepage komt met Google Chrome, dan suggereert Chrome dat het de FAQ moet prerenderen via de linktag. Het woord “suggereert” wordt gebruikt, omdat er nog factoren bestaan die er voor kunnen zorgen of een pagina wel of niet wordt geprerenderd.

Als een pagina wordt geprerenderd, dan wordt deze pagina geladen, zoals elke andere pagina, maar dit gebeurd alvast op de achtergrond. Dus zodra een bezoeker eindelijk klikt op FAQ vanuit de homepage, boem. De pagina was al geladen en wordt dus direct aan de bezoeker getoond.

In onderstaand YouTube-video legt Google uit hoe Instant Pages werkt met hun prerendering-technologie en laat Google ook zien wat het verschil is tussen prerenderen en niet prerenderen:

Magento prerender extensie

Voor Magento is er een extensie gebouwd met interessante algoritmes:

Guessing Mode:

  • Per CMS pagina kan er een link opgegeven worden die geprerenderd moet worden.
  • Op een categoriepagina wordt de volgende pagina geprerenderd.

Based Log Mode:

  • De meest bezochte volgende pagina wordt geprerenderd.

Deze algoritmes geven een goed beeld wat er voor Magento shops zou kunnen worden geprerenderd.

Prefetchen

Prefetchen kan net zo eenvoudig gedaan worden als prerenderen, maar prefetchen gebruikt een andere linkrelatie:

Prefetchen-Guapa-Media

Hoe werkt prefetchen?

Prefetchen werkt net als prerenderen, alleen wordt niet de complete pagina geladen, maar alleen het specifieke onderdeel dat wordt aangegeven in de linktag. Prefetchen gebeurd pas zodra de browser alles al heeft geladen op de huidige pagina en daarna dus niets meer te doen heeft (idle). Prefetchen werkt ook met https-inhoud, iets wat met prerenderen helaas niet kan.

Handig om te weten

  • Prefetchen en prerenderen zorgen er wel voor dat u al “pageviews” krijgt zonder dat u daadwerkelijk naar de desbetreffende pagina gaat. Dit kan leiden tot incorrecte websitestatistieken (bijvoorbeeld: welke pagina’s worden het meest bezocht), maar er zijn wel manieren om dit te kunnen omzeilen.
  • Prefetchen en prerenderen kan bandbreedte opslokken, vooral bij browsers op smartphones die niet op WiFi verbonden zijn. Zoals eerder is vermeld, is het dus handig om effectief te kunnen prerenderen en prefetchen.
  • Naar de volgende pagina gaan tijdens het prerenderen of prefetchen zorgt ervoor dat deze processen geannuleerd worden, waardoor u weinig tot niets hebt gemerkt van het prerenderen of prefetchen. Ook hier moet er dus nagedacht worden om prefetchen en prerenderen zo effectief mogelijk toe te passen. Weet bijvoorbeeld hoe lang een bezoeker op een pagina blijft, voordat het door gaat naar de volgende of maak gebruik van de http accelerator Varnish.
  • Prefetchen zorgt er alleen voor dat middelen worden gecached, terwijl prerenderen een complete pagina laadt. Dit betekent dat een geprerenderde pagina direct getoond wordt, wanneer uw bezoeker er naartoe gaat, terwijl een geprefetched pagina nog middelen moet laden die eventueel niet geprefetched zijn.
  • Prefetchen en prerenderen werken niet met sessies, dus onderdelen als winkelmanden kunnen helaas niet worden geprerenderd of geprefetched.
  • U hoeft niet perse alleen de volgende pagina te laten prerenderen en prefetchen vanuit bijvoorbeeld de homepage. Google Analytics laat ook zien wat de tweede interactie is vanuit de eerste interactie. Pagina van de tweede interactie zou dan kunnen worden geprefetched en geprerenderd kunnen worden vanuit de eerste interactie.
  • Prefetchen werkt niet met Google Chrome, terwijl prerenderen niet werkt met Mozilla Firefox (Internet Explorer ondersteunt vanaf versie 11 beide manieren). Het is daarom aan te raden beiden manieren in te zetten voor uw website.

Conclusie

Met behulp van bijvoorbeeld Google Analytics of de Magento prerender extensie kunt u erachter komen welke pagina’s handig zijn om te prerenderen of prefetchen.

Heeft u pagina’s, zoals volgende of vorige op de zoekresultaten of categoriepagina’s en middelen, zoals CSS, JavaScript, etc. die u voor uw bezoekers sneller wilt laten tonen? Dan kan prefetchen en prerenderen zeker uitkomst bieden!

Bij Guapa kunnen we u hiermee helpen om advies te geven en eventueel het implementeren van prerenderen en prefetchen.