Als je je veel bezig houdt met het maken van websites, is het belangrijk te snappen dat je je websites snel moet houden. Hierin behandel ik standaard technieken die worden gebruikt om dit zoveel mogelijk te garanderen. Waarom zou je je website willen optimaliseren op snelheid?

(afbeelding van de html5boilerplate website).

Hier zie je het verschil in laadtijd van een geoptimaliseerde pagina en een niet geoptimaliseerde. Hoe groter je websites worden, hoe groter het verschil zal zijn.

HTML5boilerplate
In deze post zal ik een hoop technieken behandelen die je kan uitvoeren om je pagina’s te optimaliseren. Je kan ook nieuwe websites maken op basis van de HTML5boilerplate, hierin zitten alle optimalisaties ingebakken die ik behandel (plus nog veel meer). Er zit een tool bij die heel snel alles voor je kan optimaliseren.

Expire Headers
Met Expire Headers kan je instellen hoelang een document gecached moet worden. Als je bijvoorbeeld je CSS bestanden voorziet van versie nummers (geautomatiseerd natuurlijk, bijvoorbeeld via HTML5boilerplate) zoals style.1.css weet je zeker dat het bestand style.1.css nooit zal veranderen, als jij iets in je code veranderd wordt het bestand style.2.css genoemd. Dit wetend kan je in je webserver (waarschijnlijk Apache) instellen dat het bestand style.1.css heel lang gecached mag worden. Je webserver geeft dit dan mee aan de client en met een beetje geluk hoeft de client maar eenmalig je CSS file binnen te trekken. Hier kan je voorbeeld code voorin je .htaccess (configuratie bestand van Apache) vinden.

Zet je JavaScript onderaan de pagina

(niet van mij, bron: onbekend)

Op een moment dat een browser een pagina laadt en hij komt JavaScript code tegen (inline, of externe scripts) wordt alles op pauze gezet totdat alle JavaScript gedownload en verwerkt is. als je JavaScript in je head zet gaat je browser aan de slag met je JS en gaat hierna pas beginnen met het renderen van de pagina. Omdat je 9 van de 10 keer alleen JavaScript gebruikt om iets op de pagina te manipuleren, doe je hier toch nog niks mee totdat de complete pagina gerenderd is. Als de browser toch op pauze moet, doe dit dan terwijl de gebruiker alvast naar je pagina kan kijken ipv. een wit scherm.

Als je je JS vlak voor je zet valideert hij netjes en oogt je pagina een stuk sneller.

Minimaliseer het aantal HTTP requests
Het grote protocol achter het web (HTTP) is redelijk oud en niet zo efficient, als je bijvoorbeeld 10 losse bestanden aanvraagt zal dit in de regel langzamer gaan dan 1 bestand dat 2x zo groot is als de losse bestanden verzamelt. Dit komt omdat er bij elke aanvraag opnieuw een connectie moet worden gemaakt. Hierdoor is het belangrijk er altijd voor te zorgen dat je zo min mogelijk links naar scripts, CSS, afbeeldingen ed. staan. Als je werkt met meerdere CSS bestanden is het in de regel altijd verstandiger om ze in 1 bestand te stoppen (ook een @import is een nieuwe HTTP request). Je hoeft je werkwijze niet aan te passen, zolang je er maar voor zorgt dat de productie versie maar een CSS bestand heeft (HTML5boilerplate doet dit automatisch voor je). Ook zijn sprites (meerdere afbeeldingen in een plaatje) beter dan losse afbeeldingen.

Bij JavaScript ligt het iets ingewikkelder omdat je soms op een bepaalde pagina een heel zwaar script nodig hebt en op de rest van je site niet. In dat geval zou ik kijken naar hoe waarschijnlijk het is dat een bezoeker op je site op die pagina komt, als dat niet waarschijnlijk is kan je dat scriptje in een los bestand zetten.

Hou je bestanden zo klein mogelijk
CSS en JS: Het is slim om je CSS voor de productie versie te minify’en (dit haalt alle witregels weg). Browsers interpreteren zulke code net zo snel als gewone CSS alleen is het bestand in een keer een stuk kleiner. Dit gaat ook op voor al je JavaScript (hier worden lange variabele en functie namen ook nog vervangen door a, b, c enz.

HTML: Standaarden VS optimalisatie
Je kan je HTML een stuk kleiner maken door bijv. accolades te laten bij id’s en classes:

 VS 

Browsers hebben hier geen moeite mee, maar de validator struikelt hier wel over. Dit is een moeilijke discussie aangezien de standaarden wel een kwaliteitsnorm garanderen die je anders negeert.

Test je pagina’s
Yahoo heeft een tooltje gemaakt waarmee je kan testen hoe goed je pagina voldoet aan ‘algemen optmialisatie regels’. Installeer YSlow en test hem op je websites.