Brugerdefinerede audits og assertions
Udvikl jeres egne Lighthouse-audits for at håndhæve specifikke performance- eller best-practice-regler, der er relevante for jeres projekt.
Brugerdefinerede audits og assertions er en gratis Optimering af webydeevne og Lighthouse-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Optimering af webydeevne og Lighthouse, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.
Udvid Lighthouses funktionalitet
Velkommen til oprettelse af tilpassede Lighthouse-analyser! Lighthouse tilbyder mange indbyggede kontroller, men nogle gange har du brug for at håndhæve projektspecifikke regler eller validere unikke krav til ydeevnen.
Denne lektion viser dig, hvordan du bygger dine egne.
Hvorfor oprette tilpassede analyser?
Tilpassede analyser gør det muligt at tilpasse Lighthouse præcist til dine behov. De hjælper dig med at:
- Håndhæve standarder: Kontrollere bestemte kodemønstre eller brug af komponenter.
- Validere unikke målinger: Måle aspekter af ydeevnen, som ikke dækkes som standard.
- Sikre overholdelse: Kontrollere projektspecifikke regler for tilgængelighed eller SEO.
- Automatisere kontroller: Integrere tilpasset feedback om ydeevnen direkte i din udviklingsarbejdsgang.
En analyses opbygning: Dataindsamlere og analyser
En tilpasset Lighthouse-analyse består typisk af to hoveddele:
- Dataindsamler: Denne komponent indsamler rå data om siden. Den kører i browseren og udtrækker specifikke oplysninger, f.eks. DOM-elementer, netværksanmodninger eller JavaScript-variabler.
- Analyse: Denne komponent analyserer de data, som dataindsamleren har indsamlet. Den anvender logik til at bestemme en score og en bestået/ikke-bestået-status samt til at levere anbefalinger.
Begge dele forbindes derefter i en Lighthouse-konfigurationsfil.
Byg en dataindsamler: Dataindsamling
En dataindsamler er ansvarlig for at indsamle data. Den nedarver fra Lighthouse.Gatherer og bruger metoder som afterPass til at køre JavaScript i sidens kontekst.
Lad os oprette en dataindsamler, der kontrollerer, om et bestemt <meta>-tag findes.
Eksempel på dataindsamlerkode
Denne dataindsamler leder efter et <meta name="author">-tag og returnerer dets indhold. Hvis tagget ikke findes, returnerer den 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;Byg en analyse: Evalueringslogik
En analyse modtager de data, som dataindsamlerne leverer, og anvender din tilpassede logik. Den nedarver fra Lighthouse.Audit og implementerer en statisk audit-metode.
Denne metode modtager de indsamlede "artifacts" (data) og bestemmer analysens resultat.
Eksempel på analysekode
Denne analyse bruger dataene fra vores AuthorMetaGatherer til at kontrollere, om author-meta-tagget findes og har indhold. Den giver scoren 1 (bestået) eller 0 (ikke bestået).
// 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;Integrér i Lighthouse-konfigurationen
Hvis Lighthouse skal kende din tilpassede dataindsamler og analyse, skal du bruge en tilpasset konfigurationsfil. Denne fil fortæller Lighthouse, hvilke dataindsamlere der skal køre, og hvilke analyser der skal medtages, ofte som en udvidelse af Lighthouses standardkontroller.
// 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'},
],
},
},
};Kør Lighthouse med tilpassede analyser
Endelig kan du køre Lighthouse programmatisk ved hjælp af Node.js og henvise til din tilpassede konfigurationsfil. Dette script starter Chrome, kører Lighthouse og genererer en rapport.
Sørg for, at lighthouse og chrome-launcher er installeret via npm.
// 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();
})();Komponenter i en tilpasset analyse
Du har lært om de vigtigste dele, der skal bruges til at bygge en tilpasset Lighthouse-analyse.
Hvilke af følgende er nødvendige komponenter, når du opretter en tilpasset Lighthouse-analyse?
Opsamling: Dine værktøjer til tilpassede analyser
Du har lært, hvordan du udvider Lighthouses funktionalitet!
Ved at forstå dataindsamlere, analyser og tilpassede konfigurationer kan du nu bygge effektive, projektspecifikke kontroller. Det giver dig mulighed for at håndhæve unikke best practices og få mere dybdegående, tilpasset indsigt i din webydeevne.
Lær Optimering af webydeevne og Lighthouse med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Brugerdefinerede audits og assertions” gratis?
Ja — hele teksten til “Brugerdefinerede audits og assertions” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Optimering af webydeevne og Lighthouse-kurset, skal du opgradere til CoddyKit PRO. Optimering af webydeevne og Lighthouse-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brugerdefinerede audits og assertions”?
Udvikl jeres egne Lighthouse-audits for at håndhæve specifikke performance- eller best-practice-regler, der er relevante for jeres projekt. Du øver dig i Optimering af webydeevne og Lighthouse med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Optimering af webydeevne og Lighthouse?
Der kræves ingen tidligere erfaring. Optimering af webydeevne og Lighthouse på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Brugerdefinerede audits og assertions”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Optimering af webydeevne og Lighthouse-lektion?
Ja. Alle Optimering af webydeevne og Lighthouse-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Lighthouse via CLI og programmatisk
- Brugerdefinerede audits og assertions
- Integration af Lighthouse i CI/CD
- Ydeevnebudgetter med Lighthouse