Core Web Vitals PrestaShop (dfcoreweb): volledige gids

DataFirefly Core Web Vitals bevraagt de Chrome UX Report-API (CrUX) van Google en haalt in uw backoffice de prestatiemetrieken binnen die daadwerkelijk bij uw bezoekers zijn gemeten, afzonderlijk voor elk paginatype: homepage, categorie, productpagina, winkelwagen, CMS-pagina en geaggregeerde origin. De module bewaart de volledige geschiedenis, detecteert regressies en vertaalt elke verslechterde metriek naar concrete acties aan PrestaShop-zijde.

Vereiste: de Chrome UX Report-API-sleutel

De module heeft een Google-API-sleutel nodig om CrUX te bevragen. Ze is gratis en wordt in vier stappen verkregen:

1. Open de Google Cloud Console en maak een project aan (of selecteer een bestaand project).
2. Zoek in API’s en services > Bibliotheek naar Chrome UX Report API en klik op Inschakelen.
3. Klik in API’s en services > Inloggegevens op Inloggegevens maken en daarna API-sleutel.
4. Kopieer de gegenereerde sleutel (ze begint met AIzaSy) en plak ze in de configuratie van de module.

Installatie

1. Open in uw backoffice Modules > Modulebeheer.
2. Klik op Een module installeren en upload het bestand dfcoreweb.zip.
3. Klik op Configureren zodra de installatie is afgerond.

De installatie maakt drie tabellen aan (gevolgde URL’s, historische snapshots, logboek van verborgen aanbevelingen) en voegt een menu DataFirefly Core Web Vitals toe onder Verbeteren, met vier tabbladen: Dashboard, Configuratie, Geschiedenis en Aanbevelingen.

Configuratie

API-sleutel

Plak uw Chrome UX Report-sleutel in het daarvoor bestemde veld en sla op. Zolang dit veld leeg is, toont het dashboard een waarschuwing en is er geen synchronisatie mogelijk.

Gevolgde form factors

CrUX publiceert zijn metrieken afzonderlijk per apparaattype. Met drie selectievakjes kiest u welke u volgt:

• Mobiel: standaard ingeschakeld, dit is de form factor die Google gebruikt voor de beoordeling van de paginabeleving.
• Desktop: standaard ingeschakeld, nuttig als uw desktopverkeer significant is.
• Tablet: standaard uitgeschakeld, CrUX beschikt zelden over voldoende gegevens voor dit segment.

Elke extra form factor vermenigvuldigt het aantal dagelijkse aanroepen, zonder risico op quotumoverschrijding gezien de betrokken volumes.

Gevolgde URL’s

Standaard kiest de module zelf één representatieve URL per paginatype: de homepage, de categorie met de meeste producten, het bestverkochte product, de winkelwagenpagina en de eerste actieve CMS-pagina. Hij bevraagt ook de origin, dat wil zeggen de aggregatie van het hele domein.

Met drie velden neemt u zelf de regie door identifiers gescheiden door komma’s in te voeren:

• Product-ID’s: om een specifieke productpagina te volgen in plaats van de huidige bestseller.
• Categorie-ID’s: om een strategische categorie te volgen.
• CMS-pagina-ID’s: om een landingspagina of een contentpagina met veel verkeer te volgen.

Gegevensbewaring

Het veld Bewaartermijn (standaard 365 dagen) bepaalt de ouderdom waarna de snapshots worden opgeschoond. De opschoning loopt bij elke synchronisatie, en een knop op het dashboard start ze handmatig.

Regressiewaarschuwingen

• Melden bij regressie: activeert het versturen van e-mails.
• E-mailadres: ontvanger van de waarschuwingen; laat leeg om het adres van de winkel te gebruiken.
• Regressiedrempel: percentage verslechtering dat de waarschuwing activeert, standaard 15%.

Na elke synchronisatie wordt de nieuwe waarde van elke metriek vergeleken met het gemiddelde van de laatste zeven dagen. Overschrijdt het verschil de drempel, dan wordt een e-mail in HTML en tekst verzonden met het detail van de delta en een directe link naar het dashboard.

Automatische synchronisatie

De configuratiepagina toont een synchronisatie-URL, beschermd door een token dat is afgeleid van de beveiligingssleutel van uw winkel. Roep ze één keer per dag aan vanuit uw taakplanner:

0 6 * * * curl -s "https://uw-winkel.com/index.php?fc=module&module=dfcoreweb&controller=cron&token=UW_TOKEN" > /dev/null

Onder Windows gebruikt u de Taakplanner; op shared hosting voldoen de module Crontab Manager van PrestaShop of de planner van uw beheerpaneel ook.

Met de knop Synchronisatie starten op het dashboard start u onmiddellijk een verzameling, nuttig om de configuratie direct na de installatie te valideren.

Het dashboard lezen

Het dashboard toont een tegel per paginatype, met de laatst bekende waarde van elke metriek en een kleurcode volgens de officiële drempels van Google:

