website performance sfeerbeeld

Waarom een goede performance van je website, webshop of webapplicatie onmisbaar is

Tegenwoordig is een goede performance van je oplossing - website, webshop of applicatie - onmisbaar. 50% van de websitebezoekers verwacht dat een website binnen twee seconden geladen is. Als dit langer duurt, haken bezoekers vaak af en dat heeft invloed op de resultaten die je uit je website kunt halen. Als bezoekers door de lange laadtijden afhaken, loop je op voorhand al omzet en leads mis. In dit blog leg ik uit wat performance is, hoe performance werkt, waarom een goede performance belangrijk is en hoe je de performance verbetert en bewaakt.

Performance draait om de snelheid waarmee webpagina’s worden geladen en weergegeven in de browser van de bezoeker. De snelheid wordt onder andere bepaald door de code, server, hoeveelheid data, hoeveelheid koppelingen met andere systemen, type en kwaliteit van een verbinding, het soort device dat wordt gebruikt en de schermgrootte hiervan. Over het algemeen is een telefoon op een wifi-netwerk sneller dan op mobiel internet en is een desktop sneller met dan zonder internetkabel. De snelheid is tevens afhankelijk van de kwaliteit van een verbinding. Zo is een openbaar wifi-netwerk in een trein of hotel vaak slechter dan de wifi-verbinding thuis. Daarnaast heeft een telefoon een slechtere processor dan je desktop. Daarom moeten websites zeker op telefoons niet al te zware taken uitvoeren die veel rekenkracht kosten.

Belang van een goede performance

Een oplossing die snel werkt en geen lange wachttijd heeft, draagt bij aan een sterke, stabiele gebruikerservaring. De laadsnelheid vergemakkelijkt immers het gebruik van de oplossing en dat voorkomt dat mensen al op voorhand je website of webshop verlaten. Uit onderzoek blijkt dat 50% van de bezoekers verwacht dat een website binnen 2 seconden is geladen en 53% van de mobiele website bezoekers de website verlaat als de laadtijd langer is dan 3 seconden. Met een lange laadtijd verlies je al bezoekers voor ze überhaupt (een deel van) je website hebben bekeken. Hierdoor loop je leads en omzet mis.

Bron: DoubleClick by Google

Ook als mensen wel op je website of webshop blijven, is de laadtijd belangrijk. Ontwikkelaars van Zalando concludeerden, op basis van hun onderzoek naar de relatie tussen laadsnelheid en omzet, dat in alle stappen van het bestelproces korte laadtijden hand in hand gaan met een hogere omzet per sessie. Zo leidt een verbetering van de laadtijd van 100 milliseconden al tot een omzetstijging van 0,7% per sessie.

Anderzijds onderzocht het development team van de Financial Times het effect van langere laadtijden op het aantal gelezen artikelen. Hiervoor lanceerden ze drie verschillende versies van de website met als enige verschil dat elke versie een extra seconde vertraging meekreeg. Gemeten over een periode van een week zagen de developers bij een vertraging van 1 seconde het aantal gelezen artikelen afnemen met 4,9% en bij een vertraging van 3 seconden zelfs met 7,2%. SEO Google hecht veel waarde aan gebruiksvriendelijkheid.

Volgens Google is een (mobiele) website onder andere gebruiksvriendelijk als deze een korte laadtijd heeft. Daarom heeft Google aangekondigd langzame mobiele website lager in de zoekresultaten te plaatsen. Ook in het nieuwsoverzicht van Facebook worden langzame websites lager weergegeven. Performance is een van de factoren die - relatief zwaar - meeweegt in de SEO score van je website.

De performance goed inregelen is een development keuze die bijdraagt aan een beter resultaat van je website, webshop of webapplicatie. Om conversie uit je website te kunnen halen, moeten mensen je website allereerst kunnen vinden en openen.

Merkbeleving

Als we uitleggen waarom performance belangrijk is, horen we vaak: “Maar ik verkoop niks op mijn website. Dan is een snelle website toch helemaal niet zo belangrijk als bij een webshop?” Dat klopt niet helemaal. Op dit soort websites willen bezoekers makkelijk dingen kunnen opzoeken en lezen. Ook hierbij speelt de laadsnelheid een rol. Uit onderzoek van Google blijkt dat als mensen een langzame mobiele website hebben bezocht, ze minder geneigd zijn om van datzelfde bedrijf op desktop de website te bezoeken. Dit heeft dus een negatieve invloed op de merkbeleving. Daarbij is iets verkopen niet het enige wat je met een website kunt doen. Veel van onze klanten hebben als doel op hun website leads genereren. Als mensen afhaken door de lange laadtijd loop je leads mis. Dus ook bij een website ‘waar niks op wordt verkocht’ is focus op performance belangrijk, maar wellicht niet zo uitgebreid als bij een webshop noodzakelijk is.

