Waarom je je html moet verkleinen
Google pagespeed geeft als tip dat het verkleinen van html snelheidswinst oplevert. Logisch, want het aantal kb's is kleiner, dus is de pagina sneller binnen. Eigenlijk is dat al reden genoeg om het te doen, maar Google zegt ook dat het er voor zorgt dat een pagina sneller op je scherm staat. Is dat ook zo? Ik wilde dat onderzoeken. Dat maakt het argument een stuk sterker.
Voor deze test heb ik twee versies van m'n homepage gebruikt, en die groter gemaakt zodat ze zo'n 150 kb waren. Versie 1 had spaties en regeleindes, in versie 2 waren deze weggehaald. Om er zeker van te zijn dat ik echt alleen de snelheid van de html testte heb ik alle externe bestanden (afbeeldingen, css, javascript) er uit gehaald.
Wat wil ik weten?
Een tijdje terug kwam ik dit overzicht tegen. Het laat heel mooi zien wat er gebeurt als je een webpagina opvraagt. Voor deze test wil ik alleen weten of het verkleinen het renderen van een pagina sneller maakt, dus of het voor een browser iets uitmaakt. Dat betekent dat we naar de events vanaf domLoading moeten kijken. Alles daarvoor heeft te maken met o.a. de server en je verbinding.
De test
Voor m'n vorige test gebruikte ik Phantomas i.c.m. phantomjs (een webkit browser, a la Chrome of Safari) om een aantal keer een pagina op te vragen en de resultaten ervan in een grafiek te kunnen tekenen. Maar de resultaten voor m'n specifieke tests waren allemaal 0. De oplossing was om slimerjs.org (een gecko browser, a la Firefox) te gebruiken. Die ondersteunt namelijk de Navigation Timing API. Dit zijn accurate cijfers over wat er in een browser gebeurt.
Na veel verschillende tests bleek dat de verschillen in het tekenen van de pagina heel groot waren. Soms heel snel, soms heel langzaam. En hoe de testopzet ook was, deze verschillen kreeg ik er niet uit, en ik kan ze ook niet verklaren. Eigenlijk moest ik een andere methode gebruiken om te testen, maar helaas zijn er niet veel manieren om front-end performance te testen. Het enige dat er nog op zat was om zelf een test te schrijven. Uiteindelijk heb ik een scriptje geschreven die de testpagina 500 keer opnieuw in een iframe laadt, en daar haal ik dankzij de Navigation Timing API de juiste cijfers uit.
De resultaten
| Test | Origineel | Minified | Winst |
| domLoading | 93 ms | 74 ms | 21% sneller |
| domInteractive | 58 ms | 51 ms | 12% sneller |
Helaas geen mooie grafiekjes deze keer, maar de cijfers laten volgens mij mooi zien dat het verkleinen toch echt sneller is.