Er zijn vele tools te vinden om de prestaties van pagina’s te monitoren en te zien of de verbeteringen aan je site helpen. Een van de beste is PageSpeed Insights en is beschikbaar als webapplicatie en als het Lighthouse tabblad in de DevTools van Chrome (dezelfde DevTools zijn ook beschikbaar in Edge, Opera, Brave en Vivaldi).
En dat is belangrijk, want prestaties van webpagina’s zijn nog nooit zo cruciaal geweest. Gebruikers verwachten een soepele en responsieve ervaring die het kan opnemen tegen desktopapplicaties. Bovendien meten de Core Web Vitals van Google de paginaprestaties – ze beïnvloeden de PageRank en je inspanningen voor zoekmachineoptimalisatie.
Meer dan een derde van alle websites draait op WordPress, van zichzelf een enorm snelle CMS. De prestaties worden echter beïnvloed door ineffectieve hosting, trage thema’s en een te grote afhankelijkheid van plugins. Je kunt de meeste problemen oplossen door over te stappen op een goede webhost en de best practices rond performancetechnieken toe te passen.
Adgang til Lighthouse
Start Lighthouse door de pagina die je wilt onderzoeken te openen en op Ctrl/Cmd + Shift + I te drukken of door Developer Tools te kiezen uit More tools in het menu. Ga naar het tabblad Lighthouse en klik op de knop Analyse Page Load. De resultaten worden na enkele seconden getoond:
Je kunt in de bovenste percentages inzoomen om meer informatie en hints te ontdekken die bekende problemen aanpakken. De tool is van onschatbare waarde, maar er zijn ook nadelen:
- Je moet handmatig een run starten voor elke pagina die je test.
- Het is niet eenvoudig om vast te leggen hoe factoren in de loop van de tijd zijn verbeterd of verslechterd.
- Er zijn veel gegevens te controleren en het is gemakkelijk om iets fout te doen.
- De technische details zijn bedoeld voor developers. Het is mogelijk overweldigend voor klanten en managers die een snel overzicht willen van de voortgang.
- Lighthouse tests kunnen beïnvloed worden door lokale apparaat- en netwerksnelheden, wat tot verkeerde aannames kan leiden.
De PageSpeed Insights API biedt een manier om deze problemen op te lossen, zodat tests kunnen worden geautomatiseerd, vastgelegd en vergeleken.
Wat is de PageSpeed Insights API?
Google biedt een gratis PageSpeed Insights REST API die gegevens in JSON format retourneert met alle Lighthouse statistieken en meer. Hiermee kun je paginaruns automatiseren, de resulterende gegevens opslaan, veranderingen in de tijd bekijken en precies de informatie weergeven die je nodig hebt.
De PageSpeed Insights API emuleert hoe Google je site ziet. Je zou elke paar dagen een rapport kunnen draaien of telkens als je een prestatie-update uitbrengt.
De resultaten zijn nuttig, maar niet noodzakelijkerwijs indicatief voor de werkelijke gebruikerservaring. De Browser Performance API is een betere optie als je de werkelijke prestaties over alle apparaten en netwerken van je gebruikers wilt volgen.
PageSpeed Insights API Quickstart
Kopieer het volgende adres naar je webbrowser en bewerk de url om de prestaties van je pagina te beoordelen:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
Firefox is ideaal omdat het een ingebouwde JSON viewer heeft, hoewel Chrome extensies heeft die dezelfde functionaliteit bieden. De algemene Lighthouse prestatiescore is hieronder gehighlighted:
Je kunt de API URL querystring veranderen voor je eigen pagina’s en voorkeuren. De enige vereiste parameter is url, bijv.
url=https://mysite.com/page1
Standaard wordt een desktoptest uitgevoerd, maar je kunt deze expliciet aanvragen met:
strategy=desktop
of overschakelen naar mobiel met:
strategy=mobile
Er worden alleen prestatietests uitgevoerd, tenzij je een of meer categorieën opgeeft:
category=performance
category=accessibility
category=best-practices
category=seo
category=pwa
Een specifieke taal kan worden gedefinieerd door een locale in te stellen – zoals Frans:
locale=fr-FR
en Google Analytics campagnedetails kunnen worden ingesteld met:
utm_campaign=<campaign>
utm_source=<source>
De dienst is gratis voor infrequente verzoeken, maar je moet je aanmelden voor een Google API sleutel als je van plan bent om in een korte periode veel tests uit te voeren vanaf hetzelfde IP adres. De sleutel wordt aan de URL toegevoegd met:
key=<api-key>
Je kunt de querystring van de URL opbouwen door je gekozen parameters te specificeren, gescheiden met ampersand (&) tekens. De volgende API URL test de pagina op https://mysite.com/ met behulp van een mobiel apparaat om de prestaties en toegankelijkheidscriteria te beoordelen:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
Je kunt je eigen URL’s samenstellen of de Google PageSpeed API URL buildertool gebruiken als je meer hulp nodig hebt.
PageSpeed Insights API JSON resultaten
Tests geven meestal ongeveer 600Kb aan JSON gegevens terug, afhankelijk van de gekozen categorieën, het aantal onderdelen op de pagina en de complexiteit van de schermafbeeldingen (ingesloten in base64 format).
De hoeveelheid gegevens is ontmoedigend, er is enige duplicatie, en de documentatie van de resultaten is niet altijd duidelijk. De JSON is opgedeeld in vier secties, zoals hieronder beschreven.
loadingExperience
Dit zijn statistieken berekend voor de laadervaring van de pagina van de eindgebruiker. Het bevat informatie zoals de Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS, en FIRST_INPUT_DELAY_MS. Details en een “category” waarde geeft FAST, AVERAGE, SLOW, of NONE als er geen meting is gedaan. Voorbeeld:
"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},originLoadingExperience
Dit zijn geaggregeerde statistieken berekend voor de laadervaring van alle gebruikers. De secties zijn identiek aan loadingExperience hierboven en sites met minder verkeer zullen waarschijnlijk geen verschil in cijfers laten zien.
lighthouseResult
Dit is de grootste sectie en bevat alle Lighthouse statistieken. Het geeft informatie over de test:
- requestedUrl – de opgevraagde URL
- finalUrl – de werkelijk geteste pagina na het volgen van alle redirects
- lighthouseVersion – de softwareversie
- fetchTime – het tijdstip waarop de test is uitgevoerd
- userAgent – de user agent string van de browser die voor de test is gebruikt
- environment – uitgebreide user agent informatie
- configSettings – de instellingen die aan de API zijn doorgegeven
Dit wordt gevolgd door een “audits” sectie met vele secties, waaronder unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails, en full-page-screenshot.
De meeste auditstatistieken bieden een “details” sectie die factoren bevat als “overallSavingsBytes” en “overallSavingsMs” die de voordelen van het doorvoeren van een prestatieverbetering inschatten.
De secties “screenshot” van de volledige pagina en thumbnails bevatten ingesloten base64 afbeeldingsgegevens.
Een “metrics” sectie geeft een samenvatting van alle metriek in een “items” array, bijv.
"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},De “audits” sectie wordt gevolgd door “categories” die algemene Lighthouse scores geeft voor de gekozen categorieën die via de API URL zijn doorgegeven:
"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...De “score” is een getal tussen 0 en 1 dat normaal gesproken als percentage wordt weergegeven op Lighthouse rapporten. In het algemeen is een score van:
- 0.9 tot 1,0 is goed
- 0.5 tot onder 0,9 geeft aan dat verbetering nodig is
- minder dan 0,5 is slecht en vereist meer dringende aandacht
Het onderdeel “auditRefs” geeft een lijst van alle statistieken en de wegingen die zijn gebruikt om elke score te berekenen.
analyseUTCTimestamp
Tenslotte wordt de analysetijd gerapporteerd. Deze zou identiek moeten zijn aan de tijd die getoond wordt in lighthouseResult.fetchTime.
Nuttige JSON resultaatgegevens
Ik raad je aan het JSON resultaat op te slaan en te onderzoeken in een tekstverwerker. Sommige hebben JSON formatters ingebouwd of zijn beschikbaar als plugins. Als alternatief kun je gratis online tools gebruiken zoals:
De volgende statistieken komen waarschijnlijk van pas. Vergeet niet de bijbehorende categorie opties op de URL in te stellen als dat nodig is.
Samenvattende statistieken
Algemene scores van 0 tot 1:
| Prestaties | lighthouseResult.categories.performance.score |
| Toegankelijkheid | lighthouseResult.categories.accessibility.score |
| Best-practices | lighthouseResult.categories.best-practices.score |
| SEO | lighthouseResult.categories.seo.score |
| Progressive Web App (PWA) | lighthouseResult.categories.pwa.score |
Prestatiecijfers
Dit zijn de Core Web Vitals scores van 0 tot 1:
| First Contentful Paint | lighthouseResult.audits.first-contentful-paint.score |
| First Meaningful Paint | lighthouseResult.audits.first-meaningful-paint.score |
| Largest Contentful Paint | lighthouseResult.audits.largest-contentful-paint.score |
| Speed Index | lighthouseResult.audits.speed-index.score |
| Cumulative Layout Shift | lighthouseResult.audits.cumulative-layout-shift.score |
Andere nuttige prestatiescores zijn:
| Serverresponstijd | lighthouseResult.audits.server-response-time.score |
| Is crawlable | lighthouseResult.audits.is-crawlable.score |
| Consolefouten | lighthouseResult.audits.errors-in-console.score |
| Totaal aantal bytes | lighthouseResult.audits.total-byte-weight.score |
| DOM grootte score | lighthouseResult.audits.dom-size.score |
Je kunt meestal actuele cijfers en eenheden verkrijgen zoals:
- lighthouseResult.audits.total-byte-weight.numericValue –
de totale paginagrootte, bijv. 450123 - lighthouseResult.audits.total-byte-weight.numericUnit – de voor de totale paginagrootte gebruikte eenheden, bijv “byte”
Als alternatief bevat “displayValue” meestal een leesbaar bericht met zowel het cijfer als de eenheid:
- lighthouseResult.audits.server-response-time.displayValue –
een bericht over de responstijd, bijv. “Root document duurde 170 ms” - lighthouseResult.audits.dom-size.displayValue –
een bericht over het aantal elementen in het DOM, bijv. “543 elementen”
Maak een no-code Performance Dashboard
Live API feeds kunnen worden gelezen en verwerkt in veel systemen, waaronder Microsoft Excel. (Enigszins bizar genoeg ondersteunt Google Sheets geen JSON feeds zonder verdere plugins of macrocode. Het ondersteunt wel XML.)
Om de live algemene prestatiescore in Excel te importeren, start je een nieuwe spreadsheet, ga je naar het tabblad Data en klik je op From Web. Voer je PageSpeed Insights API URL in en klik op OK:
Klik op Connect in het volgende dialoogvenster en behoud de standaardinstelling (Anoniem). Je gaat door naar de tool Query Settings:
Klik op Record rechts van de lighthouse resultaatmetriek. Klik dan hetzelfde op categories en performance om in de JSON objecthiërarchie naar beneden te boren:
Klik op het pictogram Into Table bovenaan in de opties van het rechtsklikmenu.
Je kunt dan op de filterpijl in de tabelkop klikken om alles behalve de score te verwijderen voordat je op OK klikt:
Klik tenslotte op Close & Load om de live prestatiescore in je spreadsheet te tonen:
Je kunt hetzelfde proces volgen voor andere interessante statistieken.
Een Web Performance Dashboard maken
Deze Codepen demonstratie biedt een formulier waarin je een URL kunt invoeren en kunt kiezen voor desktop of mobiele analyse om resultaten te verkrijgen.
De code maakt een PageSpeed Insights URL aan, roept de API aan, en geeft vervolgens verschillende resultaten weer in een overzichtstabel die sneller te bekijken is dan een standaard Lighthouse rapport:
De asynchrone startCheck() functie wordt aangeroepen wanneer het formulier wordt ingediend. Deze annuleert de submit event en verbergt eerdere resultaten:
// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);Vervolgens construeert hij apiURL uit de formuliergegevens en schakelt de velden uit:
const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;De Fetch API wordt gebruikt om de PageSpeed URL aan te roepen, het antwoord te krijgen, en de JSON string te parsen tot een bruikbaar JavaScript-object. Een try/catch blok zorgt ervoor dat fouten worden opgevangen:
try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();Het resultaatobject wordt doorgegeven aan een showResult() functie. Deze haalt de properties eruit en plaatst ze in de resultaattabel of een ander HTML element waarvan het data-point attribuut is ingesteld op een PageSpeed API property, bijv.
<td data-point="lighthouseResult.categories.performance.score"></td>
Het einde van het try blok:
// output result
showResult(result);
show(status, false);
show(resultTable);
}Tot slot handelt een catch block fouten af en worden de formuliervelden weer ingeschakeld, zodat verdere tests kunnen worden uitgevoerd:
catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}Verdere ontwikkelingsmogelijkheden
De bovenstaande voorbeeldcode haalt een resultaat op uit de PageSpeed Insights API als je die opvraagt. Het rapport is beter configureerbaar dan Lighthouse, maar de uitvoering blijft een handmatig proces.
Als je van plan bent je eigen dashboard te ontwikkelen, kan het praktisch zijn om een kleine applicatie te maken die de PageSpeed Insights API aanroept en de resulterende JSON opslaat in een nieuwe database record tegen de geteste URL en de huidige datum/tijd. De meeste databases hebben ondersteuning voor JSON, hoewel MongoDB bij uitstek geschikt is voor deze taak. Een cron job kan je applicatie op een getimede basis aanroepen – misschien één keer per dag in de vroege ochtenduren.
Een serverside applicatie kan dan zijn eigen REST API implementeren voor je rapportagevereisen, bijvoorbeeld de veranderingen in specifieke prestatiecijfers tussen twee data teruggeven. Het kan worden aangeroepen door clientside JavaScript om tabellen of grafieken weer te geven die prestatieverbeteringen in de loop van de tijd illustreren.
Als je complexe rapporten wilt maken met aanzienlijke hoeveelheden gegevens, is het beter om de cijfers eens per dag vooraf te berekenen op het moment dat er nieuwe PageSpeed gegevens beschikbaar zijn. Je wilt immers niet laten zien hoe de prestaties verbeteren op een rapport dat er minuten over doet om te genereren!
Samenvatting
De Lighthouse tool van Chrome is fantastisch, maar het is een karwei om veel pagina’s regelmatig te evalueren. Met de PageSpeed Insights API kun je de siteprestaties beoordelen met behulp van geautomatiseerde technieken. De voordelen:
- Prestatietests kunnen worden geautomatiseerd. Je kunt niet vergeten een test uit te voeren.
- Resultaten worden verzameld op Google servers, zodat lokale apparaat- en netwerksnelheidsfactoren minder invloed hebben.
- Statistieken bevatten informatie die gewoonlijk niet beschikbaar is in Lighthouse.
- Belangrijke statistieken kunnen worden geregistreerd en in de loop van de tijd worden gecontroleerd om er zeker van te zijn dat de paginaprestaties bij elke update zijn verbeterd.
- Informatie over prestaties, toegankelijkheid en SEO kan worden weergegeven in vereenvoudigde rapporten, zodat ze in één oogopslag beschikbaar zijn voor developers, managers en klanten.
Laat een reactie achter