Speculation rules: de geheime methode voor snellere webshops

De laadtijd van je pagina heeft niet alleen invloed op de bouncerate maar, omgekeerd, ook op het conversiepercentage. Walmart zag dat met elke seconde snellere laadtijd, het conversiepercentage met 2% toenam. Mensen haken minder snel af en conversie neemt toe, dus hoe maak je je website sneller?

Een handige techniek hiervoor is het toevoegen van “speculation rules”. Wat dit zijn en hoe je het gebruikt, leggen we uit in deze blog. Maar eerst laten we de impact zien bij onze klant en leidingspecialist DYKA, want daar is weinig speculatie over de resultaten. Spoiler alert: we zien een significante stijging in snelheid én conversiepercentage.

Of het nu gaat om regenwaterbeheer, binnenklimaat, drinkwater, riolering of maatwerk, DYKA produceert kunststofleidingsystemen voor alledaagse en uitzonderlijke uitdagingen. Wij gieten hun doelstellingen in een nieuwe digitale omgeving op basis van het platform Magento / Adobe commerce.

Hoewel Magento heel veel voordelen biedt, heeft het out-of-the-box een vrije slechte cachingstrategie. Wanneer je een bestelling doet, wordt namelijk alle cache waar dit product in voorkomt geleegd - dus ook de categoriepagina bijvoorbeeld. Dus als je per dag veel bestellingen telt, wordt de cache dus vaak geleegd op de server. Deze cache moet dan bij het eerstvolgende bezoek van een pagina opnieuw opgebouwd worden waardoor de Time To First Byte (TTFB) vaak als traag ervaren wordt door echte bezoekers, wat tegelijkertijd het conversiepercentage of de SEO-waarde negatief kan beïnvloeden.

Dit patroon zagen we ook terug in de Real User Monitoring (RUM) data in de oude situatie op dyka.nl:

Het wijzigen van de cachingstrategie is een proces dat veel tijd kost en intensief getest zou moeten worden. Ook brengt dit potentiële security risico’s met zich mee. Daarom biedt het implementeren van “speculation rules” een oplossing om laagdrempelig een positief verschil te maken in de sitesnelheid en de ervaring van de bezoekers.

Introducing... "speculation rules"

In het kort zijn speculation rules een set regels die de browser vertellen welke pagina’s er geprerendered of geprefetched mogen worden. We leggen hieronder kort uit wat prerenderen en prefetchen is en hoe je de mate hiervan met ‘eagerness’ aanpast.

Prerender versus prefetch

Wanneer een pagina wordt geprefetched haalt de browser (onzichtbaar) op de achtergrond de HTML op vanuit de server. Hier wordt vervolgens nog niks mee gedaan maar is dus alvast opgehaald. Wanneer er daadwerkelijk naar deze pagina genavigeerd wordt door een bezoeker, hoeft deze pagina enkel nog gerendered te worden. Je bespaart dus tijd door niet meer op het moment van navigeren de call naar de server te doen om de HTML op te halen.

Prerenderen is een ander aspect dat kan helpen bij het verbeteren van de snelheid van de website. Met prerenderen kan de browser de gehele pagina ophalen én renderen (laden), waarbij alle Javascript en CSS al wordt toegepast in de achtergrond. Dit kun je vergelijken met het openen van een pagina op de achtergrond in een nieuwe tab terwijl je op dezelfde pagina blijft. Wanneer een pagina wordt geprerendered, wordt dus wel de extra stap gezet van het daadwerkelijk renderen van de pagina nadat deze is opgehaald van de server (prefetch).

Eagerness

Door pagina’s te prefetchen of prerenderen bestaat de kans dat je pagina’s aan het renderen bent die de gebruiker misschien niet daadwerkelijk gaat bezoeken. Hierdoor verhoog je de druk op de server en gebruik je onnodig dataverkeer op het apparaat van de websitebezoeker. Met de eagerness-property kun je dit oplossen. Hierbij kun je aangeven of de pagina’s direct on-pageload geprerendered moeten worden (“eagerness”: “immediate”) of dat de pagina’s enkel geprerendered mogen worden wanneer er op de linkjes langer dan 200ms gehovered wordt (“eagerness”: “moderate”).

