Wat jouw website traag maakt (en wat niet)

Deze site haalt 100 op snelheid, op een telefoon. Dat is leuk om te zeggen, maar het interessante zit in hoe ik ernaartoe gewerkt heb. Want mijn eerste vermoeden was fout, en dat is precies waarom ik dit opschrijf.

Mijn eerste verdachte

Toen de site traag aanvoelde op mobiel, keek ik meteen naar de JavaScript. Er zat een fout in die ik met eigen ogen kon zien: tijdens het scrollen werden afmetingen opgemeten en meteen daarna aangepast, door elkaar heen. De browser moet dan telkens opnieuw rekenen. Klassieke fout, lelijke code.

Ik heb het netjes gemaakt. Metingen eerst, wijzigingen daarna. Resultaat: van 0,196 naar 0,152 milliseconde per beeld.

Een verbetering van ongeveer anderhalve keer, op iets dat niemand ooit gevoeld zou hebben.

Wat het echt was

Pas toen ik een echte meting deed in plaats van een vermoeden, kwam de waarheid boven.

1,74 seconde stond de pagina te wachten op bestanden die het tekenen blokkeren. Niet mijn code. De lettertypes van Google.

Die staan op een andere server. Je browser moet eerst die server opzoeken, dan een beveiligde verbinding opzetten, dan een bestand ophalen dat zegt waar de echte lettertypes staan, en dan die lettertypes ophalen. Pas daarna mag er tekst op je scherm. Op een goede verbinding merk je dat amper. Op mobiel internet in de trein is dat je hele eerste indruk.

Ik heb de lettertypes naar mijn eigen server gehaald. De score ging van 85 naar 100.

Al die tijd die ik in de JavaScript gestoken had, was tien keer minder waard dan dat ene bestand verplaatsen.

Waarom ik dat niet gewoon wist

Ik wist het wel, in theorie. Iedereen die websites bouwt weet dat externe lettertypes geld kosten.

Maar ik had een vermoeden dat beter voelde. Ik had code gezien die fout was, en fout gezien voelt als gevonden. Dat is de val: je gaat werken aan wat je herkent in plaats van aan wat telt.

Daar is maar één oplossing voor, en die is saai. Meten voor je begint.

Een ding waar ik ingetrapt ben

Nog een les, misschien de nuttigste.

Ik heb op een bepaald moment zitten meten tegen de testserver op mijn eigen laptop. Die stuurt bestanden ongecomprimeerd door. Mijn stylesheet leek daar 97 kilobyte, terwijl bezoekers er 21 krijgen. Ik zat dus een probleem op te lossen dat in werkelijkheid niet bestond.

Meet tegen de echte site. Altijd. Een meting op je eigen machine vertelt je iets over je eigen machine.

Wat ik uiteindelijk gedaan heb

Voor wie het concreet wil, in volgorde van wat het opleverde:

Lettertypes zelf hosten. Veruit het grootste effect. Let op dat je dezelfde letter niet drie keer binnenhaalt: Google serveert hetzelfde bestand onder verschillende adressen per dikte.
Beelden op maat. Een foto van 1600 pixels breed in een vakje van 340 pixels is niet alleen traag te downloaden, hij is ook traag uit te pakken. Voor de logo's op deze site bleek zelfs 212 kilobyte terug te brengen tot 36.
Zware effecten uitzetten op kleine schermen. Een draaiend kleurverloop met vervaging ziet er prachtig uit en kost een telefoon meer dan je denkt.
Pas daarna de JavaScript. Die fout was echt, maar ze stond vierde in de rij.

En dan het eerlijke stuk

Snelheid is geen doel op zich. Niemand kiest jou omdat je site 100 scoort.

Maar traagheid kost je wel klanten, vooral de bezoekers die je nog niet kent en die nog geen reden hebben om te wachten. En het mooiste eraan: bijna alles hierboven is eenmalig werk. Je doet het goed bij het bouwen, en daarna blijft het goed.

Twijfel je of jouw site hieraan lijdt? Stuur me het adres door, dan meet ik het even na en zeg ik eerlijk wat ik zie.