Tilpassede revisjoner og påstander
Utvikle egne Lighthouse-revisjoner for å håndheve bestemte regler for ytelse eller beste praksis som er relevante for prosjektet.
Tilpassede revisjoner og påstander er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Utvid Lighthouse-funksjonaliteten
Velkommen til arbeidet med å lage tilpassede Lighthouse-revisjoner! Lighthouse tilbyr mange innebygde kontroller, men noen ganger trenger De å håndheve prosjek spesifikke regler eller validere unike ytelseskrav.
I denne leksjonen lærer De hvordan De kan bygge Deres egne.
Hvorfor lage tilpassede revisjoner?
Tilpassede revisjoner gjør det mulig å tilpasse Lighthouse nøyaktig etter Deres behov. De hjelper Dem med å:
- Håndheve standarder: Kontrollere bestemte kodemønstre eller bruk av komponenter.
- Validere unike måleverdier: Måle ytelsesaspekter som ikke dekkes som standard.
- Sikre samsvar: Kontrollere prosjek spesifikke regler for tilgjengelighet eller SEO.
- Automatisere kontroller: Integrere tilpassede ytelsestilbakemeldinger direkte i utviklingsarbeidsflyten.
Revisjonens oppbygning: Gatherers og audits
En tilpasset Lighthouse-revisjon består vanligvis av to hoveddeler:
- Gatherer: Denne komponenten samler inn rådata om siden. Den kjører i nettleseren og henter ut spesifikk informasjon, for eksempel DOM-elementer, nettverksforespørsler eller JavaScript-variabler.
- Audit: Denne komponenten analyserer dataene som gathereren har samlet inn. Den bruker logikk til å fastsette en poengsum og en bestått/ikke bestått-status, og gir anbefalinger.
Begge kobles deretter sammen i en Lighthouse-konfigurasjonsfil.
Bygg en gatherer: Datainnsamling
En gatherer har ansvar for å samle inn data. Den utvider Lighthouse.Gatherer og bruker metoder som afterPass til å kjøre JavaScript i sidens kontekst.
La oss lage en gatherer som ser etter en bestemt <meta>-tagg.
Kodeeksempel for gatherer
Denne gathereren ser etter en <meta name="author">-tagg og returnerer innholdet. Hvis taggen ikke finnes, 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;Bygg en audit: Evalueringslogikk
En audit tar imot dataene som gathererne leverer, og bruker Deres tilpassede logikk. Den utvider Lighthouse.Audit og implementerer en statisk audit-metode.
Denne metoden mottar de innsamlede «artifacts» (dataene) og fastsetter resultatet for revisjonen.
Kodeeksempel for audit
Denne auditen bruker dataene fra AuthorMetaGatherer til å kontrollere om author-meta-taggen finnes og har innhold. Den gir poengsummen 1 (bestått) eller 0 (ikke bestått).
// 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;Integrer i Lighthouse-konfigurasjonen
For at Lighthouse skal kjenne til den tilpassede gathereren og auditen, trenger De en tilpasset konfigurasjonsfil. Denne filen forteller Lighthouse hvilke gatherere som skal kjøres, og hvilke auditer som skal inkluderes, ofte ved å utvide standardkontrollene i 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'},
],
},
},
};Kjør Lighthouse med tilpassede auditer
Til slutt kan De kjøre Lighthouse programmessig med Node.js og referere til den tilpassede konfigurasjonsfilen. Dette skriptet starter Chrome, kjører Lighthouse og genererer en rapport.
Sørg for at lighthouse og chrome-launcher er installert 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 audit
De har lært om de viktigste delene som trengs for å bygge en tilpasset Lighthouse-audit.
Hvilke av følgende er viktige komponenter når De oppretter en tilpasset Lighthouse-audit?
Oppsummering: Verktøysettet for tilpassede auditer
De har nå lært hvordan De kan utvide funksjonaliteten i Lighthouse!
Ved å forstå gatherere, auditer og tilpassede konfigurasjoner kan De nå bygge kraftige, prosjek spesifikke kontroller. Dette gjør det mulig å håndheve unike beste praksiser og få dypere, tilpasset innsikt i webytelsen.
Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Tilpassede revisjoner og påstander» gratis?
Ja – hele teksten i «Tilpassede revisjoner og påstander» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tilpassede revisjoner og påstander»?
Utvikle egne Lighthouse-revisjoner for å håndheve bestemte regler for ytelse eller beste praksis som er relevante for prosjektet. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?
Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Tilpassede revisjoner og påstander»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?
Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lighthouse via CLI og programkode
- Tilpassede revisjoner og påstander
- Integrere Lighthouse i CI/CD
- Ytelsesbudsjetter med Lighthouse