071 - 576 13 23
Geef je website een snelheidsboost

Geef je website een snelheidsboost

door Rick van Haasteren op 17 november 2017


Waarom?

Afhankelijk van je leeftijd kun je je misschien de begintijd van het internet herinneren: na het inbellen kwam je favoriete website (startpagina.nl) tergend langzaam op je scherm tevoorschijn. Die tijden zijn voorbij: de meeste bezoekers hebben supersnel internet, en lang wachten op een website is verleden tijd.

Toch is de snelheid van je pagina belangrijker dan ooit. Daar zijn een paar redenen voor. Zoekmachine-optimalisatie (SEO) is daar een van. Page speed is een van de vele ranking factors van Google: een snellere website scoort dus beter in zoekmachines.

Daarnaast is mobiel internet steeds belangrijker. Er zijn zelfs meer mobiele zoekopdrachten in Google dan op desktop. En je telefoon heeft niet altijd die supersnelle verbinding. Dan is het wel prettig als je website lekker snel is.

Sinds Google de Mobile First Index gebruikt, waarbij jouw mobiele site leidend is in de zoekresultaten, is page speed zelfs nog belangrijker. Kortom: je kunt maar beter zorgen dat je website up to speed is.

Hoe doet mijn site het?

Er zijn verschillende tools om te checken hoe snel jouw site is. Ikzelf gebruik vaak Google Page Speed (https://developers.google.com/speed/pagespeed/insights): je vult je URL in en krijgt een score van 0 tot 100. Scoor je minder dan 85: dan is je site te traag en moet je aan de slag. Google vertelt je gelijk waar het mis gaat, en hoe je je site sneller kunt maken. Andere tools die je ook veel inzicht in de snelheid van je site geven zijn GTMetrix en Yslow

Wat maakt je website traag – en wat doe je daar aan?

Er zijn veel verschillende redenen waarom je website traag kan zijn. We lopen ze even door.

Server response tijd

De meeste websites van tegenwoordig zijn dynamisch: er staat geen HTML-bestandje klaar, maar de pagina wordt dynamisch opgebouwd. Dat kost tijd, en kan je pagina een stuk trager maken. Als het langer dan 0,2 seconden duurt, duurt het te lang voordat je website beschikbaar is voor de bezoeker.

Als dit zo is, is het tijd om met je websitebouwer eens te kijken hoe je de website sneller kunt maken. Hoe je dat precies doet hangt helemaal af van je CMS en de technische inrichting. Het gaat te ver om dat in deze blog allemaal te bespreken, maar het is een mooie uitdaging voor de techneuten.

Als je website eenmaal razendsnel wordt opgebouwd, kunnen we gaan kijken naar de volgende oorzaak van traagheid.

Afbeeldingen

Die grote visual bovenaan je pagina, en die superscherpe profielfoto’s op de over ons pagina maken je site superfancy. Maar als je niet op let, ook een stuk trager.

Zorg ten eerste dat het formaat van je foto past bij hoe groot je hem op je site toont. Een foto die je als 3000 x 2000 pixels hebt opgeslagen, maar toont op 50 x 40 pixels is natuurlijk zonde van de bandbreedte. Door je foto kleiner op te slaan, maak je hem ook in bestandsgrootte veel kleiner, en dat maakt je pagina weer lekker snel. Veel CMS-en kunnen dit automatisch voor je doen.

Daarnaast worden foto’s op verschillende schermen verschillend getoond. Met het picture-element in HTML5 kun je daar op inspelen: afhankelijk van de schermgrootte wordt een afbeelding ingeladen die mooi past binnen het scherm: groot genoeg om scherp te tonen, maar niet te groot, zodat er geen bandbreedte verspild wordt.

Het optimaliseren van je afbeeldingen kan ook veel helpen. Tools als www.kraken.io maken je afbeelding een stuk kleiner, vrijwel zonder kwaliteitsverlies! Heb je erg veel afbeeldingen op je site staan, en geen zin om die allemaal handmatig te optimaliseren? Kijk dan eens naar tools als Imgix. Daarmee worden afbeeldingen automatisch geoptimaliseerd voor verschillende groottes. Ook hebben zij een wereldwijd CDN (Content Delivery Network), waarmee je afbeeldingen worden geladen vanuit datacentres in de buurt van de bezoeker. Erg handig als je bezoekers van over de hele wereld hebt!

Browser caching

Met browser caching zorg je dat bestanden zoals je logo, CSS bestanden en javascript bestanden op de computer van je bezoeker worden opgeslagen. Dat scheelt, want ze hoeven dan niet telkens die bestanden opnieuw te downloaden, en daarmee wordt je website weer wat sneller.

Met een goede Expire header vertel je aan de browser hoe lang hij dat bestand mag bewaren, voordat hij het origineel opnieuw moet opvragen. Bijvoorbeeld: alle afbeeldingen mag je een jaar bewaren.

Op je Apache server stel je dat zo in in je .htaccess file:

<IfModule mod_expires.c> ExpiresActive on
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/gif " access 1 year "
ExpiresByType image/jpeg " access 1 year "
ExpiresByType image/png " access 1 year " </IfModule>

Nu worden alle afbeeldingen bij de bezoeker in de cache opgeslagen. Dat scheelt veel bandbreedte, en maakt je site een stuk sneller.

Compressie

Gzip is een methode om bestanden kleiner te maken, en ze zo sneller over het netwerk te versturen. Dat betekent minder wachttijd voor je bezoekers. Normaal gesproken is er geen reden waarom je Gzip niet aan zou zetten. Doen dus!

Heb je een Apache server? Dan kun je Gzip aanzetten door een vrij simpele aanpassing in je .htaccess bestand.

<IFModule mod_deflate.c>
<filesmatch "\.(js|css|html|jpg|png|php|svg)$">
SetOutputFilter DEFLATE
</filesmatch>
</IFModule>

Redirects voorkomen

Bij een redirect stuur je de bezoeker van een oude URL door naar een nieuwe. Geen probleem, maar voorkom dat het te vaak gebeurt. Als een bezoeker meer dan 2 keer wordt geredirect, voelt dat als een flinke vertraging.

Als je niet oppast, zit je daar zo aan: stel, je hebt je site een keer verhuisd naar een nieuw domein, en netjes een redirect ingevoerd. Later ben je gaan zorgen dat alle bezoekers op je adres zonder www naar het domein met www gaan. En toen installeerde je een SSL certificaat, en stuurde je al het verkeer door naar https.

Je doet er goed aan om dit niet met 3 aparte redirects af te handelen, maar al die redirects te combineren: stuur je bezoeker dus in een keer door van http://ouddomein.nl naar https://www.nieuwdomein.nl.

Javascript en CSS verkleinen

Voor al die supervette parallax effectjes, modals en chat scripts op je website gebruik je waarschijnlijk best veel externe javascript libraries. Goed idee, want dan hoef je het niet zelf te maken.

Bedenk wel dat al die scripts bij elkaar best wat bandbreedte gebruiken. Dat kun je beperken door javascript te verkleinen met een minifier. Het bestand wordt dan lekker klein gemaakt en is sneller bij je bezoeker binnen.

Hetzelfde geldt voor je stylesheets: ook die kunnen flink in omvang toenemen. Door ze te minifyen zijn ze weer sneller in te laden.

Prioriteit voor zichtbare content

Als je PageSpeed insights gebruikt, zal je deze tip weleens voorbij zien komen. Dit gaat ook weer over stylesheets: als je een pagina bezoekt, moet meestal eerst alle CSS zijn ingeladen voordat de pagina getoond kan worden.

Google raadt je aan om alle content boven de vouw, dus datgene wat je bezoeker gelijk ziet zinder te scrollen, gelijk goed zichtbaar te maken. Dat kun je doen met inline CSS: alle CSS die nodig is om het bovenste deel van je pagina te tonen staat dan direct in de head van je pagina. Die kan dus goed getoond worden zonder dat het stylesheet is geladen.

In praktijk is dit lastig. Er zijn wat tooltjes die je hierbij kunnen helpen. Mijn ervaring is dat het lastig is om dit punt te fixen, en je met de andere verbeterpunten uit dit artikel meer bereikt. Niet teveel tijd aan besteden, tenzij je echt voor een 100% score wil gaan.

Google Pagespeed voor Apache

Wil je nog een stapje verder gaan? Dan kun je de Google Pagespeed Module voor Apache of Nginx installeren op je webserver. Die verzorgt een aantal belangrijke snelheidsboosters voor je, zoals caching, afbeeldingen optimaliseren en javascript inline plaatsen. Dit kan je site een stuk sneller maken. Zorg wel dat je goed test of alles blijft werken, en tweak wat aan de verschillende opties als je tegen problemen aanloopt.

HTTP/2

HTTP is het protocol waarmee je website naar je bezoeker wordt gestuurd. De meest gebruikte versie nu  is 1.1. Die is ruim 20 jaar oud en sluit niet meer zo goed aan bij hoe het web nu werkt. De opvolger is HTTP/2. Ik zal je de technische details besparen, maar de bottom line is dat HTTP/2 je website een stuk sneller kan maken. Als je de mogelijkheid hebt om over te stappen, dan dat een flinke boost zijn voor de snelheid van je website.

Bottom line

Je website veranderd steeds, dus blijf ook checken of je site snel genoeg is. Check niet alleen de homepage, maar ook de andere belangrijke pagina’s van je website. Natuurlijk zijn er nog meer manieren om je site sneller te maken. In dit artikel heb ik vooral het ‘laaghangend fruit’ besproken: issues die je meestal vrij snel kunt verhelpen, en die een groot effect op de snelheid van je website hebben. En daarmee zorgen voor een betere gebruikerservaring en een betere ranking in Google.