Snelheid heeft niet alleen impact op de zoekmachineresultaten, ze biedt de gebruiker ook een betere ervaring. Hierdoor wordt de kans op conversie ook een stuk groter. Grote online marktleiders hebben ieder afzonderlijk getest wat de invloed van laadtijd is op conversies en transacties online. Uit die onderzoeken is wel dezelfde conclusie naar voren gekomen: iedere seconde verbetering in laadtijd van een pagina stond gemiddeld gelijk aan 2 procent extra conversies. En sterker nog: iedere 100 milliseconde verbetering zorgde zelfs voor gemiddeld 1 procent groei van de omzet.
Met een website die sneller laadt, slaat u dus meerdere vliegen in één klap: er wordt meer traffic gegenereerd door een betere indexatie en extra waardering van Google én de mensen die op uw website komen zijn eerder geneigd tot kopen. Een derde vlieg die hiermee geslagen wordt, is de besparing in kosten door verminderd dataverbruik.
Waarom wordt een website traag?
Een website kan traag zijn door een aantal factoren. Een eerste factor is de serveromgeving. Wanneer er flink bespaard wordt op de server-omgeving, is de kans groot dat de server waar uw website op draait ook vele andere websites in de lucht houdt. Wat dus betekent dat ook alle verzoeken en berekeningen van deze websites verwerkt moeten worden. Dat komt de totale server-snelheid niet ten goede.
Een tweede oorzaak is de omvang en opbouw van de content op de website. Met content doel ik niet op platte tekst maar met name op afbeeldingen, video’s en scripts. Bij iedere pagina die geladen wordt, moet de server de content inladen vanuit een database. Hoe meer en hoe groter de content op de pagina, des te vaker de server de data uit de database moet opvragen en hoe groter die data is. U kunt het waarschijnlijk al raden: door de vele en grote requests wordt de pagina langzamer geladen dan wanneer u maar één zin en geen opmaak op een pagina heeft. Maar ja, op zo’n pagina is dan weer geen conversie mogelijk. Dé manier om uw website sneller te maken, los van de keus voor een goede server-omgeving is dus het verkleinen van het aantal server requests, oftewel de data die de server moet opvragen zodra de pagina geladen wordt.
Als de bezoeker van uw website een trage internetverbinding, een verouderde browser of een trage computer heeft, heeft dat ook invloed op de laadtijd die uw gebruiker ervaart. Er zit dus altijd verschil tussen de laadtijd vanaf de server en de laadtijdervaring van de gebruiker. Dit zijn helaas onbeheersbare factoren.
De laadtijd van uw website meten
Er zijn diverse tools en webgebaseerde programma’s waarmee u de laadtijd van uw website kunt meten. Deze tools geven niet alleen inzicht in de laadtijd, maar ze geven ook weer waar precies de knelpunten zitten en wat u kunt doen om de laadtijd te versnellen.
Yslow: hiervoor kunt u een Mozilla of Chrome extensie downloaden
Google Analytics: Gedrag -> Sitespeed -> Overzicht (NB: Let er op dat er 1 procent sampling data gebruikt wordt, dit kunt u instellen. Het is ook mogelijk alle data inzichtelijk te krijgen)
Hoe u uw website sneller kunt (laten) maken
Om even terug te komen op mijn eerste alinea, waarin ik aangaf dat u zelf de mogelijkheid heeft om uw website sneller te maken: wanneer u over de juiste programmeervaardigheden beschikt, kan dat absoluut. Bent u een ondernemer die afhankelijk is van een webbouwer? Dan zal deze het voor u moeten oppakken.
Zo min mogelijk http requests
Zoals hierboven te lezen is, is het van belang het aantal serverrequests te verlagen. Maar hoe doen we dat zonder concessies te doen aan de inhoud van de website? Daar heb ik een top tien van tips voor, die hieronder één voor één worden toegelicht. Er is uiteraard nog een flink aantal andere manieren om de snelheid te verbeteren. Daar zal de komende periode op het Easy Blog meer over te lezen zijn.
1. Gebruik zo min mogelijk CSS- en JavaScript-bestanden als mogelijk
CSS-(stylesheets) en .JS (JavaScript)-bestanden kunnen, per soort, worden samengevoegd. Door gebruik te maken van minder bestanden, hoeft de server minder bestanden op te halen. Dit komt ten goede aan de laadtijd voor andere onderdelen. Het beste scenario betekent 1 CSS- en 1 JS-bestand, maar dat is vaak een utopia. Twee tot drie bestanden van ieder is vaak al een hele verbetering.
2. Plaats de CSS in de header van uw website en JS in de footer
JavaScript is vaak van invloed op de style van een website en kan derhalve dus de regels uit een CSS overrulen. Om dit te voorkomen en om ervoor te zorgen dat het laden van het vaak zware JavaScript, het renderen (inladen) van de rest van de website niet vertraagt, kan JavaScript beter onderin de webpagina worden geplaatst. Hiernaast is het overigens ook mogelijk om alle JavaScript direct in te laden met Headjs.com.
3. Minimaliseer de CSS- en JavaScript-bestanden
CSS- en JavaScript-bestanden bevatten vaak veel pagebreaks, witregels, spaties en comments. Deze zaken maken zulke bestanden onnodig groot. Hoe minimaal het ook lijkt, als een CSS-bestand bijvoorbeeld 2.200 regels heeft, waarvan 20 procent witregel is en 10 procent comments, dan bespaart dit al 680 regels. Wanneer vervolgens nog eens alle regels achter elkaar worden gezet, waardoor er in feite maar één lange regel in het CSS-bestand staat, dan bespaart dat ook een groot percentage. Het is logisch dat daardoor de bestanden kleiner worden en dus minder zwaar zijn om op te halen.
4. Verwijder alle comments uit de HTML
Net als bij de CSS- en .JS-bestanden kunnen ook alle comments en overbodige regels uit de HTML- /PHP-pagina’s verwijderd worden. Ook dit maakt de grootte van de op te roepen data veel kleiner.
5. Verwijder alle inline styles uit de HTML/PHP
Alle regels die opmaakgerelateerd zijn, dienen in een CSS te staan en niet in de HTML. Opmaakregels in een HTML noemen we ‘inline styles’. Deze inline styles zijn een slordigheid in de code van de website, omdat voor de opmaak dus de CSS-bestanden bedoeld zijn.
6. Maak standaard afbeeldingen op als sprites in plaats van losse images
Een sprite is een bestand waar alle standaard images van een pagina op staan en waar, door middel van CSS-regels, wordt bepaald welk gedeelte van de image waar zichtbaar is. Op Spriteme.org kunnen overzichten worden gemaakt van welke items in een sprite opgenomen kunnen worden. Let hierbij wel op metrepeating images: heeft u een verticale sprite nodig of kan alles in één bestand. Op deze manier hoeft er maar één afbeelding geladen te worden in plaats van bijvoorbeeld 12 afzonderlijke bestanden:
7. Maak afbeeldingen in het juiste formaat op en geef dimensies mee in de code
De overige afbeeldingen kunnen ook geoptimaliseerd worden in grootte om zo meer ruimte op de server en op de pagina te besparen. Door de images op exact het juiste formaat te uploaden en door de dimensies van iedere image mee te geven aan de code, hoeven er minder zware bestanden ingeladen te worden. Op Tinypng.org en Jpegmini.com zijn tools beschikbaar om dit te automatiseren.
8. Laad statische elementen, files of afbeeldingen in vanuit een content delevery network (CDN)
Het is ook mogelijk, en aan te raden, diverse onderdelen van de website niet meer te hosten op uw eigen server maar op een cloud based delivery network. De afbeeldingen, CSS-bestanden, pagina templates etc. die niet op de server van de website staan, hoeven dus ook niet via het eigen netwerk aangeroepen te worden. Door gebruik te maken van een CDN, zoals Cloudflare.com, laden elementen in vanuit een externe omgeving die ook dicht bij de gebruikers staat. Dit is relatief eenvoudig en reduceert het dataverbruik met grote stappen. Meer info over CDN’s vindt u hier.
9. Maak zo min mogelijk (tot geen) gebruik van cookies
Voor ieder element op de website wordt gecontroleerd of er cookies geplaatst zijn. De server is constant op zoek naar data in de communicatie naar de gebruiker en vraagt dus ook telkens de cookies op. Deze controle vindt plaats bij elke inlading op ieder onderdeel op de website. Zorg ervoor dat deze cookies niet geset worden om het aantal requests te minimaliseren. Dit kan door middel van Apache header manipulatie:
Om het plaatsen van cookies uit te schakelen, plaatst u de regel:
Dit geldt overigens niet voor third party cookies, dus webstatistieken worden nog steeds gemeten.
