Van 64 naar 98 op mobiel.

Snelheid is wat we aan klanten verkopen, dus moest onze eigen site het bewijs zijn.

Dat was hij niet. Google gaf ons op mobiel een 64 en het grootste beeld stond er pas na 7,1 seconden. Op een telefoon met een matige verbinding haakt een deel van je bezoekers dan al af voordat er iets te lezen valt, en Google meet precies datzelfde moment. De opdracht aan onszelf: haal eruit wat de eerste weergave vertraagt, en verander niets aan het ontwerp of de tekst.

1. 01

   Eerst meten, dan pas sleutelen

   Een nulmeting op mobiel en desktop, plus een lijst van elk bestand dat de pagina opvraagt en hoe lang dat duurt. Daaruit bleek dat de vertraging niet in de pagina zelf zat, maar in wat de pagina van buitenaf ophaalde.

2. 02

   Lettertypes losgekoppeld van Google

   De fonts kwamen van een server van Google, dus stond alle tekst stil tot die antwoordde. Ze staan nu op onze eigen hosting en de belangrijkste worden vooraf geladen. Die externe wachttijd is helemaal weg.

3. 03

   Beeld teruggebracht tot wat nodig is

   Drie icoonbestanden bleken samen bijna 2 MB groot, omdat er foto’s in verstopt zaten. Als WebP zijn ze 5 tot 7 KB per stuk. Alle stijlen zijn samengevoegd tot één bestand.

4. 04

   Tracking uit de kritieke route

   Analytics en advertentiepixels starten nu pas bij de eerste scroll of klik. De tijd dat de pagina daardoor blokkeerde ging van 300 milliseconden naar nul. We meten nog steeds alles, alleen niet meer over de rug van de bezoeker.