Loadtime optimization

Het optimaliseren van de Findability (SEO) en Usability zijn de belangrijkste aspecten waarop gefocust wordt tijdens verbetertrajecten van de (corporate) website of webapplicatie. Helaas is het verbeteren van de laadtijd van een website iets waar te weinig aandacht aan wordt besteed. Onterecht eigenlijk, want uiteindelijk staat de bezoeker (de gebruiker, klant of prospect) centraal en load-time optimization is wel degelijk een belangrijk onderdeel van usability verbeteringen. In deze serie van 2 artikelen wordt uigelegd wat er gedaan kan worden om de laadtijd van de website flink te verbeteren.

Tegenwoordig beschikt het grootste deel van de Nederlandse internet gebruikers over een breedband verbinding. Met de sterke stijging van het breedband gebruik is tegelijk het geduld van de Internetter afgenomen: als je website te langzaam laadt klikt de bezoeker al snel weg om de website van een ander (concurrerend?) bedrijf te bezoeken, met in het achterhoofd een negatieve associatie met je website.

Definitie
Voordat we aan de slag gaan is het zaak te definieren wat we precies onder laadtijd verstaan. Onder laadtijd verstaan we de totaal verstreken tijd vanaf het moment dat de browser de opdracht gegeven wordt een pagina te bezoeken en dat de website volledig bruikbaar is voor de bezoeker. Een website hoeft dus niet volledig geladen te zijn: als een website voor het grootste deel geladen is en bruikbaar is voor de bezoeker terwijl er op de achtergrond nog een aantal niet-kritische (en voor de bezoeker onzichtbare) onderdelen worden geladen zoals tracker scripts is dat voldoende voor het creeren van een goede gebruikerservaring.

Besparen op dataverkeer
Naast het voordeel dat een geoptimaliseerde website sneller laadt kan het optimaliseren van de laadtijd voor drukbezochte websites een aardige kostenbesparing opleveren. Als je de HTML code van google.com bekijkt valt het meteen op dat vrijwel alle witruimte tussen de tags ontbreekt: met het enorme volume van aanvragen op deze pagina kan Google een aardige besparing in dataverkeer bewerkstelligen. Als een pagina per dag 1 miljoen keer opgevraagd wordt en door te optimaliseren de dataverkeer per pagina met 20kb verminderd kan worden betekent dat een besparing van 19 gigabyte aan dataverkeer per dag!

Webapplicaties
Webapplicaties zijn in feite complexe websites: naast de gebruikelijke pagina-tot-pagina navigatie maken webapplicaties vaak gebruik van formulieren voor gegevensinvoer, registratie- en loginmogelijkheden, data export functionaliteit en technieken als AJAX (Asynchronous JavaScript and XML). Hoewel de kans op het ‘verliezen’ van een gebruiker/bezoeker bij trage webapplicaties kleiner is dan bij websites (waar nog geen band met de gebruiker bestaat), kan een trage webapplicatie tot meer frustatie leiden dan een ‘platte’ website. De reden hiervoor is dat het aantal handelingen bij een webapplicatie over het algemeen groter is dan bij een website en de handelingen elkaar ook nog eens sneller opvolgen. Wanneer in deze serie artikelen over websites gesproken wordt kan daar ook webapplicaties gelezen worden: alle tips zijn ook voor webapplicaties van toepassing.

Het meten van de laadtijd van je website
Er zijn verschillende manieren om de laadtijd van je website te meten. De eenvoudigste en tevens meest betrouwbare manier om dit te doen is door gebruik te maken van de Firefox add-on ‘FireBug’. FireBug maakt het mogelijk om de laadtijd van individuele onderdelen van je website in kaart te brengen. Belangrijke kanttekening die hierbij gemaakt moet worden is het feit dat de absolute snelheid van het laden van de website natuurlijk ook afhankelijk is van de verbinding, dus zorg ervoor altijd op een snelle verbinding de tests uit te voeren. Belangrijk hierbij is om aan te stippen dat het optimaliseren van de laadtijd van een website meer een kunst is dan een wetenschap: je kan nooit exact bepalen hoe lang een website laadt voor elke bezoeker op elk moment, maar je kan wel degelijk het verschil meten tussen een responsieve en een minder responsieve website.

De bovenstaande FireBug afbeelding geeft de laadtijd van de eerste 14 onderdelen van NU.nl weer. De data beslaat 5 kolommen: de naam van het object (inclusief in-URL variabelen), de ontvangen response code (ook handig voor het ontdekken van 404 errors!), het domein waar vanaf het object gedownload is, de omvang van het object en de laadtijd. De laadtijd wordt als een soort strokenplanning weergegeven: je ziet precies wanneer het downloaden begonnen is en wanneer dit voltooid is. Onderaan staat het totaal aantal aanvragen, de hoeveelheid verstuurde gegevens en de totaal verstreken tijd. Een laadtijd optimalisatie traject begint meestal met een onderzoek als deze: kijk hoe snel de website laadt en vooral welke specifieke objecten de boel vertragen.

Na een eerste introductie en uitleg over het meten van de laadtijd duiken we in het volgende artikel in de diverse technieken waarmee de laadtijd van de website verbeterd kan worden.