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.
SetOutputFilter DEFLATE
2.AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css ap3.plication/x-javascript4.BrowserMatch ^Mozilla/4 gzip-only-text/html5.BrowserMatch ^Mozilla/4.0[678] no-gzip6.BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Wijtze de Groot 
Shamier Coffie 
Remy Bleijendaal 
Henry L.Conte 
Ik had wat meer verwacht van dit artikel eerlijk gezegd. Je eerdere artikelen waren erg leerzaam dus echt klagen mogen we niet, maar de meeste van deze aanbevelingen kun je zelf ook lezen wanneer je Google Page Speed of YSlow gebruikt.
Daar had je dan ook nog vandaan kunnen halen dat het de moeite loont om Javascript en CSS te minimizen, en Javascript files te combineren tot één bestand. Ook het gebruik van bv. subdomeinen kan ervoor zorgen dat er meer bestanden tegelijk worden geladen, en het serveren van statische content vanaf een domein dat geen cookie zet kan de boel ook nog wat versnellen.
Nadelen zijn er natuurlijk ook. Het aanzetten van GZip bijvoorbeeld is wel een extra belasting voor je server(s), en da’s afhankelijk van de software en de servers een mogelijk risico. Ook altijd goed om in de gaten te houden.
Het gebruik van een CDN bevordert de performance van een website significant. In het artikel wordt gesproken over het inzetten van Amazon Cloudfront. Voor mensen die gebruikmaken van WordPress en Cloudfront willen inzetten, hebben we een praktische handleiding opgesteld op onze website: http://www.jitscale.com/howto-speed-up-wordpress-sites-by-using-amazon-cloudfront/
Nog 2 soortgelijke (90% overlappende) artikelen:
http://andrescholten.nl/breng-snelheid-in-je-site-voor-gebruikers-en-zoekmachines/
http://www.remivanbeekum.nl/websites/website-10-keer-sneller-in-half-uur-werk/
Interessant stuk! Zoals je beschrijft, heeft het gebruik van cache plugins voor wordpress, niet altijd het gewenste effect. Ik ondervond vooral prolemen i.c.m. Internet Explorer (alle versies).
Voor de gekkigheid, met yslow krijgt lensbestel een B. Nog geen gebruik van CDN e.a. Zijn jullie dat wel van plan? Stel je hebt net een dedicated server gehuurd, geoptimaliseerd voor Magento met voldoende opslag in RAID 5 oid en dan hoor je dat je statische bende moet outsourcen voor weer extra kosten. Is dat jullie overweging om nog geen CDN te gebruiken?
Dankjewel voor je bijdrage. Voor mij is dit nog tamelijk onbekend terrein, dus ik stoor me niet zo aan overlap. De welkome aanvullingen uit de reacties zal ik t.z.t. nog eens uitgebreid bekijken.
@Michel H: Het doel van dit artikel was om de grootste verbeterpunten aan te geven. Eens dat minimizing van JS/CSS (probeer http://code.google.com/p/minify/) daar ook tussen hoort danwel het hosten van statische content op cookieless subdomein (of op een CDN dus). Veel van deze tips worden ook genoemd in de tools die ik heb genoemd, echter wordt er niet gesproken over implementatie. Daarom hoop ik dat dit artikel aangeeft welke tools je kan gebruiken om tot een oplossing te komen (bijv. Smush.it of SpriteMe).
@Arjan: Bedankt voor je toevoeging! Goede handleiding voor mensen met een WordPress-blog!
@André: Het klopt dat er genoeg soortgelijke artikelen zijn geschreven. Vooral als je in het Engels zoekt krijg je een hoop extra tips! Toch lijkt het me goed om aandacht aan dit onderwerp te geven op Frankwatching omdat dit het eerste artikel is die dit onderwerp raakt op deze site.
@Osric: Zelf heb ik ook ervaren dat de cache plugin voor WordPress niet altijd even goed werkt. Een van de problemen in mijn eigen site ontstond met dynamische content waarbij ik Twitter-berichten real-time probeerde in te laden. Wat je zou kunnen doen is alleen bepaalde delen van je website laten cachen. Volgens mij kan dit echter niet standaard in de door mij genoemde plugin.
@Eijkb: Leuk dat je onze website hebt bekeken :) Het klopt inderdaad dat wij nog niet gebruik maken van een CDN. Tevens zijn er een hoop andere optimalisaties mogelijk voor LensBestel.nl Echter zitten we momenteel nog niet op een dedicated hosting omgeving waardoor we daar niet de volledige controle over hebben. Tevens is het implementeren van een CDN icm Magento geen klein klusje en moeten we het grondig testen alvorens livegang. Maar ook dit staat op onze roadmap. Gelukkig is de performance van onze website enorm verbeterd sinds we hier op hebben gefocused!
@Eric: Als je WordPress wilt optimaliseren raad ik je aan om de website http://yoast.com/ daarvoor te raadplegen. Absoluut een autoriteit op het gebied van WordPress SEO en optimalisatie.
Ter aanvulling:
YSlow geeft een aantal praktische tips die voor veel websites gelden. Neem dus ook eens een kijkje op http://developer.yahoo.com/performance/rules.html voor een complete lijst met best practices…
[...] Snelle website Hoe zorg je er precies voor dat je website sneller wordt? Dennis Vreeke van Frankwatching geeft een aantal tips & tools om je website gemakkelijk sneller te maken. < vorige post [...]
Leuk artikel. Verder word er weinig gezegd over het hebben van den dedicated server in tegenstelling tot een shared hosting. Daarbij is een dadicated server veel interessanter dan een shared hosting afgezien van de prijs.
dedicated server kan je veel meer mee en heb je alles in eigen hand. Daarin tegen is de server veel sneller. Dat komt doordat de server alleen voor jou gebruik is en als je een shared hosting hebt dan deel je een server met meerdere mensen en is je snelheid afhankelijk van het gebruik van de andere gebuikers.
@Dennis Vreeke
Mijn ervaring is juist dat een CDN vrij gemakkelijk te implementeren is, des te meer omdat Magento al gebruik maakt van aparte media/CSS/JS mappen. Voor afbeeldingen kan het nog simpeler, door de OnePica CDN extension te gebruiken. Hiermee kun je direct op Amazon S3 of andere CDN’s terecht, je hoeft niet eens zelf je afbeeldingen over te zetten. Daarbij zou ik ook iedereen aanraden om Magento minimaal op een VPS te hosten, niet in een shared omgeving. Tot 100 producten zou het kunnen, maar liever niet.
Wat ik in dit en vele andere artikelen over dit onderwerp mis is de optimalisatie van MySQL. Als Webhosting partij komen we regelmatig tegen dat zelf ontwikkelde websites (dus niet de standaard CMS systemen) veel winst kunnen halen uit het goed zetten van indexen op tabellen. Snelheidswinsten kunnen zeker bij grote aantallen records enorm zijn.