Real Core Web Vitals

WordPress-plugin die meet wat je bezoekers echt meemaken: LCP, INP, CLS en TTFB, bewaard in je eigen database en getoond als 75e percentiel per pagina en per apparaat.

Er zijn plugins met miljoenen installaties die beloven je Core Web Vitals te verbeteren. Deze meet ze. Dat is het verschil.

Gemaakt door TheSEO.

Wat hij meet

De drempels zijn die van Google en worden beoordeeld op het 75e percentiel, gesplitst naar mobiel en desktop. TTFB is geen Core Web Vital maar ligt wel onder LCP, en staat er daarom bij met die noot erbij.

De meting is een eigen implementatie van de gepubliceerde definities, in leesbare JavaScript in plaats van een ingeladen bibliotheek, zodat iedereen kan nalezen wat er precies gebeurt. Hij leunt op PerformanceObserver voor de grootste tekening, de layoutverschuivingen en de gebeurtenistijden, en op de navigatietiming voor de eerste byte.

Niet elke browser kent elke API. Layoutverschuivingen en gebeurtenistijden zijn niet in elke browser aanwezig. Een browser die een maat niet kan meten stuurt die maat helemaal niet mee, en de plugin schrijft er dus ook geen nul voor weg. Een nul zou een perfecte score zijn die nooit gemeten is, en dat is precies het soort getal waar deze plugin niet aan meedoet. Gevolg dat je op het scherm ziet: het aantal metingen verschilt per maat, en dat is juist zo.

De eerlijkheidsregel

Een percentiel over vier paginaweergaven is geen percentiel. Een pagina krijgt pas een cijfer als er genoeg metingen zijn, standaard twintig en instelbaar. Daaronder staat er "te weinig metingen" met het aantal erbij, in plaats van een getal dat precies lijkt en niets betekent.

Wat hij bewaart

Per meting een rij in {prefix}theseo_vitals:

• het adres van de pagina, zonder queryreeks en zonder anker
• welke maat het was
• de waarde
• de apparaatklasse, mobiel of desktop
• het uur waarin het gebeurde

En uitdrukkelijk niet: geen IP-adres, geen sessie, geen bezoekersnummer, geen gebruikers-id, geen cookie, niets in de browseropslag, geen user agent-tekenreeks, geen queryreeks en niets dat je server verlaat.

Twee rijen van dezelfde persoon zijn niet als bij elkaar horend te herkennen, en dat is ontwerp en geen toeval. De apparaatklasse komt uit de breedte van het venster en niet uit de user agent, want een user agent is een bewering en een vingerafdruk en een breedte is geen van beide. Het tijdstip wordt naar beneden op het uur afgerond, zodat een rij niet samenvalt met een enkel verzoek in een serverlog.

Het adres van een bezoeker wordt een keer gebruikt, om verzoeken per minuut te tellen. Het gaat via hash_hmac met wp_salt() door een transient die na een minuut verdwijnt en bereikt de tabel nooit.

Wat hij niet is

• Geen cacheplugin. Hij maakt niets sneller.
• Geen adviseur. Hij zegt niet waar een slecht cijfer vandaan komt en raadt nooit aan iets te installeren, want dat kan de meting niet dragen.
• Niet hetzelfde als wat Google voor de zoekresultaten gebruikt. Google werkt met het Chrome User Experience Report, dat alleen Chrome-gebruikers dekt die daarvoor gekozen hebben en dat pas iets publiceert bij genoeg verkeer. Deze plugin meet elke browser die de onderliggende API ondersteunt, ook op een rustige site waar dat rapport leeg blijft. De twee zullen dus verschillen, en dat staat op het scherm en niet in een voetnoot.

Installeren

1. Zip uploaden via Plugins, Nieuwe plugin, Plugin uploaden.
2. Activeren.
3. Web Vitals, Instellingen: meten aanzetten. Op een rustige site steekproef op 100 procent laten staan.
4. Je eigen site bezoeken in een uitgelogde browser en een paar pagina's doorklikken.

Testinstructie: in vijf minuten zeker weten dat hij werkt

Zes stappen op een testinstallatie.

1. Zet meten aan onder Web Vitals, Instellingen, en zet "Metingen nodig voor een cijfer" tijdelijk op 1. Steekproef op 100 procent.

