Menu
A team

Waarom front-end performance steeds belangrijker wordt

Front-end performance | deel 1

Snelheid is een van de belangrijkste eigenschappen van een website. Het gaat dan over de laadsnelheid van de content en dus hoe snel een bezoeker de site kan gebruiken. Daarom hebben we bij Aviva Solutions voor veel organisaties de front-end performance van hun website verbeterd.

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.
  • 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.

Afbeeldingen sneller en slimmer inladen

Deel 2 in de artikelenreeks over performance.

Naar deel 2
Voorbeeld van een lay-out

Een voorbeeld van het skeleton-scherm dat LinkedIn gebruikt.
Bron: https://miro.medium.com/max/1838/1*tAzqw_10J0uXEPeVzmlvLA.gif

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.

Hiermee heb je een goed beeld van de basics en waarom performance steeds belangrijker wordt. In de volgende artikelen in deze serie bespreken we onze ervaringen met performanceverbetering op verschillende vlakken:

Over de auteur

Tim van Schie is frontend-developer bij Aviva Solutions. Hij schrijft toegankelijke HTML, CSS en JavaScript en houdt zich bezig met interactieontwerp. Een echte teamspeler die, liefst Agile, nieuwe ideeën deelt en rijke gebruikservaringen ontwikkelt.

Even contact?

Heb je vragen of wil je meer weten over performance verbeteringen? Bel ons op 071-7107474 of mail naar info@avivasolutions.nl. Het formulier invullen kan natuurlijk ook.

Bel of mail me terug

Onze website maakt gebruik van cookies om je de best mogelijke beleving te bieden. Lees ons privacy statement voor meer informatie.