In het eerste deel van deze serie artikelen is er gesproken over wat laadtijd van een website is en hoe het te meten is. Omdat meten slechts de eerste stap in het traject is, wordt in dit artikel uitgelegd wat er gedaan kan worden om de laadtijd te verkleinen. Het voert te ver om alle technieken te behandelen, in dit artikel wordt het fundament van load-time optimization gelegd door middel van een aantal quickwins.

Comprimeer de te verzenden data
Computers bezitten tegenwoordig over veel meer rekenkracht dan in de jaren ’90 en hardware vormt dan ook geen bottleneck voor de laadtijd van een website. In de meeste gevallen zal de Internet verbinding de beperkende factor zijn. Gelukkig is hier eenvoudig voordeel uit te halen: de meeste browsers ondersteunen het ontvangen van gecomprimeerde data. Als een browser aangeeft content compressie te ondersteunen stuurt de server de content in gecomprimeerde vorm waarna de browser deze data weer uitpakt en de content weergeeft. Op deze manier wordt een deel van de belasting van de Internet verbinding verschoven naar het systeem van de eindgebruiker.

De Apache webserver is verreweg de meest populaire webserver en beschikbaar voor onder andere UNIX, Linux en Windows systemen. Om data compressie in te schakelen voor Apache kan gebruik worden gemaakt van mod_deflate. Compressie met IIS onder Windows is ook mogelijk en werkt op een soortgelijke manier.

Maak zoveel mogelijk gebruik van caching
Caching is met name interessant voor dynamische websites. Pagina’s die bij elke opvraag hun content verversen zijn een enorme belasting voor de server. Door gebruik te maken van serverside caching wordt er een statische kopie van de pagina bewaard en verstuurd bij aanvragen. Pas wanneer de content op de pagina wijzigt wordt er een nieuwe kopie gemaakt, waardoor er veel minder load op de server geplaatst wordt. Veel nieuws sites maken gebruik van serverside caching op momenten van grote drukte (bij rampen, oorlogen of ander brekend nieuws) en in extreme gevallen wordt er zelfs overgeschakeld naar een zeer vereenvoudigde versie van de statische website: alle onnodige objecten worden niet getoond (vaak worden zelfs de ads achterwege gelaten!).

Een andere (makkelijker te implementeren) techniek is clientside caching: hierbij bewaart de lokale browser een statische kopie van de pagina en controleert de browser eerst of er een wijziging is opgetreden in de pagina op de server. Alleen als de pagina gewijzigd is wordt er dus een nieuwe pagina verstuurd, anders wordt de lokale versie gebruik. Overigens zijn beide manieren van cachen prima naast elkaar te gebruiken. Voor verdere informatie over het toepassen van caching op Apache of Microsoft IIS verwijs ik naar het zeer uitgebreide Caching and Cache Control artikel op port80software.com.

Optimaliseer database queries
Database optimalisatie kan een enorme snelheidswinst opleveren voor websites die gebruik maken van een database voor het ophalen of verwerken van gegevens. Aangezien database optimization een volledig andere tak van sport is voert het te ver om dat in dit artikel te behandelen. Gelukkig bestaan er legio goede artikelen en boeken over database optimalisatie, zoals deze verzamelpagina over het optimaliseren van een MySQL database. Vooral complexe websites zoals sociale netwerken als Hyves en Facebook hebben last van dit probleem: social networks maken vaak gebruik van zeer uitgebreide database queries wat de laadtijd verhoogd.

Groepeer afbeeldingen
Een andere manier om het laden van afbeeldingen te optimaliseren is door verschillende afbeeldingen te groepen in 1 afbeelding en vervolgens door middel van een CSS trucje deze afbeeldingen weer als losse afbeeldingen tonen. Vooral bij een uit iconen bestaande navigatie of bijvoorbeeld een pagina met miniatuurweergaven is het interessant om diverse afbeeldingen te groepen. Het voordeel hiervan is dat de overhead van het herhaaldelijk opzetten van een verbinding wordt weggenomen.

div.navbar_php {
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url('/images/navbar.png');
background-repeat: no-repeat;
background-position: -Xpx -Ypx;
}

Waarbij je X en Y vervangt door de coördinaten van het icoon binnen de verzamelafbeelding. Meer informatie over deze techniek vind je in op Web Scaling Blog.

