Website snelheid verbeteren

website snelheid verbeteren

Het verbeteren van de snelheid van je website kan enorm veel voordelen met zich meebrengen. De belangrijkste? Meer omzet! Amazone heeft uitgerekend dat 0.1 seconden langzamer hen $1.3 biljoen per jaar kost.

Voordeel snelle website
Voordeel van een snelle website bij grote bedrijven

Een snellere website zorgt voor een betere gebruikerservaring. Gebruikers verwachten nu eenmaal een snel resultaat. De reden dat het voor Google ook zo belangrijk is. Recent gaf Google zelfs aan dat het voor Mobile Gebruikers een ranking factor is. Verder blijkt uit een studie van Pingdom dat hoe langzamer je website is, hoe hoger de bounce rate. Dus: bezoekers verlaten je website sneller als hij traag laad. Iets wat je dus wilt voorkomen.

invloed website snelheid op bounce rate
Invloed websitesnelheid op bounce rate

Laadtijd opgesplitst in 3 fases.

Het is lastig om je website te meten a.h.v. één indicatie factor. Dit komt doordat het laadproces van je website uit meerdere fases bestaat. Je kan dit samen brengen in 3 fases:
1. Netwerk fase: Deze fase is afhankelijk van je internet verbinding en het werkgeheugen van je telefoon. Omdat je afhankelijk bent van externe factoren, is het lastig deze fase meetbaar te maken.
2. Server fase: In deze fase vraagt je device een pagina bij de server aan. De server bereid jouw vraag voor en reageert met een antwoord.
3. Browser fase: De browser verwerkt het antwoord van de server en toont jouw het beeld zoals je dat nu in je beeldscherm te zien krijgt.


Indicatie factoren website snelheid

Bij het optimaliseren van je website snelheid, zijn de volgende 3 indicatie factoren van belang:

Time to first byte(TTFB): deze metric meet de reactie tijd van de server. Doel: 200 ms
First meaningful paint (FMP): deze metric laat zien wanneer de website boven de fold (dus wat als eerst zichtbaar is in je scherm) geladen is. Doel: onder de 1.3 seconden
Time to interactive (TTI): Geeft aan wanneer het mogelijk is om een interactie aan te gaan met je website. Doel: onder de 1.3 seconden.

Wanneer je aan de slag gaat met het verbeteren van je websitesnelheid zal je al gauw merken dat het niet zo makkelijk gaat en dat ook het behouden van een snelle website een hele uitdaging op zichzelf is. Neem de doelstellingen van hierboven daarom als een ideale situatie en kijk vooral ook hoe jij het t.o.v. je concurrenten op het gebied van websitesnelheid doet. Nu we een richtlijn hebben, is het tijd om aan de slag te gaan met jouw websitesnelheid. Stap voor stap lopen we door de belangrijkste optimalisatie stappen heen. Het doel: de maximale potentie uit je website snelheid halen.


Optimaliseren boven de Fold:

We beginnen met het optimaliseren van de website snelheid boven de fold (het gedeelte van de website dat zichtbaar is wanneer je hem opent in je browser). Je kunt deze laadtijd behoorlijk verbeteren door naar de volgende twee punten te kijken:

• Het optimaliseren van je CSS.
Splits je .css file op, daarmee bedoelen we: inline de .css die je direct nodig hebt voor het laden van de pagina boven de fold. Alle .css die je niet direct nodig hebt dien je asynchroom in te laden. Dit kun je doen op de volgende manier: 

<link rel=”preload” href=”nietbelangrijkel.css” as=”style” onload=”this.rel=’styelesheet’ ”>

• Het optimaliseren van je .JS
Identificeer javascript dat kritiek is om te laden voor je FMP en ‘inline’ dit wanneer mogelijk. Niet relevante .js voor je FMP dien je asynchroon te laden. Dit doe je als volgt:

<script async src=”mijn.js”>

