High Performance Websites

het kan altijd beter

Geschreven door: op

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 cachingMet 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?

  • HTML5
  • Javascript t.b.v. funktionaliteit in plain Javascript geschreven, hierdoor is het inladen van jQuery niet meer nodig
  • Bootstrap responsive css ingezet zodat website responsive wordt
  • Zoveel mogelijk afbeeldingen in 1 sprite gezet zodat voor betreffende afbeeldingen in z'n geheel er maar 1 http-request is
 Nieuwe situatieZonder cachingMet 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:

  • http-requests: 59% verbetering
  • gewicht: 61% verbetering
  • laadtijd: 20% verbetering

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!

High Performance Websites

Trefwoorden:

Aantal keer bekeken: 5.091