Voor een klant was de opdracht het verbeteren van bestaande code t.b.v. een high-performance website. Naast code verbeteringen was de opdracht ook dat de website responsive moest worden. Betreffende website ontvangt in een korte periode een paar miljoen bezoekers welke allemaal willen kijken of er een prijs op hun lot is gevallen.
De eenvoudigste manier om een website lichter te maken is het verminderen van het aantal http-requests. Een http-request is, simpel omschreven, een aanvraag naar een pagina. M.a.w. iedere afbeelding, stylesheet(s) of Javascript(s) welke ingeladen wordt op een pagina genereerd een http-request. Deze http-requests zijn nodig om alle onderdelen van een pagina in te laden en goed te laten werken en/of goed er uit te laten zien. De layout in de nieuwe versie bleef nagenoeg hetzelfde als in de oude situatie.
| Oude situatie | Zonder caching | Met caching |
|---|---|---|
| http-requests | 22 | 22 |
| Gewicht | 991 Kb | 11.6 Kb |
| Laadtijd | 470 ms | 320 ms |
Zoals je in bovenstaande schema kunt zien werd er in de oude situatie initieel bijna 1mb geladen om alles te tonen en funktioneel te laten werken. Afbeeldingen en backgrounds werden apart ingeladen, jQuery framework werd ingeladen.
Wat heb ik allemaal gedaan om de website verbeteren?
| Nieuwe situatie | Zonder caching | Met caching |
|---|---|---|
| http-requests | 9 | 9 |
| Gewicht | 382 Kb | 8 Kb |
| Laadtijd | 374 ms | 276 ms |
Hieronder de procentuele verschillen van de oude situatie t.o.v. de nieuwe situatie:
Zoals je kunt zien is er zeker sprake van verbetering m.b.t. de laadtijd en daar aan gekoppeld de 'load' van berteffende webserver. Er zijn nog steeds verbeterpunten echter moet je op een gegeven moment afvragen, met de klant meedenkende, of de investering in tijd nog opweegt tegenover de baten voor de klant...
Voor mij persoonlijk was dit 1 van de leukere projecten welke ik de afgelopen periode gedaan heb. Benieuwd of jouw website ook verbeterd kan worden? Laat bij de opmerkingen je url achter en ik zal in een korte toelichting aangeven waar de verbeterpunten liggen!
Op naar het volgende, uitdagende, project!