De meeste ondernemers bekijken hun eigen website op een laptop, op kantoor of thuis, met snel internet. Daar voelt alles vlot. Maar het grootste deel van je bezoekers zit op een telefoon, vaak met een wisselende verbinding. Daar kan dezelfde pagina drie, vijf of acht seconden nodig hebben.
Dat kost klanten. Wie op een telefoon zoekt, heeft weinig geduld en tikt terug naar de zoekresultaten als er na een paar seconden nog niets staat. Google weet dat ook, en neemt laadsnelheid mee in de volgorde van zoekresultaten.
Hoe je het meet
Voel het niet op je eigen laptop, meet het. Google heeft daar een gratis hulpmiddel voor: PageSpeed Insights. Vul je adres in en kijk naar de uitslag voor mobiel. Google beoordeelt drie dingen, samen de Core Web Vitals genoemd:
- Largest Contentful Paint (LCP): hoe lang het duurt tot het grootste element in beeld staat, meestal de grote foto bovenaan. Goed is binnen 2,5 seconden.
- Interaction to Next Paint (INP): hoe snel de pagina reageert als je ergens op tikt. Goed is binnen 200 milliseconden.
- Cumulative Layout Shift (CLS): hoeveel de pagina verspringt tijdens het laden. Goed is onder de 0,1.
Op een kleine ondernemerssite is LCP bijna altijd het probleem. De volgende oorzaken gaan daar vooral over.
1. Foto’s die veel te groot zijn
Dit is verreweg de meest voorkomende oorzaak. Een foto rechtstreeks van een moderne telefoon of camera is al snel 4 tot 8 megabyte en 4000 pixels breed. Op een telefoonscherm van 400 pixels breed is daar niets van te zien, maar de bezoeker moet het wel downloaden.
De oplossing: verklein foto’s voor je ze uploadt, of gebruik een systeem dat dat voor je doet. Een foto voor de volle breedte van een scherm hoeft zelden groter te zijn dan 2000 pixels, en in een modern formaat als WebP of AVIF is hij dan vaak een paar honderd kilobyte. Goede websitesystemen sturen een telefoon automatisch een kleinere versie dan een groot scherm.
2. Een slideshow of video bovenaan
Een carrousel met vijf grote foto’s of een achtergrondvideo ziet er op een groot scherm mooi uit. Op een telefoon betekent het dat er meteen veel moet worden geladen voor er iets te zien is. En de meeste bezoekers kijken toch alleen naar de eerste dia.
Kies bovenaan je pagina voor één sterke foto. Wil je toch beweging, zorg dan dat de eerste foto direct verschijnt en de rest pas daarna laadt.
3. De belangrijkste foto als achtergrond
Dit is technischer, maar het komt veel voor. Een foto die met CSS als achtergrond is ingesteld, ontdekt de browser pas laat: eerst moet de opmaak worden geladen en verwerkt. Een gewone afbeelding in de pagina ziet de browser meteen. Bij de grote foto bovenaan scheelt dat vaak meer dan een seconde.
Gebruik je een sitebouwer, dan heb je hier weinig invloed op. Bouwt iemand je site, vraag dan of de bovenste foto als echte afbeelding wordt geladen, met voorrang.
4. Te veel plug-ins en scripts
Elke chatknop, elk social-media-widget, elke trackingcode en elke plug-in voegt code toe die de telefoon moet downloaden en uitvoeren. Een paar is geen probleem. Twintig wel, en dat zie je vooral terug in een trage reactie op tikken.
Loop eens na wat er op je site draait en wat je daarvan echt gebruikt. Een Facebook-feed in de footer of een chatknop die niemand bemant, kun je vaak zonder verlies weghalen.
5. Een trage server
Goedkope hosting deelt een server met honderden andere sites. Als die druk zijn, wacht jouw bezoeker. Ook een verouderd systeem, zoals een WordPress-installatie met een oude PHP-versie, kan veel trager zijn dan nodig.
In PageSpeed Insights zie je dit terug als “Initial server response time”. Staat daar meer dan een halve seconde, dan zit een deel van het probleem bij je hosting.
Een pagina die verspringt
Ken je dat: je wilt op een knop tikken, en net op dat moment schuift de pagina een stukje op en tik je op iets anders. Dat is wat Google meet met CLS. Het is irritant voor bezoekers en het telt mee in je score.
De oorzaken zijn meestal eenvoudig. Een foto zonder vaste afmetingen krijgt pas ruimte als hij geladen is, en duwt dan alles eronder naar beneden. Een lettertype dat laat binnenkomt, laat tekst opnieuw opschuiven. En een melding of banner die bovenaan verschijnt nadat de pagina al staat, schuift de hele pagina omlaag.
Geef afbeeldingen daarom altijd een breedte en hoogte mee, gebruik niet meer lettertypen dan nodig en laat meldingen over de pagina heen verschijnen in plaats van ertussen.
Wat je vandaag nog kunt doen
- Meet je homepage en je belangrijkste dienstenpagina in PageSpeed Insights, op mobiel.
- Kijk welke foto’s groter zijn dan een paar honderd kilobyte, verklein ze en upload ze opnieuw.
- Vervang een slideshow bovenaan door één foto.
- Haal plug-ins en widgets weg die je niet gebruikt.
- Meet opnieuw en vergelijk.
Met alleen de eerste twee stappen gaat een trage site vaak al van rood naar oranje of groen.
Snel meten zonder gedoe
Met de gratis websitescan meet je je site op mobiel, met dezelfde metingen van Google als hierboven. Je ziet ook hoe je ervoor staat op vindbaarheid en teksten, en je krijgt drie verbeterpunten op volgorde van wat het meeste oplevert.
Websites die met PureDigi gebouwd zijn, verkleinen foto’s automatisch en laden de bovenste foto met voorrang. Hoe dat technisch werkt, lees je op onze pagina over techniek.