Back to Agent Skills
Frontend & Design
Lighthouse Performance Auditing
Run Lighthouse audits from your agent to measure performance, accessibility, SEO, and best practices scores.
Claude Code Codex Cursor Gemini CLI
Overview
Google Lighthouse is the industry-standard tool for auditing web page quality across performance, accessibility, best practices, and SEO categories. AI agents can run Lighthouse audits programmatically, interpret the results, and implement fixes for failing audits automatically.
Using the Lighthouse CLI, your AI agent can audit any URL or local development server, then parse the JSON report to identify specific issues. It can fix render-blocking resources, implement missing ARIA attributes, add image alt text, configure proper caching headers, and optimize JavaScript bundle sizes based on the audit findings.
Running Lighthouse as part of your development workflow ensures you catch performance regressions before they reach production. AI agents can set up CI/CD integration with Lighthouse CI, establish performance budgets, and track scores over time to prevent gradual degradation.
Using the Lighthouse CLI, your AI agent can audit any URL or local development server, then parse the JSON report to identify specific issues. It can fix render-blocking resources, implement missing ARIA attributes, add image alt text, configure proper caching headers, and optimize JavaScript bundle sizes based on the audit findings.
Running Lighthouse as part of your development workflow ensures you catch performance regressions before they reach production. AI agents can set up CI/CD integration with Lighthouse CI, establish performance budgets, and track scores over time to prevent gradual degradation.
Who Is This For?
- Developers running performance audits before deploying to production
- Teams setting up Lighthouse CI to catch regressions automatically
- Engineers systematically fixing accessibility and SEO issues
- Performance-focused teams establishing and enforcing quality budgets
Installation
Setup for Claude Code
npm install -g lighthouse
lighthouse http://localhost:3000 --output json --output-path report.json Configuration
// lighthouserc.js (Lighthouse CI)
module.exports = {
ci: {
collect: {
url: ["http://localhost:3000/", "http://localhost:3000/about"],
numberOfRuns: 3,
},
assert: {
assertions: {
"categories:performance": ["error", { minScore: 0.9 }],
"categories:accessibility": ["error", { minScore: 0.95 }],
},
},
},
}; Explore AI Tools
Discover the best AI tools that complement your skills
Read AI & Design Articles
Tips and trends in the world of design and AI
Related Skills
Frontend & Design
Figma MCP Server
Bridge the gap between design and code by connecting Figma to your AI agent via MCP, enabling accurate design-to-code translation.
Claude Code Cursor
Frontend & Design Storybook Component Docs
Build, document, and visually test UI components in isolation using Storybook. AI agents can generate stories and catch visual regressions.
Claude Code Copilot Cursor
Frontend & Design Tailwind CSS IntelliSense
Get intelligent Tailwind class suggestions, autocompletions, and linting as you style components in your editor.
Copilot Cursor Windsurf