Plaats JavaScript & CSS in een extern bestand
JavaScript code is vaak zeer uitgebreid. Door deze code in een extern bestand te plaatsen en hierna te verwijzen kan ook hier weer gebruik worden gemaakt van caching: de webserver hoeft de code niet opnieuw te versturen wanneer deze ongewijzigd is. Daarnaast is het belangrijk om de JavaScript code referentie helemaal onderaan de pagina te plaatsen, net voor het sluiten van de <body> tag. Belangrijke kentekening hierbij is dat wanneer het om kritieke functionaliteiten gaat die door JavaScript worden gefaciliteerd het dan verstandiger kan zijn om de code bovenaan te plaatsen zodat de site ook functioneert wanneer de website nog niet volledig geladen is (dat wil zeggen: wanneer de browser nog niet aan de onderkant van de pagina toegekomen is). Ook CSS kan het beste in een extern bestand geplaatst worden zodat ook deze gecached kan worden.

Optimaliseer JavaScript & CSS
JavaScript en CSS code kan soms zeer sterk geoptimaliseerd worden door gebruik te maken van obfuscation en een aantal andere handigheidjes. Door deze technieken te gebruiken is het mogelijk om de code te comprimeren door alle onnodige data (comments, whitespace, etc.) eraf te strippen. Uiteraard betekent dit wel dat de code erg lastig te lezen wordt. Bewaar daarom twee versies van de code: de originele (leesbare) code en de geoptimaliseerde (onleesbare) code. Overigens is het belangrijk om op te merken dat wanneer er gebruik gemaakt wordt van data compressie binnen het HTTP protocol deze technieken minder effectief zijn. Op internet zijn diverse javascript obfuscators te vinden. Een simpel maar bruikbaar voorbeeld hiervan is JavaScriptCompressor.com.

Ook CSS is op een soortgelijke manier te comprimeren door zoveel mogelijk comments en spaties te verwijderen en door de values wat handiger toe te kennen. Een voorbeeld:

input {

    padding-top: 20px;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 0px;

}

kan geoptimaliseerd worden tot:

input {

padding:20px 20px 0;

}

Voor het optimaliseren van CSS code zijn diverse goede online tools beschikbaar zoals cleancss.com.

Voorkom onnodige redirects
Redirects vertragen een website aanzienlijk: de browser ontvangt als antwoord op een verzoek een redirect met als gevolg dat er opnieuw een verzoek verstuurd moet worden (naar de nieuwe locatie) voordat de pagina kan worden weergegeven. Webservers genereren vaak meer redirects dan je zou verwachten: wanneer de trailing slash vergeten wordt stuurt de webserver een 301 redirect wijzend naar de juiste locatie van de directory (pagina in feite). Dit is redelijk eenvoudig op te lossen door alle links van een trailing slash te voorzien maar dat lost niet het probleem op bij externe inbound links. Voor deze situaties kan er onder Apache gebruik worden gemaakt van de mod_rewrite module.

Verdere literatuur
De bovenstaande technieken bieden in korte tijd goede resultaten. Toch is dit geen definitieve lijst en zijn er nog veel meer mogelijkheden om de laadtijd van een website te beperken. Het is voor veel experts dan ook echt een sport geworden om de pagina’s van een website elke keer weer net iets kleiner te krijgen en daardoor de laadtijd weer een klein beetje te beperken. Zoek eens op Google naar website loadtime optimization en je vindt een enorme berg informatie. Mocht je dit toch te tijdrovend vinden, kijk dan eens naar WebsiteOptimization.com, waarmee je gratis en eenvoudig een analyse op je website kan uitvoeren.

Conclusie
Loadtime optimization is onterecht een ondergeschoven kindje: de reactietijd van een website draagt absoluut bij aan een betere gebruikerservaring. Door een aantal technieken zoals besproken in dit artikel te gebruiken is er al snel een aardige snelheidswinst (en soms zelfs een aardige kostenbesparing) te behalen. De technieken besproken in dit artikel zijn niet extreem lastig te implementeren, en sommige aanpassingen zoals het toepassen van caching en data compressie zijn soms met enkele kleine aanpassingen in de serverconfiguratie te activeren. Al met al is het uiterst interessant om onderzoek te doen naar de prestaties van de website en de kleine investering dat dit met zich meebrengt zal zich zeker terugverdienen door tevredenere bezoekers en misschien zelfs door een aardige kostenbesparing in het dataverkeer.