Blog

Hij merkt op dat de meeste programmeurs zich enkel focussen op server-side optimalisaties, terwijl de grootste vertragingen zich tegenwoordig aan de kant van de bezoeker bevinden. Ik heb de belangrijkste bevindingen even op een rijtje gezet.

Focus niet enkel op het HTML bestand

Het eerste en belangrijkste bestand dat door de browser wordt gedownload is het (x)html bestand. Hoewel alle serverside bewerkingen in dit bestand zitten, neemt het inladen hiervan toch slechts 5% van de totale tijd in. De meeste vertragingen komen door het inladen van afbeeldingen, flash-, css- en JavaScript bestanden.

Vertrouw niet enkel op caching

Daar waar caching op serverside vaak een enorme snelheidsverbetering betekent, vallen de cachingprestaties in de meeste browsers vaak tegen. Er kan dus niet zomaar worden verondersteld dat terugkerende bezoekers veel voordeel uit hun caching zullen halen.

Beperk het aantal HTTP requests

De grootste bottleneck is het aantal HTTP verbindingen die gelegd worden tijdens het laden van een pagina.

Hoewel het een nette manier van werken is om ieder script in een apart .js bestand te zetten, zorgt het samenvoegen van alle scripts tot 1 bestand vaak al voor een merkbare boost.
Kleine afbeeldingen zoals iconen kunnen vaak samengevoegd worden tot 1 grote afbeelding, wat men "CSS Sprites" noemt.
Voor homepages is het zelfs vaak aangeraden om alle css- en javascript code direct in de html te verwerken.

Inladen van CSS en JavaScript

Niet enkel de totale laadtijd van een pagina is belangrijk, maar vooral de snelheid zoals een bezoeker die ervaart is van belang.
Door alle CSS bestanden bovenaan je pagina in te laden (en dan enkel met link-tags, niet @import) kan het eerste stukje html al direct juist worden weergegeven door de browser.
JavaScript functies zijn meestal niet direct nodig en kunnen dus beter pas onderaan de pagina worden geladen.
Door deze 2 simpele optimalisaties kan een bezoeker vaak al de volledige pagina bekijken, zelfs nog voor hij volledig is ingeladen.

Verklein JavaScript en CSS code

JavaScript en CSS code kan verkleind worden door gebruik te maken van een "minifier". Deze haalt onnodige tekens en commentaar uit de code en verkleint de gehele code. Dit heeft echter wel als nadeel dat de code onleesbaar wordt en debuggen dus zo goed als onmogelijk is.

Gebruik altijd een favicon

Het klinkt misschien vreemd, maar het aanbieden van een favicon.ico zorgt ook weer voor een minieme snelheidswinst. Indien er geen favicon is ingesteld, zal een browser steeds een request doen, wat telkens leidt tot een 404.

Maak gebruik van preloading

Een simpele truc die door o.a. Google wordt gebruikt, is het vooraf inladen van veelgebruikte afbeeldingen en scripts.
Terwijl een bezoeker op de homepage een zoekopdracht intypt, worden op de achtergrond al afbeeldingen gedownload en gecached, terwijl ze pas op de volgende pagina gebruikt zullen worden. Bezoekers merken niets van het laden en zullen de zoekresultaten veel sneller zien verschijnen. Deze truc biedt enkel voordeel op kleine pagina's die van hun eigen al weinig HTTP requests nodig hebben.

We willen Nate Koechley bedanken voor zijn leerrijke presentatie en zullen zijn bevindingen zeker gebruiken in onze toekomstige projecten.