Website Optimalisatie, maar dan met praktische tips waar je wat aan hebt in plaats van die blabla-adviezen van mensen die alleen de theorie kennen. Dit is de eerste uit een reeks artikelen, ik hoop dat je er wat aan hebt.

Vandaag de dag zijn er diverse manieren om een website te analyseren, je kunt hierbij denken aan programmatuur welke kijkt hoe groot je website is en je vervolgens advies geeft op welke gebieden verbeteringen moet maken. Naast analyse tools zijn er bijvoorbeeld ook code-crunchers/optimizers (deze maken je code effectiever of comprimeren deze), de image optimizers (deze maken je images compacter) en de geintegreerde tools voor je webserver (zoals Apache Bench die de complete traffic bekijkt en in staat is om stress tests uit te voeren).

Ikzelf maak vaak gebruik van browser-tools om een site te analyseren zodat je snel een beeld krijgt van de bottlenecks in de website (dit is hoofdzakelijk grafisch en codetechnisch).

Als je gaat optimaliseren raad ik aan om Firebug en YSlow te installeren voor Firefox 2/3. Met Firebug kun je heel snel zien hoe groot de website is, welke objecten het grootste zijn en hoe lang de site (theoretisch) zal laden.

Naast de net-analyser in Firebug zit er ook een kick-ass Javascript debugger in, evenals een HTML inspector waarbij je stapsgewijs door de source code kunt lopen. Wat ook een mooie feature is van Firebug is de rechterklik -> Inspect Element optie waardoor het geselecteerde element direct in de HTML inspector wordt getoond.

YSlow is weer een meer gespecificeerde add-on op Firebug. Deze tool geeft advies over de punten waar je op moet letten, je website krijgt daarnaast ook een Performance Grade van deze tool. Wat verder interessant aan deze tool is, is dat je website helemaal wordt ontleed.

Deze grafiek geeft de opbouw van digitael.nl weer. Je ziet bijvoorbeeld het aantal kb’s in HTML, het aantal externe JavaScript files en hoeveel images er in je site worden weergegeven.

Bij het gebruik van deze view kun je snel zien waar je eventueel verbeterslagen kunt maken. Hier zie ik bijvoorbeeld dat http (gzip) compressie is ingeschakeld voor deze website. Dat betekent dat er al maximale compressie van alle scripts en files plaatsvind. Indien niet het geval was geweest had ik hier al een behoorlijke performance winst mee kunnen maken (maar hierover later meer in een ander artikel).

Deze tools geven je een goed inzicht wat je kunt doen om een snelle winst te halen. Ik raad je aan om er eens naar te kijken. Verder kun je nog kijken naar onderstaande web-tools. Deze geven een idee van de laadtijd, aantal connecties en geven je inzicht of je website mogelijk te zwaar is. Succes!

WebsiteOptimization.com (Web-based)
Pingdom.com (Web-based)
Gomez (Web-based)

Tags: Analysers, Optimalisatie, Snelheid, Tools, Usability, Webdesign