Het kan zo zijn dat je asynch javascript genegeerd wordt. Ik adviseer je dan defer.js te gebruiken om je niet kritieke scripts achteraf te laden. Of je nu asynch javascript/ css, defer javascript of geen van allen gebruikt, zorg er voor dat .js en .css altijd na de content wordt geladen.


Laad zoveel mogelijk Server side i.p.v. client side.

Wanneer mogelijk, is het het beste om zoveel mogelijk van je website code aan de kant van de server (server side) te verwerken in plaats van de webbrowser (client side). Dit heeft voornamelijk betrekking op je javascript. Het laden van javascript in je browser zorgt voor een enorm vertragende factor. Welke elementen via javascript worden ingeladen, krijg je inzichtelijk door je javascript te blokkeren in je webbrowser. Dit doe je via de Google developer tools in de Chrome browser. Bekijk samen met je webdeveloper welke code aan de kant van de klant geladen wordt en welke eventueel al aan de kant van de server verwerkt kan worden.


Verminder 3rd party scripts

Jouw website maakt vast veel gebruikt van verschillende externe scripts op je website. Denk aan zaken zoals hotjar, je Google analytics code en een chatfunctie die via ‘3rd party scripts’ ingeladen wordt. Welke scripts ingeladen worden, kan je zien door naar de ‘waterfall’ te kijken wanneer je je website snelheid meet in webpagetest.org. Bekijk samen met je webdeveloper welke scripts belangrijk zijn en welke niet. Wellicht dat het mogelijk is om deze scripts async of defer in te laden? Zo niet heroverweeg of de scripts wel echt of niet nodig zijn.


Afbeeldingen optimaliseren

Afbeeldingen kunnen een hoop van je laadtijd in beslag nemen. Bekijk de laadtijd van jouw afbeeldingen in de ‘waterfall’ wanneer je je website snelheid meet in webpagetest.orgJe kunt de laadtijd van je afbeeldingen door ze te comprimeren met tools zoals tinypng.

Daarnaast ondersteund Google sinds kort ook het formaat .Webp. Dit formaat is 26% kleiner dan een .png bestand en 25 – 34% kleiner dan een .jpg bestand. Dit zorgt voor een boost in je website snelheid. Om er voor te zorgen dat je afbeeldingen ook zichtbaar zijn voor andere webbrowsers, kun je gebruik maken van het volgende stukje code:

<picture>
<source srcset=”boom.webp” type=”image/webp”>
<img src=”boom.jpg”>
</picture>


Http2 protocol

http2
Verschil in laadtijd tussen http/1 en Http/2

Bij het samenstellen van een webpagina worden er verschillende bestanden opgevraagd. Wanneer je gebruik maakt van http:/1.1 protocol, worden al deze bestanden apart opgevraagd. Het http2 protocol, zorgt ervoor dat al deze bestanden in een keer bij de server opgevraagd en beantwoord kunnen worden. Dit scheelt enorm veel tijd. Http2, dient aan de kant van je server geïmplementeerd te worden. Het is vereisd om een ssl protecol (https) te gebruiken. Na de overgang naar http2, zal je in de ‘waterfal’ van webpagetest.org zien dat alle bestanden tegelijk geladen worden.


Compressie

Niet gecomprimeerde bestanden, zorgen voor een vertraging in de laadtijd van je website. De meeste webbrowsers kunnen inmiddels gecomprimeerde bestanden lezen en dat terwijl nog niet alle websites gecomprimeerde bestanden leveren.

Google adviseert het volgende te comprimeren:

• Verkleinen van JavaScript, HTML en CSS;
• Zorg voor consistentie in CSS en HTML code;
• Maak gebruik van GZIP compressie of Brotli compressie. GZIP of Brotli vindt dezelfde strings en code, vervangt ze tijdelijke met korte karakters. Een browser decromprimeert de gzipped / brotli bestanden en zet ze terug naar de orginele code. Uit nieuwe case studies blijkt dat Brotli 25% sneller kan zijn dan Gzip. Een echte aanrader dus.


Cache