• LCP (Largest Contentful Paint): goed tot 2,5 s, te verbeteren tot 4 s, slecht daarboven.
• INP (Interaction to Next Paint): goed tot 200 ms, te verbeteren tot 500 ms, slecht daarboven.
• CLS (Cumulative Layout Shift): goed tot 0,1, te verbeteren tot 0,25, slecht daarboven.
• FCP (First Contentful Paint): goed tot 1,8 s, te verbeteren tot 3 s.
• TTFB (Time To First Byte): goed tot 0,8 s, te verbeteren tot 1,8 s.

Alle waarden worden uitgedrukt op het 75e percentiel: ze vertegenwoordigen de ervaring van de 25% minst goed bediende bezoekers, conform de methodologie van Google. Een winkel wordt geacht de beoordeling te “halen” wanneer LCP, INP en CLS tegelijk in het groen staan.

Geschiedenis

Het tabblad Geschiedenis legt de evolutie van elke metriek over 30, 90, 180 of 365 dagen over elkaar, voor een gegeven paginatype en form factor. De grafieken tonen de drempels van Google als stippellijnen, waardoor de overgang van de ene zone naar de andere onmiddellijk afleesbaar is. Een extra curve volgt het percentage bezoeken dat op de drie hoofdmetrieken als “goed” is geclassificeerd.

Dit is de weergave om te raadplegen na een productierelease, een themamigratie of het toevoegen van een script van derden: een verslechtering van de LCP verschijnt doorgaans in de dagen erna, vertraagd door het glijdende venster van 28 dagen.

Aanbevelingen

Elke metriek buiten de drempel genereert een of meer aanbevelingen, gekoppeld aan het betreffende paginatype en gesorteerd op ernst:

• Kritiek: metriek in de rode zone, directe impact op de SEO en de conversie.
• Waarschuwing: metriek in de oranje zone, aanzienlijke verbetermarge.
• Informatie: goede praktijk die ook in de groene zone toepasbaar is.

De adviezen zijn geformuleerd in PrestaShop-vocabulaire: formaat en preload van de omslagafbeelding op een productpagina, expliciete afmetingen van de miniaturen in het categorieraster, aantal modules op de header-hooks, compressie en servercache voor de TTFB, uitstellen van scripts van derden voor de INP. Elke aanbeveling draagt een geschatte businessimpact, gekalibreerd op de Deloitte-studie “Milliseconds Make Millions”.

De knop Verbergen haalt een aanbeveling 30 dagen uit de lijst, de tijd om het onderwerp aan te pakken of vast te stellen dat het geen prioriteit heeft.

De status “onvoldoende gegevens”

CrUX publiceert een metriek pas wanneer voldoende Chrome-bezoekers de URL in de periode hebben geladen. Onder die drempel antwoordt de API dat het record niet bestaat: de module registreert dan de status “onvoldoende gegevens”, zonder fout en zonder onderbreking van de verzameling.

Geldt dat voor de meeste van uw pagina’s, steun dan op de regel Origin: de aggregatie van het hele domein haalt de drempel veel makkelijker en blijft representatief voor de gemiddelde ervaring van uw winkel.

Privacy en gegevensopslag

Er wordt geen enkel klantgegeven naar Google verzonden. Alleen de publieke URL’s die u hebt gekozen te volgen worden naar de CrUX-API gestuurd, en de teruggegeven metrieken zijn al door Google geanonimiseerd en geaggregeerd. Alle metingen worden opgeslagen in uw eigen PrestaShop-database. De grafiekenbibliotheek is in de module ingebouwd: geen aanroep naar een externe CDN, geen telemetrie, geen analysescript aan bezoekerszijde.

Probleemoplossing

• Authenticatiefout bij de synchronisatie: de API-sleutel ontbreekt, is fout overgenomen, of de Chrome UX Report API is niet ingeschakeld op het Google Cloud-project. Controleer ook of er geen IP-adres- of HTTP-referrerbeperking op de sleutel is toegepast.
• Alle regels op “onvoldoende gegevens”: het Chrome-verkeer op deze URL’s is te laag. Volg de origin en kies handmatig pagina’s met veel verkeer.
• De cron-aanroep geeft een autorisatiefout: het token in de URL komt niet meer overeen. Het hangt af van de winkelnaam en de beveiligingssleutel van de installatie: neem de URL uit de configuratie opnieuw over na elke wijziging van de winkelnaam.
• Het menu verschijnt niet na de installatie: leeg de cache in Geavanceerde instellingen > Prestaties en controleer daarna de rechten van uw medewerkersprofiel op de nieuwe tabbladen.
• De grafieken blijven leeg: er zijn minimaal twee synchronisaties op verschillende datums nodig om een curve te tekenen. Wacht 24 uur na de eerste verzameling.

De-installatie

De de-installatie verwijdert de drie tabellen van de module, alle configuratiesleutels en de backoffice-tabbladen. De meetgeschiedenis gaat definitief verloren: exporteer uw gegevens vooraf als u ze wilt bewaren. Vóór de operatie wordt een expliciete bevestiging gevraagd.