Je website onder de seconde laten laden: wat ik concreet doe

Snelheid is de enige verbetering die tegelijk je conversie, je vindbaarheid en je hostingkosten verbetert. Toch wordt het meestal pas aangepakt als iemand klaagt. Hier de ingrepen die ik in de praktijk doe, op volgorde van hoeveel ze opleveren.

Meet eerst, en meet op mobiel

Ga naar pagespeed.web.dev, plak je URL en kijk naar het mobiele tabblad. Dat is het scherm waar het overgrote deel van je bezoekers zit en dat is meteen het strengste oordeel. Let vooral op deze drie:

• LCP: hoe snel het grootste element in beeld staat. Mik onder 2,5 seconden.
• CLS: hoeveel de pagina verspringt tijdens het laden. Mik onder 0,1.
• INP: hoe snel de site reageert op een tik. Mik onder 200 milliseconden.

Noteer de startwaarden. Zonder nulmeting weet je straks niet wat er geholpen heeft.

1. Afbeeldingen, altijd afbeeldingen

Bij negen van de tien trage sites zit hier de winst. Wat ik doe:

• Sla op als WebP. Dat scheelt 25 tot 50 procent ten opzichte van JPEG bij dezelfde kwaliteit.
• Schaal naar de afmeting waarop ze getoond worden. Een foto van 4000 pixels breed in een vak van 800 pixels is puur verspilling.
• Zet breedte en hoogte in de HTML, zodat de pagina niet verspringt tijdens het laden.
• Geef alles onder de vouw loading='lazy' mee, en juist niet aan je heroafbeelding.

Alleen dit al haalde bij een klant de laadtijd van 4,8 naar 1,6 seconden. Er stond een foto van 3,2 MB in de header.

2. Lettertypen zelf hosten

Een lettertype dat je van een externe server haalt, kost een extra verbinding voordat er ook maar één letter zichtbaar is. Download het bestand, zet het in je eigen map, gebruik het woff2-formaat en laad alleen de gewichten die je echt gebruikt. Zet er font-display: swap bij, dan verschijnt de tekst meteen in een systeemlettertype en wisselt hij daarna.

Twee gewichten zijn genoeg voor de meeste sites. Regular en bold. Elk extra gewicht is een extra bestand.

3. Scripts van derden opruimen

Chatwidgets, reviewsliders, kaarten, deelknoppen, twee verschillende meetsystemen. Deze scripts kosten vaak meer laadtijd dan je hele website. Loop de lijst langs en vraag per script: heb ik hier de afgelopen drie maanden iets aan gehad?

Wat overblijft, laad je zo laat mogelijk. Een chatwidget mag prima pas laden als iemand drie seconden op de pagina is of naar beneden scrolt. Een Google Maps-kaart kun je vervangen door een statische afbeelding met een link.

4. Caching goed instellen

Stel voor afbeeldingen, CSS en lettertypen een lange cachetijd in, bijvoorbeeld een jaar, met een versienummer in de bestandsnaam. HTML-bestanden geef je juist een korte cachetijd, zodat wijzigingen meteen zichtbaar zijn. Dit is een instelling van vijf regels bij je host of in je configuratie en het versnelt elk herhaalbezoek enorm.

5. Minder is sneller dan geoptimaliseerd

Een pagina met vier animaties, een videoachtergrond en een carrousel krijg je met geen enkele techniek echt snel. De snelste ingreep is vaak schrappen. Vraag je bij elk zwaar element af of het bijdraagt aan de aanvraag die je wilt. Zo niet, weg ermee.

6. Verwijder ongebruikte CSS en JavaScript

Vooral bij sites die met een thema en plugins zijn gebouwd, wordt vaak de complete stijlbibliotheek geladen terwijl je 10 procent gebruikt. In het tabblad Coverage van de Chrome-ontwikkelaarstools zie je precies hoeveel van elk bestand ongebruikt blijft. Cijfers van 80 procent ongebruikt zijn geen uitzondering.

7. Kies een server dicht bij je klanten

Werk je in Nederland, dan wil je een Nederlandse server of een CDN dat je bestanden dichtbij aanbiedt. Dat scheelt tientallen milliseconden per bestand, en die tellen op.

8. Let op de eerste indruk boven de vouw

Het gaat uiteindelijk om het moment waarop je bezoeker iets zinnigs ziet. Laad het beeld en de tekst die bovenin staan met voorrang en stel de rest uit. Een preload op je heroafbeelding en de belangrijkste stijlen inline zetten, doet vaak meer dan een week aan micro-optimalisaties.

Snelheid is geen technische wedstrijd. Het is respect voor iemand die op een station staat met een half streepje bereik.

Wat een realistische uitkomst is

Voor een gewone zakelijke site is 90 of hoger op mobiel goed haalbaar. Voor een webshop met betaalkoppelingen en trackingscripts is 70 al netjes. Jaag niet op een perfecte score ten koste van functionaliteit die je omzet oplevert.

Begin met je afbeeldingen. Meet opnieuw. In de meeste gevallen ben je dan al over de helft, en dat kostte je een middag.