Core Web Vitals meten bij je echte bezoekers
Er zijn genoeg plugins die beloven je Core Web Vitals te verbeteren. Deze meet ze, bij de mensen die je site werkelijk bezoeken, en laat zien wat die kregen. Elk getal op het scherm is het 75e percentiel over de gekozen periode, apart voor mobiel en desktop, want zo definieert Google de drempels. Er wordt niets geschat, er wordt niets in een laboratorium nagebootst, en er hangt geen advies aan een getal dat de meting niet kan dragen.
Niet het gemiddelde, maar de bezoeker die het op drie na slechtst had
Google beoordeelt Core Web Vitals op het 75e percentiel en niet op het gemiddelde. Dat is geen detail. Een gemiddelde verstopt de staart, en juist de staart is waar mensen afhaken. Van elke honderd metingen sorteer je ze op volgorde, je gaat naar de vijfenzeventigste, en dat getal is je score. Drie op de vier bezoekers hadden het beter, een op de vier slechter.
Waarom je eigen cijfers niet gelijk zijn aan die van PageSpeed Insights
Dit is de vraag die na een dag meten altijd komt, en het antwoord is niet dat een van de twee het fout doet.
De laboratoriumscore in PageSpeed Insights is een nagebootste laadbeurt op een nagebootst apparaat, met een nagebootste verbinding
Handig om mee te vergelijken, maar het is niet wat jouw bezoekers echt krijgen.
De veldgegevens in PageSpeed Insights komen uit het Chrome User Experience Report
Dat rapport dekt Chrome-gebruikers die daarvoor toestemming hebben gegeven, en het heeft genoeg verkeer nodig voordat het uberhaupt iets publiceert. Op een rustige site blijft het leeg, en dan sta je met lege handen terwijl je site wel bezoekers heeft.
Deze plugin meet elke browser die de onderliggende functie ondersteunt, ook op die rustige site
De twee zullen dus verschillen, en dat staat op het scherm in plaats van in een voetnoot.
Wat Google met die cijfers doet, en waarom een trage sjabloonpagina in je rapport een hele groep rood kleurt terwijl de beoordeling per pagina gaat, staat uitgelegd in Core Web Vitals: Google beoordeelt je website per pagina. Die pagina legt de regel uit, deze plugin geeft je de meting.
Wat er wordt gemeten, en hoe
Vier meetwaarden, met de drempels die Google publiceert.
LCP
, Largest Contentful Paint. Goed tot en met 2,5 seconden, slecht boven 4 seconden.INP
, Interaction to Next Paint. Goed tot en met 200 milliseconden, slecht boven 500.CLS
, Cumulative Layout Shift. Goed tot en met 0,1, slecht boven 0,25.TTFB
, Time To First Byte. Geen Core Web Vital, maar hij ligt onder LCP. Goed tot en met 800 milliseconden, slecht boven 1800.Het meten is een eigen uitvoering van de definities die Google publiceert, uitgeschreven in leesbaar JavaScript in plaats van als bibliotheek binnengehaald. Dit was een bewuste keuze: je kunt het bestand openen en gewoon lezen wat er gebeurt. Het draait op de browserfuncties die deze getallen produceren, PerformanceObserver voor de grootste tekening, de verschuivingen en de gebeurtenistijden, en de navigation timing voor de eerste byte.
INP volgens dezelfde regel
Gebeurtenissen die bij een interactie horen worden op hun interactionId gegroepeerd en de langste gebeurtenis van een interactie is de vertraging van die interactie. Onder de vijftig interacties wordt de slechtste gerapporteerd; daarboven mag een interactie op elke vijftig slechter zijn dan het gerapporteerde getal. Dat is de regel die voorkomt dat een enkele uitschieter een hele pagina bepaalt.
Onder de twintig metingen komt er geen getal, maar een aantal
Een percentiel over vier paginaweergaven is geen percentiel. Het ziet er precies zo nauwkeurig uit als een percentiel over vierduizend, en het betekent niets. Zo sturen dit soort schermen mensen precies de verkeerde kant op, en daarom weigert deze plugin het getal in dat geval te drukken.
Zo installeer je hem, in vier stappen
Er is geen account nodig, geen sleutel en geen registratie. Een gewone WordPress waar je beheerder bent is genoeg.
manage_options nodig, dus beheerder.Klik hierboven op de downloadknop. Je krijgt theseo-webvitals-1.0.0.zip, 51 KB. Pak hem niet uit: WordPress wil de zip zelf.
In je WordPress: Plugins, Nieuwe plugin, Plugin uploaden. Kies het bestand en klik op Nu installeren.
Klik op Plugin activeren. Er verschijnt een nieuw onderdeel in je beheermenu. Je site verandert er op dat moment nog niet van.
Open het instellingenscherm en loop de standen langs. Alles wat aan je openbare site raakt staat uit tot je het zelf aanzet.
Wat de plugin niet is
Hier scheidt deze plugin zich van de rest van de categorie, want de rest van de categorie belooft snelheid.
- Het is geen cacheplugin en hij maakt niets sneller. Er wordt niets geoptimaliseerd, niets samengevoegd en niets uitgesteld.
- Hij zegt niet wat een traag cijfer veroorzaakt. Dat is diagnose, en diagnose die uit vier getallen wordt geraden is gokken met een grafiek erbij.
- Hij stelt nooit voor om iets te installeren. Er zit geen aanbeveling in die toevallig bij een betaald product uitkomt.
- Zijn getallen zijn niet de getallen die Google voor de zoekresultaten gebruikt. Dat verschil staat hierboven uitgelegd en het staat ook op het scherm zelf.
Wat je er wel aan hebt: je weet welke pagina bij welk apparaat traag is, hoeveel metingen daaronder liggen, en of het al dan niet aan je server ligt
Meer heb je niet nodig om te beslissen waar je begint, en dat is precies waar de meeste snelheidsgesprekken op vastlopen.
Vijf velden erin, en zes dingen er bewust uit
Twee regels van dezelfde persoon zijn niet als bij elkaar horend te herkennen. Dat is het ontwerp en geen ongeluk. Er is geen sessienummer, dus er valt niemand te volgen, en in ruil daarvoor is er ook niets te lekken.
- Het adres van de pagina, zonder queryreeks en zonder anker
- Welke meetwaarde het was
- De waarde
- De apparaatklasse, mobiel of desktop, afgeleid van de breedte van het venster
- Het uur waarin het gebeurde
- Het IP-adres, niet leesbaar en ook niet als afdruk
- Een sessie, een bezoekersnummer of een gebruikersnummer
- Een cookie of iets in localStorage of sessionStorage
- De user agent
- De queryreeks
- Iets dat je server verlaat
Privacy: wat er wel en niet wordt vastgelegd
Dit is de plugin uit deze reeks die het dichtst bij een bezoeker komt, want hij meet in de browser van die bezoeker. Daarom is dit ook de paragraaf die het meest te controleren valt.
Geen IP-adres in de tabel
Het adres komt precies een keer voor, in de snelheidslimiet, waar het via een sleutelafdruk een waarde wordt die binnen een minuut verloopt. De metingentabel bereikt het nooit.Geen sessie en geen bezoekersnummer
Twee regels van dezelfde persoon zijn niet aan elkaar te knopen. Er is dus niets te volgen, en dat is de reden dat er ook niets te lekken valt.Geen cookie en geen browseropslag
Zoek in de uitgepakte zip opsetcookie, localStorage en sessionStorage. De enige treffers staan in commentaar en in de readme.Geen user agent
Mobiel of desktop komt uit de breedte van het venster.Geen uitgaand verzoek
Het script praat met je eigenadmin-ajax.php en met niets anders. Er is geen extern adres in de hele plugin.Do Not Track en Global Privacy Control staan aan
Stuurt de browser er een, dan stopt het script voordat het iets meet. Je kunt dat uitzetten en het staat standaard aan.Bewaartermijn
Een dagelijkse taak verwijdert metingen ouder dan de ingestelde termijn, standaard 90 dagen. Verwijderen laat de tabel, de instellingen en de taak vallen.Waarom er geen nonce op het verzamelpunt zit staat in de veelgestelde vragen hieronder, met de reden en met de vier maatregelen die er in de plaats staan.
Veelgestelde vragen
Waarom zit er geen nonce op het verzamelpunt? Omdat een nonce de meting stilletjes kapot maakt zonder iets toe te voegen. Een nonce wordt in de pagina afgedrukt, dus op een site met een volledige paginacache krijgt elke bezoeker dezelfde nonce en werkt het binnen een dag niet meer. Op een openbaar adres dat anonieme bezoekers moeten kunnen bereiken is het ook geen beveiliging. Wat er wel staat: de hoofdschakelaar, een controle op dezelfde oorsprong, een snelheidslimiet per adres, en validatie die alleen de vier bekende meetwaarden accepteert, alleen getallen binnen hun gepubliceerde bereik, en alleen een adres van deze site. Elke beheerhandeling gebruikt wel een nonce plus een rechtencontrole.
Vertraagt het mijn site?
Het script is een enkel bestand van een paar kilobyte, in de voettekst geladen, zonder afhankelijkheid, en het blokkeert de weergave niet. Het verstuurt een verzoek per paginaweergave, op het moment dat de pagina wordt verlaten, via sendBeacon.
Werkt het met een cacheplugin?
Ja, en dat is een deel van het punt. Er staat niets in de opmaak dat verloopt, dus een pagina uit de cache blijft meten, en wat er dan gemeten wordt is wat je bezoekers werkelijk uit die cache krijgen.
Waarom heeft de ene meetwaarde minder metingen dan de andere?
Omdat niet elke browser elke meetfunctie heeft. Een browser die iets niet kan meten draagt er niets voor bij, en dat gat wordt niet met een nul opgevuld.
Waarom zegt een pagina te weinig metingen?
Omdat hij minder metingen heeft dan de drempel op het instellingenscherm, standaard twintig. Zet hem tijdelijk op 1 als je de eerste cijfers wilt zien, en zet hem daarna terug.
Werkt het op multisite?
Ja. Elke site in het netwerk krijgt een eigen tabel en eigen instellingen. Verwijderen ruimt elke site op.
Wat je er de eerste week aan hebt
De praktische route: aanzetten, een week laten lopen, en dan pas kijken. Eerder heb je te weinig metingen en dat zegt de plugin ook. Zie je daarna dat een pagina traag is maar weet je niet waarom bezoekers erop vastlopen, dan tekent de heatmap en scrollmap wat ze op diezelfde pagina doen. Draait je site op WordPress en wil je hem ook op toegankelijkheid nalopen, dan doet de toegankelijkheidsplugin dat op de punten die machinaal te toetsen zijn. Wil je erover doorpraten, plan dan een gesprek.