Audit e asserzioni personalizzati
Sviluppate audit Lighthouse personalizzati per applicare specifiche regole di prestazioni o best practice pertinenti al vostro progetto.
Audit e asserzioni personalizzati è una lezione Web Performance Optimization & Lighthouse gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Performance Optimization & Lighthouse, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Performance Optimization & Lighthouse include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Extend Lighthouse's Power
Welcome to creating custom Lighthouse audits! While Lighthouse offers many built-in checks, sometimes you need to enforce project-specific rules or validate unique performance requirements.
This lesson shows you how to build your own.
Why Create Custom Audits?
Custom audits allow you to tailor Lighthouse to your exact needs. They help you:
- Enforce Standards: Check for specific coding patterns or component usage.
- Validate Unique Metrics: Measure performance aspects not covered by default.
- Ensure Compliance: Verify project-specific accessibility or SEO rules.
- Automate Checks: Integrate tailored performance feedback directly into your development workflow.
Audit Anatomy: Gatherers & Audits
A custom Lighthouse audit typically has two main parts:
- Gatherer: This component collects raw data about the page. It runs inside the browser and extracts specific information, like DOM elements, network requests, or JavaScript variables.
- Audit: This component analyzes the data collected by the gatherer. It applies logic to determine a score, a pass/fail state, and provides recommendations.
Both are then linked in a Lighthouse configuration file.
Building a Gatherer: Data Collection
A gatherer is responsible for collecting data. It extends Lighthouse.Gatherer and uses methods like afterPass to run JavaScript in the page's context.
Let's create a gatherer that checks for a specific <meta> tag.
Gatherer Code Example
This gatherer looks for an <meta name="author"> tag and returns its content. If not found, it returns 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;Building an Audit: Evaluation Logic
An audit takes the data provided by gatherers and applies your custom logic. It extends Lighthouse.Audit and implements a static audit method.
This method receives the collected "artifacts" (data) and determines the audit's result.
Audit Code Example
This audit uses the data from our AuthorMetaGatherer to check if the author meta tag is present and has content. It scores 1 (pass) or 0 (fail).
// 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;Integrating into Lighthouse Config
To make Lighthouse aware of your custom gatherer and audit, you need a custom configuration file. This file tells Lighthouse which gatherers to run and which audits to include, often extending the default Lighthouse checks.
// 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'},
],
},
},
};Running Lighthouse with Custom Audits
Finally, you can run Lighthouse programmatically using Node.js, referencing your custom configuration file. This script launches Chrome, runs Lighthouse, and generates a report.
Make sure you have lighthouse and chrome-launcher installed 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();
})();Custom Audit Components
You've learned about the key pieces needed to build a custom Lighthouse audit.
Which of the following are essential components when creating a custom Lighthouse audit?
Recap: Your Custom Audit Toolkit
You've successfully learned how to extend Lighthouse's capabilities!
By understanding gatherers, audits, and custom configurations, you can now build powerful, project-specific checks. This allows you to enforce unique best practices and gain deeper, tailored insights into your web performance.
Impara Web Performance Optimization & Lighthouse con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Audit e asserzioni personalizzati» è gratuita?
Sì — il testo completo di «Audit e asserzioni personalizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Performance Optimization & Lighthouse, passa a CoddyKit PRO. Il corso Web Performance Optimization & Lighthouse include 4 lezioni in totale.
Cosa imparerò in «Audit e asserzioni personalizzati»?
Sviluppate audit Lighthouse personalizzati per applicare specifiche regole di prestazioni o best practice pertinenti al vostro progetto. Eserciti Web Performance Optimization & Lighthouse con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Performance Optimization & Lighthouse?
Non è richiesta alcuna esperienza precedente. Web Performance Optimization & Lighthouse su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Audit e asserzioni personalizzati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Performance Optimization & Lighthouse?
Sì. Ogni lezione Web Performance Optimization & Lighthouse include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Lighthouse da CLI e tramite API
- Audit e asserzioni personalizzati
- Integrazione di Lighthouse in CI/CD
- Budget delle prestazioni con Lighthouse