Conversie flink verhogen? 10 performance tips

Wist je dat de conversie op je mobiele website 20% hoger kan liggen als de website een seconde sneller geladen is? De meest effectieve manier om de gebruikerservaring op korte termijn te verbeteren is om de website sneller te maken. Voor een hogere conversie telt elke milliseconde! 

Wil jij weten hoe bedrijven als Walmart en Netflix dit voor elkaar krijgen? Lees dan snel verder, met onderstaande tips en tricks daag jij de developers van jouw organisatie uit om de conversie een flinke boost te geven.

1. Javascript Chunks

Een javascript bundel kan opgeknipt worden en pas ingeladen worden als het echt nodig is. Het werken met chunks oftewel ‘code splitting’ maakt dit mogelijk. Vraag een developer om de javascript bundel te analyseren en stel vast welke javascript onnodig is op bepaalde pagina’s. Hierdoor krijgen deze pagina’s een veel snellere initiële laadtijd, wat weer goed is voor de conversie. 

2. Prefetch, Preload en/of Preconnect resources

Indien er sprake is van een landingspagina met meerdere links naar andere pagina’s, dan is de kans groot dat de bezoeker na het bekijken van de landingspagina een van de gelinkte pagina’s zal bezoeken.

Conversie verhogen pad

In dit geval kunnen bepaalde resources al van tevoren opgehaald worden. Tijdens het bekijken van de landingspagina kan op de achtergrond al de CSS, javascript, fonts, afbeeldingen etc, opgehaald worden. Dit zorgt ervoor dat de gebruiker nog sneller door de website kan navigeren of de funnel kan doorlopen.

3. Houd de server response onder de 200ms.

De time-to-first-byte (TTFB) geeft aan hoe snel de website de benodigde informatie van de server heeft ontvangen. Google adviseert om in ieder geval de server-response onder de 200ms te houden. Er zijn veel manieren om de TTFB te verbeteren. Enkele voorbeelden zijn:

  • Optimaliseer de queries die op de databases worden uitgevoerd.
  • Overweeg dynamische server-resources, met behulp van bijvoorbeeld Microsoft Azure.

4. Optimaliseer caching

Caching zorgt ervoor dat bepaalde resources niet steeds opnieuw opgehaald moeten worden. Dit is zowel van toepassing op de frontend als op de backend. Door een juiste caching strategie te gebruiken kan de TTFB en de ’time-to-interactive’ aanzienlijk versneld worden. Denk ook aan het gebruik van een Content Delivery Network (CDN) voor het ophalen van assets.

5. Lazy Loading

Bij ‘lazy loading’ worden resources pas ingeladen wanneer het relevant is. Denk bijvoorbeeld aan content zoals afbeeldingen die pas ingeladen worden wanneer een gebruiker dichterbij komt met scrollen. Als de bezoeker alleen de bovenste producten bekijkt en daarna de pagina verlaat, wil je niet dat er performance verloren is gegaan aan het laden van afbeeldingen die de gebruiker niet eens heeft gezien.

6. Perceived Performance

Naast een daadwerkelijke snellere website is er ook de perceptie van snelheid. Als de gebruiker ziet dat er resources geladen worden, zal de website gebruiksvriendelijker ogen. Met onderstaande technieken kan de perceptie van snelheid verhoogd worden:

  • Progressive Images. Als de pagina geladen wordt wil je liever niet dat er een groot leeg vlak te zien is, omdat er een afbeelding ingeladen moet worden. Als dit op je website wel van toepassing is, denk dan eens aan progressive images. Met deze techniek laad je de afbeelding eerst in op een lagere kwaliteit waarna de kwaliteit wordt opgebouwd tot een scherpe afbeelding.
  • Critical CSS. Hierbij wordt eerst de minimale vereiste styling (CSS) ingeladen. Hierdoor is er in plaats van een lege pagina direct CSS te zien waardoor de website sneller lijkt. 

7. Comprimeer afbeeldingen

Een afbeelding herbergt beeldkwaliteit die met het blote oog niet op te merken is. Door compressie kan dit verwijderd worden, zodat de afbeeldingen minder kb’s bevatten. Kies ook het juiste bestandstype voor je afbeeldingen. Soms kunnen afbeeldingen/animaties ook vervangen worden door SVG’s of CSS. Dat scheelt allemaal milliseconden!

8. Blokkerende scripts

Zorg ervoor dat het renderen van je pagina niet geblokkeerd wordt door misplaatste script tags. Door de script tags op de juiste plek te plaatsen kan je dit voorkomen. Controleer ook hoeveel impact third-party scripts hebben op de performance en gebruiksvriendelijkheid van je website.

9. Progressive Web Apps (PWA)

Een native app ontwikkelen voor zowel iOS en Android is een grote investering in development en in onderhoud. Dit is echter helemaal niet nodig. Voor sommige situaties is een PWA zeer geschikt. Met een PWA is het mogelijk om een app-versie te krijgen van de huidige website. De website moet voldoen aan enkele voorwaarden, voordat de website wordt herkend/goedgekeurd als PWA. Een PWA heeft veel voordelen. Zo is het mogelijk om de app offline beschikbaar te maken en kan je ook push notificaties sturen naar de gebruiker, wat zeer interessant kan zijn om de conversie te verhogen. Meer info? Bekijk onze ANWB Camping case.

10. Performance tools

Er zijn tools beschikbaar om de performance van de website te monitoren. Een tip is om deze te koppelen aan de ontwikkelstraat. Op deze manier kan je achterhalen in welke sprint de performance is verbeterd of juist verslechterd. En kan een eventuele nieuwe release worden tegengehouden door verminderde prestaties. Voorbeelden van dergelijke tools zijn GTMetrix, WebPageTest, maar ook:

  • Lighthouse
    Lighthouse is beschikbaar in de Chrome Devtools, maar is via een ‘npm module’ ook te koppelen aan de ontwikkelstraat.
  • TestMySite
    Online tool om de performance te testen en de potentiële conversie uit te rekenen per bespaarde milliseconde.

Webinar Conversie Optimalisatie

Heb je naar aanleiding van het bovenstaande nog vragen of benieuwd naar nog meer tips? Goed nieuws, onze expert geeft jou in 20 minuten de handvatten om aan de slag te gaan met het 'Digital Growth Model' van Macaw. Meld je hier aan om het webinar per mail te ontvangen.

Sten Verveen
Business Consultant