Waarom front-end performance steeds belangrijker wordt

In deze artikelenserie over performance delen we graag onze kennis en ervaring. Dit is het eerste deel: wat is front-end performance precies en waarom is het zo belangrijk? In de delen hierna gaan we in op hoe je de performance van je site kunt verbeteren door onder andere slimmer gebruik van afbeeldingen, JavaScript, HTTP2 en preloading van content.

Meer dan paginalaadtijd

Front-end performance gaat over de snelheid van álles wat in je browser gebeurt tijdens het laden en gebruiken van een webpagina. Dat is dus niet alleen de paginalaadtijd. Een pagina mag namelijk best op de achtergrond nog doorladen, zolang de bezoeker maar direct kan beginnen met het lezen en gebruiken van de pagina.
Bij het bepalen van de front-end performance maken we onderscheid tussen twee maatstaven:

• Meetbare performance-indicatoren, zoals first contentful paint (na hoeveel laadtijd voor het eerst iets op de pagina verschijnt) en time to interactive (na hoeveel laadtijd de gebruiker de pagina kan gebruiken). Deze indicatoren zijn gedefinieerd door Google. In dit artikel geven we een korte, begrijpelijke toelichting op deze performance-indicatoren.
• De meer subjectieve beleving van de bezoeker, ook wel perceived performance. Deze kun je verbeteren door animaties of dummy content te tonen tijdens het laden. Op die manier heeft de bezoeker het gevoel minder lang te hoeven wachten. Een voorbeeld zijn zogenaamde skeleton-schermen, die met lijnen en vlakken al een indruk geven van de lay-out

Gedeelde verantwoordelijkheid

Een goede performance is de verantwoordelijkheid van veel verschillende afdelingen binnen een organisatie. En afhankelijk van een goede samenwerking tussen die verschillende afdelingen. Zo kan het design een grote impact hebben op de performance, maar dat betekent niet dat je een ontwerp daarom gelijk moet afschieten. Door samen te werken, komen designers en frontend- en backend-developers vaak tot goede oplossingen.

Ook de marketingafdeling kan met een kleine aanpassing al invloed hebben op de snelheid. Bijvoorbeeld door met Google Tag Manager of een stukje code een zware externe dienst in te laden via JavaScript. Dat kan zonde zijn van de inspanningen van de frontend-developer, die zijn best heeft gedaan zo min mogelijk JavaScript te gebruiken om de website sneller te maken.

Blijf daarom altijd in gesprek met alle afdelingen. Niet om te zeggen wat wel of niet mag, maar juist om vanuit ieders eigen vakgebied te zoeken naar de beste en meest efficiënte oplossing.

Steeds minder geduld

Is front-end performance niet de zoveelste hype in onze branche? Wij geloven van niet. Een website die supersnel laadt is de nieuwe standaard. Die snelheid wordt opgeschroefd door (web)apps van grote bedrijven als Gmail en Facebook. Want daarvan zijn bezoekers een zekere snelheid gewend.

Daardoor verwachten we steeds meer van websites en hebben we steeds minder geduld. Is je site niet snel genoeg, dan klikken bezoekers weg. En dat heeft natuurlijk een negatief effect op je conversie. In onze quickscans voor conversieoptimalisatie besteden we daarom aandacht aan quick wins op het gebied van performance. Die hebben een bewezen positieve invloed op je omzet.

Een andere reden voor het belang van snelheid is dat Google er steeds meer prioriteit aan geeft. Met andere woorden: de snelheid van je site heeft invloed op je plek in de zoekresultaten. Je snelheid check je met Google PageSpeed Insights, waarbij Google een mobiele telefoon als uitgangspunt neemt. Niet de snelste iPhone, maar een wat ouder toestel met minder snelle processors en oudere browserversies. Die hebben vaak moeite met bepaalde typen JavaScript en geven dus een slechtere speed performance. De lat ligt, kortom, hoog.