Dit blog is geschreven door twee collega’s: Bas Boland, Developer en George Onderdijk, Data Insights Expert (Data Analist). Dit artikel is het eerste deel van een tweeluik over de invloed van website performance op jouw CRO-programma. Deze twee specialisten weten de technische kant van het werk in normale mensentaal uit te leggen. In dit blog gaan ze in op het belang van website performance, in het tweede deel delen ze tips waarmee je in de praktijk aan de slag kunt gaan.
Als we kijken naar het optimaliseren van websites zijn we geneigd om te kijken naar welke elementen op een pagina we groter, mooier of makkelijker vindbaar kunnen maken. Echter, als het lang duurt voordat die elementen beschikbaar zijn voor de gebruiker, dan kan het zijn dat al onze inspanningen voor niks zijn. Gebruikers zijn steeds meer veeleisend met betrekking tot ervaringen op een website. Ze vergelijken het niet alleen met concurrenten, maar met de beste ervaringen van sites die ze dagelijks gebruiken. Daarom is het van groot belang om er ook voor te zorgen dat de snelheid van een website ook geoptimaliseerd wordt.
Studies tonen aan dat een snellere website zorgt voor een hogere conversie. Daarbij laten ze zien dat zelfs verbeteringen van een paar honderd milliseconden een meetbaar positief effect kunnen hebben op het resultaat onderaan de streep:
- Portent ontdekte dat een website die in één seconde laadt een 2,5 (B2C) tot 3 (B2B) keer zo hoge conversie heeft ten opzichte van een website die in 5 seconden laadt.
- Walmart zag een 2% stijging van conversies na het verminderen van de laadtijd met één seconde.
- Mozilla Firefox kreeg 15,4% meer downloads na een vermindering van 2,2 seconden
- COOK zag een 7% conversiestijging na het verminderen van hun laadtijd met 850ms
Buiten het directe effect op conversie zorgt een betere performance ook voor betere ranking in de zoekresultaten, wat leidt tot meer zichtbaarheid en meer verkeer.
Al met al beginnen steeds meer bedrijven in te zien hoe belangrijk performance is voor de omzet en tevredenheid van hun klanten. Daarom focussen wij in deze blog op hoe we dit toe kunnen passen in het CRO proces.
Google helpt mee via Web Vitals
Als steuntje in de rug heeft Google de Web Vitals in het leven gebracht.
Dit is een set metrics die volgens Google samen laten zien hoe goed de performance en de hieraan gerelateerde gebruikerservaring zijn. Zelf neemt Google dit mee om de ranking van websites in hun zoekresultaten te bepalen en bedrijven kunnen ze gebruiken om te meten waar de ervaring van de gebruiker negatief wordt beïnvloed. Daarnaast geven de Web Vitals een groot aantal tips over wat er allemaal te verbeteren is aan een website, met betrekking tot de performance.
De meest belangrijke vitals
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) meet de tijd die nodig is om de belangrijkste content in het zichtbare gedeelte van de pagina te laden. Een LCP van 10 seconden betekent bijvoorbeeld dat tot aan 10 seconden nog zo veel wijzigingen gebeuren op de pagina dat deze minder bruikbaar is.
Er zit echter wel een valkuil aan de LCP metric. Soms wordt deze verkeerd gemeten omdat bijvoorbeeld een popup of een cookie banner die laat wordt getriggerd, wordt gezien als een grote aanpassing.
Omdat dit invloed heeft op de SEO, is het echter nog steeds aan te raden naar deze metric te kijken en zo laag mogelijk te houden. Om de Largest Contentful Paint positief te beïnvloeden kunnen we onder andere:
- Betere compressie toepassen op afbeeldingen
- Afbeeldingen zo vroeg mogelijk laden
- Afbeeldingen buiten het scherm “lazyloaden”, oftewel pas laden zodra er gescrold wordt
- Elementen die boven de fold later geladen worden, zoals pop-ups en advertenties, voorkomen
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is een relatief nieuwe metric die First Input Delay (FID) heeft vervangen.
INP meet de reactietijd tussen een interactie van een gebruiker, zoals een klik of een toetsaanslag, en het moment dat de browser begint met het visueel weergeven van het resultaat van die interactie.
Deze metric is dus van cruciaal belang voor het begrijpen van de ‘voelbare’ snelheid van een website.
Bij een slechte INP is de website niet direct onbruikbaar, maar dingen voelen niet “soepel”, wat erg afleidend werkt voor een bezoeker. De website haalt mensen uit de flow van hun aankoop.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) meet hoe vaak elementen op de pagina verschuiven, zowel tijdens het laden van de pagina als daarna.
Een dynamisch element zoals een advertentie, informatie die vervangen wordt, of een laat geladen afbeelding die de rest van de elementen naar onderen drukt, valt bijvoorbeeld hieronder.
We hebben allemaal wel eens een blogpost gehad waarvan de tekst maar bleef verschuiven of een knop die verschuift net voordat we deze aan willen klikken.
Een lage CLS betekent dat de pagina zeer stabiel is, wat meewerkt aan een goede gebruikerservaring.
Om een goede CLS te krijgen is het belangrijk om gebruik te maken van placeholders of bij afbeeldingen al vooraf de breedte en hoogte te bepalen in de code. Hierdoor wordt een wit blok getoond met dezelfde omvang, wat voorkomt dat dingen nog verschuiven.
Iedere drie weken sturen we een nieuwsbrief met de laatste blogs, eventupdates en het laatste academy-aanbod. Geen spam, alleen informatie waar je daadwerkelijk wat aan hebt. Sluit je aan, dan houden wij je op de hoogte.
De Web Vitals meten en optimaliseren
Google heeft een JavaScript library uitgebracht die helpt de Web Vitals te meten.
Deze kan door het development team direct in de code worden gebouwd, maar ook als tag in Google Tag Manager worden ingezet.
Door deze library te implementeren kunnen we de Web Vitals naar Google Analytics sturen als parameters en ze gebruiken in onze analyse om de performance van de website bij te houden en te verbeteren.
Door verschillende pagina’s te bekijken of door te segmenteren kunnen we zien waar de grootste knelpunten zitten en dus heel doelgericht focussen op het oplossen van de grootste problemen.
We kunnen deze data ook gebruiken om dashboards aan te maken en automatische alerts te genereren wanneer de performance achteruit gaat. Dit komt helaas regelmatig voor na nieuwe releases van het development team of bij het implementeren van nieuwe tags in Google Tag Manager.
Integratie in het CRO proces
Net zoals we bij Conversie Optimalisatie de website steeds een beetje beter maken door de User Experience te verbeteren, doen we hetzelfde aan de achterkant door de performance steeds een stapje beter te maken.
Performance metrics kunnen daardoor perfect een onderdeel uitmaken van het CRO proces. Door specifieke doelen voor elke metric in te stellen en ze continu te monitoren en verbeteren, kunnen we de gebruikerservaring van de website nóg beter maken.
Conclusie
Website performance is een fundamenteel onderdeel van de gebruikerservaring en daarom een cruciaal onderdeel van het optimalisatieproces van conversies.
Door voortdurend te streven naar verbetering van de Web Vitals kunnen bedrijven niet alleen hun SEO, maar ook hun conversies verbeteren.
