Tekst: Gerk Mulder
Uiteraard heeft het soort server waar de website op gehost wordt invloed op de laadtijd van uw website. Maar er zijn veel manieren om ook met een niet al te snelle server een enorme stap vooruit te zetten in de laadtijd van uw website.
Is laadtijd dan zo belangrijk?
Ja. Punt. Laadtijd is dusdanig belangrijk dat een trage website zelfs een negatieve impact op de organische zoekresultaten in Google heeft. Google wil namelijk het beste voor zijn bezoekers. Een trage website heeft een negatieve invloed op de online ervaring en wordt door Google als minder kwalitatief gezien.
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.
- Google Page Speed insights
- Pingdom website speed test
- Yslow: hiervoor kunt u een Mozilla of Chrome extensie downloaden
- Webpagetest
- 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 met repeating 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.
Door middel van datacompressie op basis van bijvoorbeeld GZIP comprimeert u serverfiles, waardoor deze minder groot zijn en dus minder impact hebben tijdens het inlaadproces:
Slechts een klein aantal tips
Gerk Mulder is SEO specialist bij Easy Internet Marketing.
Over het allerbelangrijkste punt wordt in het artikel helaas niets gezegd, en dat is optimalisatie van de scripts (PHP, ASP etc), en dan met name de databasequeries in deze script. Op een webserver worden eerst de scripts (en databasequeries) als eerste uitgevoerd. Dit levert de HTML pagina op, en daarna komen pas de zaken aan bod die in het artikel worden genoemd. Als het uitvoeren van de scripts alleen al seconden duurt, kan je je CSS, JavaScript en andere content nog zo minimaliseren maar dan wordt het echt nooit meer snel.
Tegenwoordig gebruiken de meeste websites standaard software, vaak nog met de nodige plugins die vaak heel inefficiënt geschreven zijn. Als het dan traag wordt wijst men inderdaad snel naar de provider, meestal ten onrechte.
Misschien een idee om ook de tips voor IIS te vermelden.
Zoals Mark ook zegt: de SQL queries en database kun je ook versnellen. Verder ook loadbalancing. Cloud hosting ivm scaling en geolocaties. sommige data cachen in je code etc.
Verder kun je ook kijken naar je hosting. Ik ben benieuwd hoeveel mensen bij de thuiswinkel staan ingeschreven en shared hosting gebruiken voor hun site.
Terechte opmerkinging over de techniek. Zoals aangegeven zijn de punten in de lijst niet de enige punten die je kunt optimaliseren. Wat je optimaliseert hangt daarnaast ook nog eens van de website af en of je dezelfde prioriteit zou moeten kiezen voor jouw website.
Of scripts het allerbelangrijkste zijn (in elke situatie) durf ik ook te betwijfelen. Heeft je server te weinig geheugen of een trage verbinding, dan kan je database of CMS bloedsnel zijn, maar is het voor de bezoeker mogelijk alsnog erg traag. Ik ben het wel met Mark eens dat gebruikers vaak weinig kennis hebben van het standaard systeem en vaak onzorgvuldig omgaan met het installeren van plugins en extensies.
Idealiter breng je eerst alles in kaart en bepaal je dan de prioriteiten. Ook kan het dan nog altijd zo zijn dat je de queries laat voor wat ze zijn maar dat je met cache of een CDN goedkoper overall meer winst kunt behalen.
Veel van de verbeteringen aan de onderliggende techniek los je zelf echter niet zo makkelijk op (voor de gemiddelde webshop eigenaar), maar bovenstaande tips zijn wel voor bijna iedereen bruikbaar.