Maak optimaal gebruik van GTmetrix

Een van de nuttigste online tools die ik ken om de technische prestaties van een website te evalueren – inclusief de server waar de betreffende site op draait – is GTmetrix. Deze online tool combineert de metingen van Google PageSpeed en Yahoo! YSlow om de verschillende performance criteria te evalueren.

Wat analyseert GTmetrix?

PageSpeed en YSlow richten zich beiden op website prestaties maar analyseren die op verschillende wijze, waardoor de combinatie van die tools veel extra informatie oplevert. Hieronder geef ik wat voorbeelden van zaken die door GTmetrix worden bekeken:

Reductie van het aantal HTTP requests. Vaak wordt Javascript gebruikt om websites dynamisch te maken. Daarnaast wordt gebruik gemaakt van CSS (Cascading Style Sheets) om de vormgeving van webpagina’s los te koppelen van de inhoud, en uiteraard moeten er figuren van de server worden opgehaald. Voor al deze zaken geldt dat de informatie van de server wordt gehaald via een zogeheten HTTP request. Als allerlei scripts, images en stylesheet informatie als losse bestanden op de server staan, worden ze steeds via een nieuw verzoek opgehaald. Die opeenvolgende requests kunnen de laadtijd van de website enorm verlengen. Door zoveel mogelijk scripts, stylesheet informatie of figuren in één bestand te bundelen kan die informatie in één request worden opgehaald en wordt de website sneller.

GZip compressie. Omdat de informatie vanaf de webserver naar de browser moet worden gebracht, is het nuttig om die informatie vooraf zoveel mogelijk te comprimeren. GZip is een veelgebruikte compressiemethodiek op servers die de omvang van de opgevraagde informatie zomaar met 50% kan verminderen.

Image optimalisatie: Figuren – zeker foto’s in HD kwaliteit – zijn grote elementen en kosten relatief veel tijd om op te halen en vervolgens in het juiste formaat te renderen voor een browser. Daar kun je twee dingen aan doen. Allereerst voordat je de betreffende foto uploadt naar je webserver te zorgen dat deze geoptimaliseerd is. Dat betekent zoveel mogelijk gecomprimeerd zonder aan kwaliteit in te leveren. Hiervoor zijn allerlei tools beschikbaar. Daarnaast is het goed om de gewenste dimensies van de weergave te specificeren in je html met behulp van de height en width tags in je <img> elementen.

Caching. Met name browser caching is een techniek die de laadtijd van je webpagina’s versnelt en daarom in GTmetrix veel aandacht krijgt. De reden dat ik het nooit bovenaan mijn lijst zet, is dat browser caching alleen relevant is voor terugkerende gebruikers of bij het opvragen van achtereenvolgende pagina’s. Voor een nieuwe bezoeker die de eerste pagina inlaadt, voegt browser caching nog niets toe omdat er nog geen informatie van de website in de cache was opgeslagen. De allereerste indruk van een website verbetert er dus niet mee, alles wat daarna komt wel.

HTTP Keep-Alive. Als dit geactiveerd is op de server hoeft er bij opeenvolgende HTTP requests niet steeds eerst een nieuwe TCP verbinding tussen de computer van de gebruiker en de server te worden opgezet. Dat betekent minder communicatieoverhead en levert dan ook een behoorlijke versnelling op.

Het zijn zomaar wat voorbeelden van zaken die de overall laadtijd van je website kunnen versnellen. De genoemde tools geven een compleet overzicht van hoe een website op alle verschillende aspecten scoort en wat de verbeterpunten zijn. Die hebben lang niet allemaal direct te maken met de server zelf, maar sommige zaken dienen door de server ondersteund te worden of te worden geactiveerd. Naast al deze zaken blijft ook de responsetijd van de server zelf natuurlijk belangrijk. Want hoe geoptimaliseerd je de website ook hebt, een trage server kun je er niet mee wegpoetsen.

Zelf aan de slag met de GTmetrix aanbevelingen

Mocht je bij veel van bovenstaande zaken eigenlijk niet goed weten hoe je ermee aan de slag moet, dan zijn er gelukkig voor veel Content Management Systemen oplossingen beschikbaar die dit voor je kunnen doen. Zelf heb ik goede ervaringen met de JCH Optimize extensie voor Joomla, WordPress, Magento en Drupal. Die plugin zorgt er direct voor dat bijvoorbeeld Javascript en CSS files tot één bestand worden gecombineerd, maakt een zogeheten ‘sprite’ van achtergrond foto’s en verzorgt de noodzakelijke compressie. Zonder dat je er verder omkijken naar hebt.