Aangepaste audits en assertions
Ontwikkel uw eigen Lighthouse-audits om specifieke prestatie- of best-practiceregels voor uw project af te dwingen.
Aangepaste audits en assertions is een gratis Webprestatieoptimalisatie en Lighthouse-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webprestatieoptimalisatie en Lighthouse. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
De kracht van Lighthouse uitbreiden
Welkom bij het maken van aangepaste Lighthouse-audits! Lighthouse biedt veel ingebouwde controles, maar soms moet u projectspecifieke regels afdwingen of unieke prestatievereisten valideren.
In deze les leert u hoe u uw eigen audits bouwt.
Waarom aangepaste audits maken?
Met aangepaste audits kunt u Lighthouse precies aan uw behoeften aanpassen. Ze helpen u om:
- Standaarden af te dwingen: Te controleren op specifieke codepatronen of het gebruik van componenten.
- Unieke metingen te valideren: Prestatieaspecten te meten die standaard niet worden gedekt.
- Naleving te waarborgen: Projectspecifieke regels voor toegankelijkheid of SEO te controleren.
- Controles te automatiseren: Aangepaste feedback over prestaties rechtstreeks in uw ontwikkelingsworkflow te integreren.
Anatomie van een audit: gatherers en audits
Een aangepaste Lighthouse-audit bestaat doorgaans uit twee hoofdonderdelen:
- Gatherer: Dit onderdeel verzamelt onbewerkte gegevens over de pagina. Het wordt in de browser uitgevoerd en extraheert specifieke informatie, zoals DOM-elementen, netwerkaanvragen of JavaScript-variabelen.
- Audit: Dit onderdeel analyseert de gegevens die door de gatherer zijn verzameld. Het past logica toe om een score en een geslaagde/mislukte status te bepalen en geeft aanbevelingen.
Beide worden vervolgens gekoppeld in een Lighthouse-configuratiebestand.
Een gatherer bouwen: gegevens verzamelen
Een gatherer is verantwoordelijk voor het verzamelen van gegevens. Deze breidt Lighthouse.Gatherer uit en gebruikt methoden zoals afterPass om JavaScript uit te voeren in de context van de pagina.
Laten we een gatherer maken die controleert op een specifieke <meta>-tag.
Voorbeeld van gatherercode
Deze gatherer zoekt naar een tag <meta name="author"> en retourneert de inhoud ervan. Als de tag niet wordt gevonden, retourneert de gatherer null.
// gatherers/author-meta-gatherer.js
'use strict';
const Gatherer = require('lighthouse').Gatherer;
class AuthorMetaGatherer extends Gatherer {
afterPass(options) {
const driver = options.driver;
// Evaluate JS in the browser context
return driver.evaluateAsync(() => {
const metaTag = document.querySelector('meta[name="author"]');
return metaTag ? metaTag.content : null;
});
}
}
module.exports = AuthorMetaGatherer;Een audit bouwen: evaluatielogica
Een audit gebruikt de gegevens die door gatherers zijn aangeleverd en past uw aangepaste logica toe. De audit breidt Lighthouse.Audit uit en implementeert een statische audit-methode.
Deze methode ontvangt de verzamelde "artifacts" (gegevens) en bepaalt het resultaat van de audit.
Voorbeeld van auditcode
Deze audit gebruikt de gegevens van onze AuthorMetaGatherer om te controleren of de author-meta-tag aanwezig is en inhoud bevat. De audit krijgt score 1 (geslaagd) of 0 (mislukt).
// audits/author-meta-audit.js
'use strict';
const Audit = require('lighthouse').Audit;
class AuthorMetaAudit extends Audit {
static get meta() {
return {
id: 'author-meta-tag',
title: 'Author meta tag is present',
failureTitle: 'Author meta tag is missing or empty',
description: 'Ensures an author meta tag is present for attribution.',
requiredArtifacts: ['AuthorMetaGatherer'],
};
}
static audit(artifacts) {
const authorMetaContent = artifacts.AuthorMetaGatherer;
const passed = !!authorMetaContent && authorMetaContent.trim().length > 0;
return {
score: passed ? 1 : 0,
details: {
type: 'debuginfo',
headings: [
{key: 'content', itemType: 'text', text: 'Author Meta Content'},
],
items: [{content: authorMetaContent || 'Not found'}],
},
};
}
}
module.exports = AuthorMetaAudit;Integreren in de Lighthouse-configuratie
Om Lighthouse op de hoogte te brengen van uw aangepaste gatherer en audit, hebt u een aangepast configuratiebestand nodig. Dit bestand vertelt Lighthouse welke gatherers moeten worden uitgevoerd en welke audits moeten worden opgenomen, vaak als uitbreiding van de standaardcontroles van Lighthouse.
// custom-config.js
'use strict';
module.exports = {
extends: 'lighthouse:default', // Inherit default audits
gatherers: [
'./gatherers/author-meta-gatherer.js',
],
audits: [
'./audits/author-meta-audit.js',
],
categories: {
'custom-category': {
title: 'Custom Checks',
description: 'Project-specific performance and best practice audits.',
auditRefs: [
{id: 'author-meta-tag', weight: 1, group: 'metrics'},
],
},
},
};Lighthouse uitvoeren met aangepaste audits
Ten slotte kunt u Lighthouse programmatisch uitvoeren met Node.js, waarbij u verwijst naar uw aangepaste configuratiebestand. Dit script start Chrome, voert Lighthouse uit en genereert een rapport.
Zorg dat lighthouse en chrome-launcher via npm zijn geïnstalleerd.
// run-custom-audit.js
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
(async () => {
const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
const options = {
logLevel: 'info',
output: 'html',
onlyCategories: ['custom-category'], // Run ONLY our custom category
port: chrome.port
};
const config = require('./custom-config.js'); // Load your custom config
const runnerResult = await lighthouse('https://example.com', options, config);
console.log('Report is done for', runnerResult.lhr.requestedUrl);
// Accessing your custom audit score:
const customAuditScore = runnerResult.lhr.audits['author-meta-tag'].score;
console.log('Author Meta Tag Audit Score:', customAuditScore);
await chrome.kill();
})();Onderdelen van aangepaste audits
U hebt geleerd welke belangrijke onderdelen nodig zijn om een aangepaste Lighthouse-audit te bouwen.
Welke van de volgende zijn essentiële onderdelen bij het maken van een aangepaste Lighthouse-audit?
Samenvatting: uw toolkit voor aangepaste audits
U hebt geleerd hoe u de mogelijkheden van Lighthouse kunt uitbreiden!
Door gatherers, audits en aangepaste configuraties te begrijpen, kunt u nu krachtige, projectspecifieke controles bouwen. Daarmee kunt u unieke best practices afdwingen en diepgaandere, afgestemde inzichten in uw webprestaties verkrijgen.
Leer Webprestatieoptimalisatie en Lighthouse met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Aangepaste audits en assertions” gratis?
Ja — de volledige tekst van “Aangepaste audits en assertions” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Webprestatieoptimalisatie en Lighthouse wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Wat leer ik in “Aangepaste audits en assertions”?
Ontwikkel uw eigen Lighthouse-audits om specifieke prestatie- of best-practiceregels voor uw project af te dwingen. Je oefent met Webprestatieoptimalisatie en Lighthouse door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webprestatieoptimalisatie en Lighthouse te beginnen?
Ervaring vooraf is niet nodig. Webprestatieoptimalisatie en Lighthouse op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Aangepaste audits en assertions”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webprestatieoptimalisatie en Lighthouse?
Ja. Elke les over Webprestatieoptimalisatie en Lighthouse bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Lighthouse via CLI en programmatisch gebruiken
- Aangepaste audits en assertions
- Lighthouse integreren in CI/CD
- Performancebudgets met Lighthouse