De 3 “vergeten” performanceregels

Published on by measureworks

Van alle performanceregels en implementatietechnieken zijn er 3 die vaak vergeten of onjuist toegepast worden. Dat is zonde, want ze zijn juist uiterst effectief. Heb jij ze correct geïmplementeerd?

De meeste partijen streven naar een snelle website of applicatie. Ze weten dat ze hun CSS en Javascript bestanden moeten samenvoegen en verkleinen. En dat ze alle tekst gebaseerde bestanden moeten Gzippen. De keep-alive staat uiteraard ook aan om niet telkens een nieuwe connectie op te bouwen. Toch zijn er een aantal performanceregels en implementatietechnieken die vaak over het hoofd gezien worden.

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 1 week of hoger). Door daarnaast gebruik te maken van versioning van statische files, zoals CSS en Javascript, voorkom je dat de bezoeker nog ‘oude” bestanden heeft.

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 jouw site door veel mobiele gebruikers bezocht? Houd er dan rekening mee dat de objecten zonder compressie niet te groot mogen zijn.

Caching in de praktijk

www.vrijuit.nl www.hollandinternational.nl
  • Afbeeldingen minder dan 24 uur
  • CSS en Javascript 7 dagen
  • Afbeeldingen 20 jaar
  • CSS en Javascript tussen de 1 uur en 20 jaar
www.alternate.nl www.bol.com
  • Afbeeldingen 1 uur
  • CSS en Javascript op basis van If-Not-Modified
  • Afbeeldingen, CSS en Javascript op 29 dagen


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 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.

 Laadvolgorde in de praktijk

www.vrijuit.nl www.hollandinternational.nl
  • Geen duidelijk onderscheid in type Javascript en CSS (kritiek of niet)
  • Javascript en CSS laden door elkaar heen
  • Deels asynchroon geladen
  • Duidelijk onderscheid in type Javascript en CSS (kritiek of niet)
  • Javascript wordt nog wel voor het Onload event uitgevoerd
www.alternate.nl www.bol.com
  • Geen duidelijk onderscheid in type Javascript en CSS (kritiek of niet)
  • Javascript en CSS laden door elkaar heen
  • Deels asynchroon geladen
  • Duidelijk onderscheid in type Javascript en CSS (kritiek of niet)
  • Javascript en CSS laden deels door elkaar heen
  • Javascript wordt pas uitgevoerd na het Onload event middels een queing script

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

3. Houd afbeeldingen zo klein mogelijk

Waar mogelijk sla je afbeeldingen op als JPG met een zo hoog mogelijke compressie. Indien compressie niet mogelijk is, of de afbeelding transparancy moet bevatten, probeer het plaatje dan zo klein mogelijk te houden.

Grootte van afbeeldingen in de praktijk

www.vrijuit.nl www.hollandinternational.nl
Afbeeldingen kunnen met 15%
verkleind worden
Afbeeldingen kunnen met 6%
verkleind worden
www.alternate.nl www.bol.com
Afbeeldingen kunnen met 34%
verkleind worden
Afbeeldingen kunnen met 77%
verkleind worden

 

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% staat.

Conclusie

Dit is een kleine steekproef bij ondernemingen waarbij 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.

Verantwoording

Alle websites zijn op 16 juli 2015 om 11:00 bekeken.