Niemand vind het leuk om te wachten... Websites worden steeds groter, we bieden veel informatie, de mooiste graphics en om alles ook nog eens op alle schermen goed weer te geven (responsive) worden de CSS-bestanden ook steeds groter. Hoe zorgen we er voor dat de website toch niet te traag wordt?
Vroeger (en dat is nog maar 10-15 jaar geleden!) was de opbouw van een website veel simpeler. Met name de eenvoudige HTML-sites hadden slechts een html-bestand voor de content, een css-bestand voor de opmaak en een aantal grafische bestanden voor de layout. Als je de bestanden niet te groot maakte was de dataoverdracht ook snel genoeg. Moderne websites met een CMS op de achtergrond gebruiken duizenden bestanden die met elkaar de webpagina opbouwen. De css-bestanden sturen voor elk beeldformaat de juiste opmaak mee. De verbindingssnelheden voor dataoverdracht zijn de laatste jaren wel sterk verbeterd, zowel aan de kant van de server die de pagina verzendt als aan de kant van het ontvangende apparaat wat de webpagina weergeeft moeten veel bewerkingen plaatsvinden voor het beeld is opgebouwd. Daar kan een aardige vertraging optreden...
Is snelheid nou echt een belangrijke factor in de indexering door zoekmachines als Google? Vooropgesteld: snelheid is vooral een belangrijke factor in de gebruikerservaring voor jouw websitebezoeker. Maar daarmee is het ook een factor voor Google, die immers alle informatie op internet optimaal beschikbaar wil maken en bij optimaal hoort dan ook beschikbaar zonder onnodig wachten.
Om zoveel mogelijk 'de snelheid er in te houden' kunnen we waar mogelijk de bestanden comprimeren. Dat begint al bij de grafische bestanden, de afbeeldingen die je op de website plaatst. Een aantal tips gaven we al op de pagina Content: zet ze online in het formaat wat voor jouw website nodig is. Groter maakt de afbeelding niet beter maar de website wel trager. (...) Comprimeer een afbeelding dus zo veel mogelijk voor je hem uploadt.
Verdere aanpassingen vinden plaats op het niveau van de server of het CMS. (Varnish) caching maakt gebruik van geheugen-bestanden op de server: deze caching zorgt ervoor dat je website vele malen sneller geladen kan worden in de browser van de bezoeker. Gzip kennen we o.a. van services voor bestandsverzending zoals WeTransfer, waarbij grote (hoeveelheden) bestanden binnen één gecomprimeerd bestand verzonden worden. Door ze bij het verzenden gecomprimeerd in te pakken en na ontvangst in de browser weer uit te pakken, wordt een aanzienlijke snelheidswinst behaald. Het downloaden van een niet gecomprimeerd bestand kost gewoon meer tijd dan het uitpakken van een gecomprimeerd bestand.
JS/CSS compressie bereiken we met een extensie binnen het CMS. Ook hier vindt compressie plaats van JavaScript en CSS bestanden door verschillende bestanden gecombineerd en gecomprimeerd te verzenden (minification).
Er zijn twee veelgebruikte graadmeters voor het screenen van de snelheid van een website:
Beide sites geven een zelfde soort beoordeling van de performance van de site en maken gebruik van dezelfde onderliggende techniek (Lighthouse). Lighthouse kan je ook starten in de Chrome-browser als hulpprogramma voor ontwikkelaars.