De 3 'vergeten' performanceregels

Van alle performance-regels en implementatietechnieken zijn er drie die vaak vergeten of onjuist toegepast worden. Dat is zonde, want ze zijn juist uiterst effectief. Heeft u ze correct geïmplementeerd?

Tekst: Arie van Donkelaar

E-commerce organisaties streven naar een snelle website of applicatie. Ze weten dat ze hun CSS- en JavaScript-bestanden moeten samenvoegen en verkleinen. En dat ze alle tekstgebaseerde bestanden moeten Gzippen. De keepalive staat aan om niet telkens een nieuwe connectie op te bouwen. Toch zijn er performanceregels en implementatietechnieken die vaak over het hoofd worden gezien:

We hebben een aantal sites van grote bedrijven (Vrijuit, Holland International, Alternate en Bol.com) beoordeeld en per ‘vergeten’ performanceregel gekeken of zij die wel toepassen.

1. Gebruik caching waar mogelijk
Ondersteun caching waar mogelijk met een hoge cache-tijd ( van minimaal een week). Door daarnaast gebruik te maken van versioning van statische files, zoals CSS en JavaScript, voorkomt u dat de bezoeker nog ‘oude’ bestanden treft.

Als versioning niet mogelijk is, ondersteun caching dan op basis van een revalidate (http 304). Daarbij stuurt de server alleen een nieuwe versie als deze is gewijzigd. Wordt uw site door veel mobiele gebruikers bezocht? Houd er dan rekening mee dat de objecten zonder compressie niet te groot mogen zijn.

Bol.com is de enige die het echt begrepen heeft door de caching op 29 dagen te zetten en bij een wijziging in de CSS een vernieuwd versienummer op te nemen in de bestandsnaam.

2. Bepaal de volgorde van laden en laad asynchroon
Zorg ervoor dat de gebruiker zo snel mogelijk de belangrijkste content kan zien. Wat de belangrijke content is, verschilt per site en per pagina. De algemene stelregel is dat de gebruiker snel herkenning moet hebben en tot actie kan overgaan. Het is verstandig om eerst de CSS te laden en daarna JavaScript (waar mogelijk asynchroon).

Alle niet kritieke JavaScript en CSS moeten non-blocking of na het onload event worden ingeladen.

Zowel Holland International als Bol.com heeft nagedacht over het moment waarop JavaScript ingeladen moeten worden en over de executie daarvan. HollandInternational zou nog nader kunnen kijken naar hoe kritisch bepaalde Scripts zijn.

3. Houd afbeeldingen zo klein mogelijk
Waar mogelijk slaat u afbeeldingen op als JPG-bestand met een zo hoog mogelijke compressie. Indien compressie niet mogelijk is, of de afbeelding transparantie moet bevatten, probeer het plaatje dan zo klein mogelijk te houden.

Vrijuit en Alternate hebben beide veel afbeeldigen die geoptimaliseerd kunnen worden. Bij Bol.com is er op het moment van testen een grote, niet geoptimaliseerde afbeelding die ervoor zorgt dat het optimalisatiepercentage op 77 procent blijft hangen.

Conclusie
Dit is een kleine steekproef bij ondernemingen waarvoor het online kanaal een grote rol van betekenis heeft. In de hele branche is er nog voldoende potentie om te verbeteren. Bol.com heeft op performance-gebied de zaken vrij goed op orde. Toch valt er ook daar nog winst te behalen.
 
NB: alle websites zijn op 16 juli 2015 om 11.00 uur bekeken.
 
Arie van Donkelaar is business analist bij MeasureWorks. Dit artikel verscheen eerder op de site van het bureau.