Hoe wij de laadtijd versnelden met 300%

Speed. I am Speed!

Bovenstaande is een citaat van Lighting McQueen, de hoofdrolspeler van de animatiefilm Cars, en hoewel het een kinderfilm is vind ik deze wel passen bij de resultaten die wij hebben neergezet bij het platform van Pluimen.nl. Waarbij we in het drukste piekseizoen een overall snelheidsverbetering hebben gerealiseerd van meer dan 150%, en op elk device een laadtijd hebben van onder de 2.6 seconden. Graag geef ik wat inzicht in hoe wij dit gezamenlijk hebben gerealiseerd.

Wat was het doel?

Pluimen heeft een significante piekmaand, waarbij de load, op de server en het platform, op een grootdeel van de dagen tot wel 1500% hoger is dan buiten het piekseizoen. Op het vorige platform was de laadtijd soms langer dan 10 seconden. Het is dus erg belangrijk om hier een goed plan voor te hebben liggen en klaar te zijn voor deze piekbelastingen. Niemand wil de waardevolle bezoekers die binnengehaald worden, verliezen door een te lange laadtijd.

Dat de snelheid een van de belangrijke pijlers onder het nieuwe platform is dus niet gek, en zowel op desktop, als op tablet en mobile moest de pagina snel laden. Maar wat is dan snel?

Uit een recent onderzoek van Google bleek dat 53% van de bezoekers afhaakt op een mobiele website als het laden langer duurt dan 3 seconden. Dit is natuurlijk een enorme verlies aan waardevolle bezoekers. Onder de 3 seconden laadtijd werd dan ook ons doel.

google Think page speed mobile

Wat hebben we gedaan?

Om dit te realiseren hebben we het platform en de infrastructuur goed in kaart gebracht en gekeken naar de verschillende mogelijkheden die er zijn. Wij hebben uiteindelijk gekozen voor, onder meer, de volgende optimalisaties:

Loadbalance

Om een overload van de server te voorkomen hebben we een loadbalancer geïmplementeerd. Hierbij wordt de load op de juiste momenten op verschillende servers gebalanceerd.

Redis Caching

redis cacheEr is Redis caching geïmplementeerd om de mySQL database te ontlasten. We hebben voor Redis gekozen omdat deze ons in staat stelt om snel de veelgebruikte data en elementen op te halen en aan de gebruiker te tonen.

Big Pipe

Complementair aan de Redis caching is de implementatie van BigPipe. Hierbij worden de verschillende delen van de website asynchroon ingeladen. We kunnen dan de veel gebruikte onderdelen snel in laden en tonen, en de gepersonaliseerde en zwaardere onderdelen ‘later’ laten volgen. Hierdoor ontstaat een vloeiende en prettige gebruikerservaring.

Headless Drupal / AngularJS

We hebben ervoor gekozen voor een Headless Drupal omgeving met een snelle clientside applicatie in AngularJS. De snelle clientside applicatie maakt gebruik van kleine stukjes data vanuit Drupal, hierdoor wordt Drupal ontlast. Daarnaast hoeft er niet steeds data opgehaald te worden voor de frontend waardoor de server dus niet constant wordt belast bij een significante stijging in bezoekersaantallen. En omdat de AngularJS frontend geheel bij de gebruiker draait, zorgt dit voor een erg snelle gebruikerservaring.

Resultaten

Het effect van al deze maatregelen liegt er niet om. Over de gehele piekmaand hebben we een snelheidsverbetering gerealiseerd van meer dan 150% over alle devices, waarbij op meerdere piekdagen de snelheid met meer dan 330% is versneld.

Inzoomend op de verschillende devices, dan hebben we op desktop de laadtijd met 133% kunnen versnellen, en op tablet zelfs met 205%!

Onze grote wens was dat we op mobiel een geweldig snelle ervaring zouden neerzetten. De vraag is dus ook of we dit hebben gerealiseerd. Uiteindelijk is er een snelheidsverbetering behaald van 166%. Waarbij we gemiddeld sneller laden dan 2.6 seconden, ruim onder de magische 3 seconden! We hebben de geweldig snelle ervaring op mobiel dus ruimschoots kunnen realiseren.

Jouw website ook versnellen?

Neem dan eens contact op met:
Mollo
Digitaal strateeg
010 8200 326