Hoe weet je hoe je website ‘performt’?

Er zijn allerlei tools om te achterhalen hoe goed een oplossing performt. Bij Netvlies gebruiken we, bijvoorbeeld tijdens de ontwikkeling en voor de livegang, Google Pagespeed en Google Lighthouse. Hiermee krijg je onder andere inzicht in de laadtijd op verschillende devices en mobiel netwerk. De tools zijn gratis en zo ingericht dat ze ook voor niet-developers begrijpelijk zijn. Haal je eigen website maar eens door Google Lighthouse en je ziet meteen een performance score, en zelfs SEO score, inclusief uitleg. "Voorbeeld van een performance test uit Lighthouse"

Voorbeeld van een performance test uit Lighthouse.

Performance bewaken

Als de oplossing live is of je (performance) optimalisaties hebt doorgevoerd, moet je de performance blijven bewaken. Door automatisch te testen kun je periodiek de performance checken. Op basis van afspraken met de klant testen we bij Netvlies of een pagina niet te langzaam is geworden. Hier kunnen we vervolgens op anticiperen door optimalisaties door te voeren.

Hoe verbeter je de performance?

Als de performance slecht is, wil je dit, om te voorkomen dat je omzet en leads misloopt, natuurlijk verbeteren. De performance wordt onder andere slechter door een trage server, trage code, veel data, zoals veel afbeeldingen, of grote datasets met productinformatie, en veel koppelingen. Door middel van optimalisaties en doordachte keuzes tijdens het bouwen kun je voorkomen dat de performance door deze punten slecht(er) wordt. Over het algemeen maak je je oplossing sneller door te zorgen dat zaken pas worden geladen als je ze nodig hebt, in plaats van alles meteen laden zodra een pagina wordt geopend. Ook kun je onderdelen tegelijk laden in plaats van één voor één. Bijvoorbeeld wanneer een bezoeker drie verschillende bestanden nodig heeft om iets te kunnen bekijken. "Mobile performance optimalisatie"

Voorbeeld van een performance optimalisatie: contentblokken op een mobiele site worden pas geladen als je er naartoe scrollt.

Bij webapplicaties heb je vaak te maken met veel koppelingen met externe diensten. Zo maakten wij voor WOLF Rijbewijsshop een webapplicatie die gekoppeld is aan een rijlesplanner, waaruit veel verschillende grote datasets te verkrijgen zijn. De koppeling hebben we zo ontwikkeld dat alleen de data wordt opgevraagd die noodzakelijk is voor de pagina waarop de gebruiker zich bevindt. Hierdoor wordt er geen onnodige data opgevraagd, en worden er geen onnodige requests (data aanvragen) gedaan, wat veel laadtijd scheelt.

Goede performance door samenwerking en de juiste keuzes

Om de performance goed te kunnen waarborgen, moeten designers, frontenders, backenders en DevOps engineers samenwerken. Keuzes van de ene discipline hebben invloed op het werk van de andere discipline. Het heeft niet veel zin als de ene discipline de performance heeft geoptimaliseerd, maar anderen dit niet doen.

Daarom werken we bij Netvlies nauw samen en overleggen we met onze klanten. Samen bespreken we welke performance optimalisaties voor het type oplossing en business noodzakelijk zijn en prioriteit hebben.

Investeren in een goede performance is onmisbaar om het optimale uit je oplossing te halen. Ook al is je website inhoudelijk sterk of verkoop je exclusieve artikelen, een slechte performance zorgt hoe dan ook voor minder omzet en leads, omdat bezoekers afhaken bij lange laadtijden. Dit voorkom je door goede afspraken met je leverancier te maken, te monitoren en optimalisaties, zoals contentblokken pas laten laden als de bezoeker er naartoe scrollt, door te voeren.

Dit blog maakt onderdeel uit van een blogreeks over verschillende aspecten van een goede front-end. Wil je geen blog missen? Meld je onderin de footer gratis aan voor onze e-mailupdates. Je ontvangt per mail nieuwe blogs over dit onderwerp.