Tips om je website gemakkelijk sneller te maken

Sinds begin dit jaar is de snelheid van je website een Google ranking factor geworden en dus een belangrijk onderdeel voor zoekmachine-optimalisatie. Daarnaast zullen bezoekers een snelle website beter waarderen. Maar hoe zorg je er precies voor dat je website sneller wordt? Hieronder een aantal tips & tools om je website gemakkelijk sneller te maken.

Waarom een snellere website?

Voor de meeste websitebouwers is het hebben van een snelle website vanzelfsprekend. Toch blijkt de gemiddelde performance van websites nog behoorlijk tegen te vallen. Daarom is het goed om nog even te onderstrepen wat de voordelen zijn van een snellere website en wat de mogelijke impact is op de prestaties van je website of webshop. De belangrijkste redenen om je website nog sneller te maken zijn:

• Sinds april dit jaar maakte Google bekend dat de snelheid waarmee een website laadt een ranking factor is geworden. Dat betekent dat het sneller maken van je website een belangrijk onderdeel is geworden van zoekmachine optimalisatie (SEO).
• De snelheid van je website is daarnaast een bepalende factor in hoe gebruiksvriendelijk je bezoekers je website vinden. Hoe sneller je website, hoe gemakkelijker bezoekers tot de juiste informatie kunnen komen. Concreet vertaald betekent dit dat bezoekers langer op je website zullen blijven en meer pagina’s zullen bekijken.
• Een snellere website heeft ook een positieve financiële impact. Hardware-kosten (indien je een eigen server hebt) kunnen met wel 50% afnemen terwijl de omzet flink kan toenemen, onder andere door een toename in pageviews en conversie. Uiteindelijk zal het rendement van je website dan ook flink kunnen toenemen.

Tips voor een snellere website

Hopelijk is het duidelijk waarom je je website dient te optimaliseren. Maar wat is er nodig om van jouw Fiat Panda een Ferrari te maken? Hieronder volgen een aantal gemakkelijk toe te passen tips & tricks, die veel effect hebben op de snelheid van een website. Compleet is deze lijst niet omdat dit per CMS of eCommerce-pakket verschilt, maar dit zijn de belangrijkste algemene adviezen die snel resultaat kunnen geven.

1. Kies voor snelle en gespecialiseerde hosting

Hosting is een belangrijke factor die de snelheid bepaalt. Als je een eigen server hebt, is het zaak om te kiezen voor de juiste hardware, fysieke locatie, hosting-architectuur en server-instellingen. Vaak loont het echter meer om een gespecialiseerde webhost in te schakelen die er al voor heeft gezorgd dat zowel de hardware als server-instellingen geoptimaliseerd zijn voor het door jouw gebruikte CMS of eCommerce-pakket (bijv. WordPress of Magento).

Daarnaast is het slim om gebruik te maken van een Content Delivery Network (CDN). Op die manier verdeel je de server belasting over netwerken die daar speciaal voor zijn opgezet. Zo besteedt Twitter bijvoorbeeld het hosten van achtergrond-afbeeldingen uit aan het snelle CDN van Amazon. Daarnaast kan je bijvoorbeeld gebruikmaken van open bibliotheken van Google die bijvoorbeeld het jQuery-javascript veel sneller kunnen laden dan wanneer je deze zelf host. Ook is het beter om video’s bijvoorbeeld te laten hosten op YouTube of Vimeo.

2. Zet caching aan

Vaak zijn er al grote performance-verbeteringen te halen door caching voor je website aan te zetten. Hierdoor zorg je ervoor dat er kant en klare HTML klaar staat voor je bezoekers en hoeft er niet iedere keer PHP-code aan te pas te komen om dit te genereren. Voor WordPress kan je dit gemakkelijk doen met de W3 Total Cache plugin en voor Magento is deze optie beschikbaar in je backoffice. Controleer wel of de dynamische elementen in je pagina’s nog goed werken, want anders kan dit problemen opleveren in combinatie met caching.

Daarnaast is een ander belangrijk onderdeel van caching de browser-cache door gebruik te maken van caching headers. Hiermee laat je de browser van je bezoekers weten wat de ‘houdbaarheidsdatum’ van de elementen op je website is. Op die manier hoeven bijvoorbeeld niet alle afbeeldingen opnieuw te worden geladen bij een terugkerend bezoek. Een gemakkelijke manier om dit aan te zetten, is door gebruik te maken van de volgende regels in je .htaccess:

ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
FileETag none

3. Optimaliseer je afbeeldingen

Niet-geoptimaliseerde afbeeldingen kunnen voor een grote vertraging zorgen op je website. Allereerst gaat het om het aantal afbeeldingen dat geladen moet worden. Voor iedere afbeelding is er een apart HTTP-request nodig. Het maken van deze verbinding kost tijd en haalt de snelheid uit je pagina. Een oplossing hiervoor is om gebruik te maken van sprites. Hierbij plaats je je losse afbeeldingen in slechts 1 bestand, waardoor er maar 1 afbeelding hoeft te worden geladen. Meer over het implementeren van sprites lees je hier. Een handige tool die ik iedereen kan aanraden om een bestaande website snel om te zetten naar sprites, is SpriteMe.

Uiteraard is de grootte van je afbeeldingen ook bepalend voor de laadsnelheid van je website. Om je afbeeldingen zo klein mogelijk te houden, kan je vaak het beste kiezen voor .png-bestanden. Daarnaast bestaat er de handige tool Smush.it die automatisch op zoek gaat naar de afbeeldingen op je website die nog kunnen worden geoptimaliseerd qua bestandsgrootte (tip van @SoDnl).

4. Zet Gzip aan

Je kan je site gemakkelijk sneller maken door gebruik te maken van datacompressie. Door deze compressie in te schakelen worden bestanden eerst ingepakt (zoals bij Winrar) voordat ze naar de bezoeker worden gestuurd. Dit bespaart bandbreedte en zorgt ervoor dat de data sneller wordt verzonden. Opnieuw kan je dit aanzetten door de volgende regels in je .htaccess toe te voegen:

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

5. Implementeer best practices

De lijst hierboven bevat een aantal tips om snel resultaten te bereiken. Echter is er nog veel meer mogelijk om je website sneller te maken. Veel verbeterpunten hangen echter af van het softwarepakket dat je gebruikt en van het type webserver. Daarom is het verstandig om terug te vallen op Google en te zoeken naar ‘optimization tips’ in combinatie met je CMS-pakket.

Tot slot

Zoals bij iedere (tijds)investering is het belangrijk om de effecten in kaart te brengen. Dat je website sneller is geworden, merk je vaak meteen. Maar hoeveel precies is goed bij te houden met verschillende tools. Allereerst kan je terecht bij Google Webmaster Tools waar je de crawl-snelheid kan bekijken. Hier is dus goed te zien hoe snel zoekmachines jouw pagina kunnen downloaden, wat dus effect heeft op je ranking. Daarnaast is een andere handige tool Google Page Speed waarmee je de snelheid van je website direct kan monitoren. Tot slot is het aan te raden om YSlow (Firefox-plugin) te installeren. Deze tool geeft feedback met diverse verbeterpunten om een nog snellere website te krijgen.