Websites
Core Web Vitals uitgelegd: waarom scoort je site slecht in PageSpeed?
Kort antwoord
Core Web Vitals zijn drie metingen waarmee Google beoordeelt hoe een pagina aanvoelt voor een bezoeker: hoe snel het belangrijkste deel in beeld staat (LCP), hoe snel de pagina reageert op een tik of klik (INP) en of de inhoud verspringt tijdens het laden (CLS). Een slechte score komt meestal door zware afbeeldingen, te veel scripts van derden of trage hosting. De score in PageSpeed Insights is een test; wat telt is wat echte bezoekers meemaken.
Wat meet Google precies?
Drie dingen die een bezoeker voelt, ook als hij er geen woord voor heeft.
| Meting | Wat een bezoeker merkt | Goed | Slecht |
|---|---|---|---|
| LCP, Largest Contentful Paint | Hoe lang het duurt tot het belangrijkste deel van de pagina te zien is | Tot 2,5 seconde | Meer dan 4 seconden |
| INP, Interaction to Next Paint | Hoe lang de pagina “nadenkt” nadat je ergens op tikt | Tot 200 milliseconden | Meer dan 500 milliseconden |
| CLS, Cumulative Layout Shift | Of knoppen en tekst verspringen terwijl je al leest | Tot 0,1 | Meer dan 0,25 |
INP is in 2024 in de plaats gekomen van een oudere meting. Zie je in een rapport nog FID staan, dan is het rapport verouderd.
Waar komt een slechte LCP vandaan?
Bijna altijd uit een van deze vier.
Een te grote afbeelding bovenaan. Een foto van vier megabyte die de browser eerst helemaal moet binnenhalen en daarna verkleinen. De juiste afmetingen en een zuiniger bestandsformaat lossen dit op.
De server doet er lang over. Voordat er iets kan laden, moet de server de pagina samenstellen. Op goedkope hosting met honderden sites op één machine, of bij een site zonder cache, gaat daar zo een seconde of meer in zitten.
Opmaak en scripts houden het beeld tegen. De browser wacht met tekenen tot bepaalde bestanden binnen zijn. Staan er tien stijlbestanden en scripts in de kop van de pagina, dan staat de bezoeker al die tijd naar een wit scherm te kijken.
Lettertypen van een andere server. Elk extern adres kost een nieuwe verbinding.
Waar komt een slechte INP vandaan?
Uit te veel JavaScript. Elke plugin, tracker, chatknop en cookiebanner voegt code toe die de telefoon moet uitvoeren. Zolang de telefoon daarmee bezig is, reageert de pagina niet op een tik.
De gebruikelijke bronnen:
- Meet- en advertentiescripts van derden, vaak meerdere naast elkaar
- Een cookiebanner die zelf een flink programma is
- Een paginabouwer die voor elke pagina alle mogelijke onderdelen laadt
- Schuivende beelden en animaties bovenaan de pagina
Dit is ook waarom een site zonder trackers een voorsprong heeft. Wat je niet laadt, hoeft niet uitgevoerd te worden. Meer daarover in is een cookiebanner verplicht.
Waar komt een slechte CLS vandaan?
Uit onderdelen die later binnenkomen en ruimte innemen die niet was gereserveerd.
- Afbeeldingen zonder opgegeven breedte en hoogte
- Een banner of advertentie die boven de inhoud wordt ingevoegd
- Een lettertype dat laat laadt, waardoor de tekst opnieuw wordt verdeeld
- Een cookiebanner die de pagina omlaag duwt
Je herkent het als je op een knop wilt tikken en de pagina net op dat moment verschuift.
Hoe lees je PageSpeed Insights?
Bovenaan staat wat echte bezoekers hebben meegemaakt, als er genoeg gegevens zijn. Daaronder staat de test, met een score van 0 tot 100 en een lijst met aanbevelingen.
Drie dingen om te onthouden:
- Kijk naar mobiel. Dat tabblad staat standaard voor, en terecht.
- De testscore schommelt. Twee keer achter elkaar testen geeft twee uitkomsten. Kijk naar het beeld over meerdere metingen.
- Niet elke aanbeveling is evenveel waard. De lijst is automatisch gemaakt. Een halve seconde winst op de grootste afbeelding doet meer dan tien kleine punten.
Heeft je site weinig bezoekers, dan toont Google geen gegevens van echte gebruikers. Dan is de test het enige houvast.
Wat levert het meeste op?
In de volgorde waarin wij het aanpakken:
- Meten waar de tijd zit. Server, afbeeldingen of scripts. Zonder meting ga je gokken.
- Hosting en cache. Een pagina die al klaarligt, hoeft niet opnieuw gebouwd te worden.
- Afbeeldingen. Juiste maat, zuinig formaat, en pas laden wat in beeld komt.
- Scripts van derden opruimen. Wat niemand meer gebruikt, gaat eruit.
- Ruimte reserveren. Voor afbeeldingen en alles wat later binnenkomt.
Een plugin die belooft alles met één klik op te lossen, pakt hooguit punt 2 en 3 gedeeltelijk aan en maakt punt 4 erger.
Wij doen dit voor WordPress en WooCommerce onder een snellere website en voor Magento onder snelheid en optimalisatie. We meten vooraf en achteraf, en beloven geen cijfer voordat we weten waar het aan ligt.