Van 64 naar 98 op mobiel.

Van vraag naar aanpak

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 de laadwaterval van elk bestand dat de pagina opvraagt. Daaruit bleek dat de vertraging niet in de pagina zelf zat, maar in wat de pagina van buitenaf opvroeg.

2. 02

   Lettertypes losgekoppeld van Google

   De fonts kwamen van fonts.googleapis.com, dus stond alle tekst stil tot die server antwoordde. Zes woff2-bestanden staan nu op onze eigen hosting, de drie belangrijkste worden voorgeladen. De externe verbinding is helemaal weg.

3. 03

   Beeld en CSS teruggebracht tot wat nodig is

   Drie icoonbestanden bleken SVG's met ingebakken bitmaps van samen bijna 2 MB. Als WebP zijn ze 5 tot 7 KB per stuk. Alle stijlen zijn samengevoegd tot één geminificeerd bestand.

4. 04

   Tracking uit de kritieke route

   Analytics en advertentiepixels laden nu pas bij de eerste scroll of klik, of na tien seconden. De blokkeertijd ging van 300 milliseconden naar nul. We meten nog steeds alles, alleen niet meer over de rug van de bezoeker.