2. Doe alsof je een bezoeker bent. Open een prive-venster, ga naar de homepage, klik ergens (dat is nodig voor INP) en sluit dan het tabblad of ga naar een ander tabblad. Verzenden gebeurt pas als de pagina uit beeld verdwijnt, en dat is precies wat je in het netwerktabblad ziet: een verzoek naar admin-ajax.php met action=theseo_vitals_collect. Herhaal dit op twee andere pagina's.

3. Open Web Vitals, Overzicht met apparaat op Desktop. Er horen cijfers te staan voor LCP, CLS en TTFB, elk met "Gebaseerd op N metingen" eronder. INP staat er alleen als je in stap 2 echt geklikt hebt.

4. Controleer dat mobiel apart wordt geteld. Maak het venster smaller dan 768 pixels, herlaad, klik, sluit het tabblad. Op het tabblad Mobiel horen nu metingen te staan en op Desktop niet meer dan er al waren.

5. Controleer de eerlijkheidsregel. Zet het minimum terug op 20. Elk cijfer dat op minder dan twintig metingen rust hoort te veranderen in "Te weinig metingen" met het aantal erbij. Dat is het gedrag dat deze plugin onderscheidt en dus het belangrijkste om te zien.

6. Controleer wat er niet wordt opgeslagen. Web Vitals, Instellingen, kopje "Wat er bewaard wordt". In de database mag je het narekenen:

   SELECT * FROM wp_theseo_vitals ORDER BY id DESC LIMIT 10;

   Je hoort precies id, page_url, metric, metric_value, device en created_at te zien, en geen kolom voor een IP-adres, een sessie of een user agent. Het tijdstip in created_at hoort op het hele uur te staan.

De rekenkant is ook machinaal getoetst. Zie ../tests/LEESMIJ.md:

php ../tests/test-webvitals.php
node ../tests/test-collector.js

Mappenstructuur

theseo-webvitals/
  theseo-webvitals.php         kopregels, PHP-controle, laden
  uninstall.php                tabel, opties, cache en cronjob weg
  readme.txt                   Engelse readme in het formaat van de pluginmap
  includes/
    class-theseo-vitals-metrics.php     maten, drempels, percentiel
    class-theseo-vitals-install.php     tabel, schema, opruimtaak
    class-theseo-vitals-settings.php    opslag en validatie
    class-theseo-vitals-request.php     url, apparaatklasse, snelheidsgrens
    class-theseo-vitals-repository.php  alle queries
    class-theseo-vitals-collector.php   script en het ontvangstpunt
    class-theseo-vitals-admin.php       drie schermen en opslaan
    class-theseo-vitals-plugin.php      hooks
  assets/js/collector.js       de meting in de browser
  assets/js/admin.js
  assets/css/admin.css
  languages/                   pot plus Nederlandse vertaling

Hoe het percentiel wordt berekend

Met nearest rank, niet met interpolatie. Bij n metingen is de rang ceil(0,75 * n) en de waarde op die plek in de gesorteerde reeks is het cijfer. Zo is elk getoond cijfer een waarde die echt gemeten is bij een echte bezoeker, en geen gemiddelde van twee metingen die geen van beide bestond.

In SQL gebeurt dat met een telling plus ORDER BY metric_value ASC LIMIT 1 OFFSET n, en niet met een vensterfunctie, omdat vensterfuncties niet in elke database bestaan die WordPress nog ondersteunt.

Taal

De broncode is Engels met tekstdomein theseo-webvitals. In languages/ zit een .pot en een Nederlandse vertaling (nl_NL.po en nl_NL.mo), dus op een Nederlandse WordPress is de hele beheerkant Nederlands. De readme voor de pluginmap blijft Engels, zoals wordpress.org vraagt.

Nog niet gedaan

Eerlijkheid boven marketing, dus dit staat er ook in:

• De kopregel zegt Tested up to: 7.0. Dat is de huidige WordPress-versie, niet een eigen meting op een draaiende 7.0. Dat moet gebeuren voor de inzending.
• De meetkant is nog niet in echte browsers doorgemeten. De rekenkant is dat wel, met een testharnas dat de percentielen en de drempels natelt.
• Er zijn nog geen schermafdrukken, geen icoon en geen banner, en er staat daarom geen == Screenshots == in readme.txt.
• Plugin Check is nog niet over deze plugin gedraaid.

Licentie

GPLv2 of nieuwer. Zie LICENSE.