Web Quality Audit Kit

A comprehensive skill for auditing web application quality across performance, accessibility, SEO, and best practices. Based on Google Lighthouse methodology with 150+ automated checks and actionable remediation guidance.

When to Use This Skill

Choose this skill when:

Running a comprehensive quality audit on a web application
Improving Lighthouse scores across all categories
Fixing accessibility violations for WCAG compliance
Optimizing Core Web Vitals for better search ranking
Preparing a site for launch with quality checklists

Consider alternatives when:

Working on SEO specifically → use an SEO skill
Optimizing JavaScript performance → use a performance profiling skill
Conducting security audits → use a security skill
Testing functionality → use a testing skill

Quick Start


# Run Lighthouse audit from command line
npx lighthouse https://example.com --output html --output-path ./report.html

# Run specific categories
npx lighthouse https://example.com --only-categories=performance,accessibility

# Lighthouse CI for automated checks
npm install -g @lhci/cli
lhci autorun --config=lighthouserc.json


// lighthouserc.json — CI configuration
{
  "ci": {
    "collect": {
      "url": ["http://localhost:3000/", "http://localhost:3000/products"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

Core Concepts

Audit Categories and Weights

Category	Key Metrics	Target Score
Performance	LCP, FID/INP, CLS, TTFB, TBT	> 90
Accessibility	Color contrast, ARIA, keyboard nav	> 95
SEO	Meta tags, crawlability, mobile	> 90
Best Practices	HTTPS, no console errors, image aspect	> 90

Core Web Vitals Optimization


// Performance optimization checklist
const performanceChecks = {
  LCP: { // Largest Contentful Paint — target < 2.5s
    fixes: [
      'Preload hero image: <link rel="preload" as="image" href="hero.webp">',
      'Use next/image or srcset for responsive images',
      'Inline critical CSS, defer non-critical',
      'Use CDN for static assets',
    ],
  },
  INP: { // Interaction to Next Paint — target < 200ms
    fixes: [
      'Break long tasks with requestIdleCallback or scheduler.yield()',
      'Debounce input handlers (150-300ms)',
      'Move expensive computation to Web Workers',
      'Use CSS transitions instead of JS animations',
    ],
  },
  CLS: { // Cumulative Layout Shift — target < 0.1
    fixes: [
      'Set explicit width/height on images and videos',
      'Reserve space for ads and dynamic content',
      'Use transform for animations instead of top/left/width',
      'Preload fonts with font-display: swap',
    ],
  },
};

Accessibility Audit Checklist


## Critical (must fix)
- [ ] Color contrast ratio ≥ 4.5:1 for normal text, 3:1 for large
- [ ] All images have alt text (decorative: alt="")
- [ ] Form inputs have associated labels
- [ ] Page has single h1, heading hierarchy without skips
- [ ] Interactive elements are keyboard accessible
- [ ] Focus indicators visible on all focusable elements

## Important (should fix)
- [ ] ARIA roles and properties used correctly
- [ ] Skip-to-content link present
- [ ] Language attribute on <html> element
- [ ] Error messages associated with form fields
- [ ] Touch targets minimum 44x44px on mobile
- [ ] Motion respects prefers-reduced-motion

Configuration

Parameter	Type	Default	Description
`targetScores`	object	`{perf: 90, a11y: 95}`	Minimum scores per category
`numberOfRuns`	number	`3`	Lighthouse runs per URL (median score used)
`device`	string	`'mobile'`	Device emulation: mobile or desktop
`throttling`	string	`'applied'`	Network throttling: applied, simulated, or none
`budgetFile`	string	`''`	Path to performance budget JSON
`uploadResults`	boolean	`false`	Upload results to Lighthouse CI server

Best Practices

Audit mobile first — mobile scores are always lower — Google uses mobile scores for ranking. Desktop scores hide performance issues that only appear with throttled CPU and slow 4G network emulation. Always target mobile thresholds.
Run multiple Lighthouse passes and use median scores — Single runs have variance from network conditions, server load, and CPU scheduling. Run 3-5 passes and use the median score for reliable measurements.
Set performance budgets and enforce in CI — Define maximum bundle sizes, image weights, and request counts. Break the build when budgets are exceeded. This prevents gradual performance degradation from unchecked additions.
Fix accessibility issues starting with the most impactful — Missing alt text and color contrast failures affect the most users. Fix these before tackling ARIA refinements. Use axe-core in CI for automated accessibility testing.
Address best practices warnings even if score is high — Warnings about mixed content, deprecated APIs, and missing security headers indicate technical debt. Fix them proactively before they become critical issues.

Common Issues

Performance score varies dramatically between runs — Server response time, CDN caching state, and third-party script loading cause variance. Run behind a CDN with warmed cache for consistent measurements. Exclude third-party scripts from budget calculations.

Accessibility score drops after adding dynamic content — Dynamically inserted content may lack ARIA attributes, keyboard handling, or screen reader announcements. Use aria-live regions for dynamic updates and test with a screen reader after adding interactive features.

SEO score low despite following meta tag best practices — SEO audits also check mobile usability, crawlability, and structured data. Missing viewport meta tag, blocked resources in robots.txt, or missing canonical URLs lower the score regardless of content quality.

⚠️ Loading Issue

Web Quality Audit Kit

Web Quality Audit Kit

When to Use This Skill

Quick Start

Core Concepts

Audit Categories and Weights

Core Web Vitals Optimization

Accessibility Audit Checklist

Configuration

Best Practices

Common Issues

Reviews

Write a review

Similar Templates

Full-Stack Code Reviewer

Test Suite Generator

Pro Architecture Workspace