Te veel ‘loops’ en onnodige code, zorgen voor een vertraging van een aantal milliseconden voor het vertonen van je website. Stel er komt een bak aan verkeer binnen op je website, dan worden deze milliseconden, seconden. En dat is nou precies wat je niet wilt hebben. Developers kunnen dit oplossen door gecachde bestanden te leveren in plaats van het elke keer bij de server op te vragen.


Content delivery network (CDN)

Werking van een CDN
Werking van een CDN

Een content delivery netwerk is een netwerk van servers die jouw website vanuit verschillende locaties kunnen uitserveren. Een CDN bewaart kopieën van je website content op hun server. Wanneer iemand op je website land, wordt deze kopie uitgeserveerd vanuit de server die het dichts bij hem staat.  
Als voorbeeld: jouw hoofdserver staat in Nederland. Zonder een CDN, zou iemand vanuit New york moeten wachten op een server uit amsterdam. Een CDN versnelt dit proces.


Snelheid prestaties inzichtelijk krijgen

Er zijn verschillende gratis tools waar je de snelheid van je website kan meten. Wij raden je aan om de volgende tools te gebruiken:

GTmetrix: Deze tool geeft suggesties waar je je website snelheid nog kan verbeteren. Bij elke suggestie zit een uitleg hoe je dit kunt verbeteren.
• Google speed page test: Deze tool geeft suggesties waar je je website snelheid nog kan verbeteren. Bij elke suggestie zit een uitleg hoe je dit kunt verbeteren.
Chrome developer tools (lighthouse): Deze tool geeft suggesties waar je je website snelheid nog kan verbeteren. Daarnaast meet deze tool ook je ‘First meaningful paint’ en je ‘Time to interactive’. Twee van de factoren waar wij naar kijken. Verder kun je in deze tool ook heel goed zien hoe je laadtijd wordt opgebouwd.
• webpagetest.org: Deze tool geeft duidelijk aan hoe je laadtijd wordt opgebouwd in een ‘waterfall’. Hiermee kan je het aantal requests handig analyseren. Daarnaast analyseert deze tool ook de ‘time to first bite’. Verder kun je de snelheidstest met deze tool ook customizen. Denk aan het meten van de invloed op .js ( vink disable .js aan) of de invloed van cookies en caching (vink first view en repreat view aan).  

Wij adviseren je om bij elke aanpassing het effect op je website snelheid te meten in een van deze tools.

Daarnaast is het ook handig om:

• Te kijken naar het effect op verschillende netwerken / devices. Voor een Iphone X met een snelle processor en een 4g verbinding, is het eenvoudiger om een website te laden t.o.v. een motorola G4 (Zie hieronder de invloed van .js op de CPU van verschillende telefoons).

invloed cpu op laden .js
Parse cost: Invloed CPU op laden .js

• Te kijken naar ‘Real user metrics’, Hierbij baseer je data op daadwerkelijke statistieken van je gebruiker. Dit is een mooie aanvulling op de data van de hierboven genoemde tools. Deze data kun je inzichtelijk krijgen met o.a. Google tag manager  ,New Relic en Speedcurve. De laatste twee zijn betaalde tools.


Ontdek de vooruitgang in Google Search Console

Leuk om te zien! Je zal bij een juiste optimalisatie ook verandering zien in je crawl reports in Google search console. Als de snelheid van de website verbeterd, kan Google meer pagina’s per dag bekijken en zal de tijd voor het bekijken van een pagina afnemen. In het voorbeeld hieronder zie je een crawl rapport van een website voor en na de snelheidsoptimalisatie. Het wordt duidelijk dat door een snellere website, Google meer websites kan crawlen en de laadtijd per pagina afneemt. Ervaring leert dat door een snellere website de zichtbaarheid van je website in Google toeneemt. 

Voor optimalisatie:

Google search console voor optimalisatie websitesnelheid
Google search console voor  snelheids optimalisatie

De resultaten na optimalisatie:

Google search console na optimalisatie websitesnelheid

Nu jij weer! Loop je nog ergens tegen aan? Welke resultaten merk jij na het optimaliseren van je website snelheid? Plaats het in de comments hieronder.

Laat een reactie achter