Om te voorkomen dat de druk op de server of gebruikers apparaten te groot wordt, heeft Chrome ook bepaalde limieten ingebouwd:

Zoals aangegeven hierboven: je kunt maximaal 50 pagina’s prefetchen en 10 pagina’s prerenderen wanneer je eagerness ‘immediate’ gebruikt en maximaal 2 pagina’s tegelijk prerenderen of prefetchen - op basis van het principe ‘First In First Out’ - wanneer je eagerness ‘moderate’ gebruikt.

Implementatie

We gingen aan de slag en kozen voor een A/B test zodat we de impact op de server en de gebruiker konden meten. In de A/B test is de groep in tweeën gesplitst dus 50/50. Wat interessant is: ongeveer 10% van alle pageviews in group B (dus de groep mét speculation rules) daadwerkelijk pageviews zijn die geprerendered zijn. Dit heeft onder andere te maken met de manier waarop we speculation rules hebben ingezet, het is namelijk niet op alle url’s door de hele webshop ingezet - dit zou ook risicovol zijn.

Op Dyka.nl hebben we de speculation-rules als volgt ingezet:

• Navigatie
  Alle linkjes in de navigatie in de header worden geprerendered met ‘eagerness’: ‘moderate’, dus pas als je (op desktop) langer dan 200ms over een menu-item hovered wordt de pagina geprerendered.

• Homepage
  Verder worden alle linkjes op de homepage met ‘eagerness’: ‘moderate’ geprerendered.
  

• Categorie overzichtspagina
  Alle linkjes op de categorie overzichtspagina worden met ‘eagerness’: ‘moderate’ geprerendered.

• Product listing page (PLP)
  Alle product tegels op de PLP worden geprerendered met ‘eagerness’: ‘moderate’.

Het doel van deze A/B test was om de performance en met name de Time To First Byte (TTFB) te verbeteren. De TTFB is aanzienlijk verbeterd door gebruik te maken van speculation-rules op de volgende pagina’s:

Homepage

Hieronder zie je de twee verschillende gebruikersgroepen die geen (blauw) pre-rendered pagina bezoeken en wél (geel) een pre-rendered pagina bezoeken. Het verschil is enorm en het pre-renderen zorgt ervoor dat de pagina bijna instant inlaadt.

• Page was niet prerendered TTFB: 1.79 seconds

• Page was prerendered TTFB: 0.07 seconds

Categorie overzichtspagina’s

• Page was niet prerendered TTFB: 2.74 seconds

• Page was prerendered TTFB: 1.49 seconds

Productdetail pagina’s

• Page was niet prerendered TTFB: 2.56 seconds

• Page was prerendered TTFB: 1.01 seconds

Als je speculation rules wilt toevoegen, dan doe je dat in de html. Via deze pagina vind je alle informatie om dit goed toe te passen. Let er alleen wel op dat het inzetten van speculation rules niet zonder risico is. Wanneer je ze op alle pagina’s als volgt zou inzetten, dan zal de browser op elke pagina alle linkjes gaan prerenderen, dus elke keer als een gebruiker een pagina bezoekt. Dit verhoogt de druk op de server enorm en hierdoor ben je dus je eigen server aan het DDOS’en, waardoor de kans dat je server offline gaat groot is. Denk daarom goed na hoe je de techniek inzet.

Gelukkig houdt Google hier al rekening mee om bezoekers, website beheerders en developers te beschermen. Onder de volgende omstandigheden worden speculation-rules niet toegestaan:

• Gegevens opslaan

• Energie bespaarder

• Geheugenbeperkingen.

• Pagina's geopend in achtergrondtabbladen

• Wanneer de instelling 'Pagina's vooraf laden' is uitgeschakeld (wat ook expliciet wordt uitgeschakeld door Chrome-extensies zoals uBlock Origin)

Meer weten over performance of eens sparren om jouw website een boost te geven? Neem dan vrijblijvend contact met ons op.