Web Quality Audit

Automate and integrate Web Quality Audit checks for better site performance

Category: productivity Source: addyosmani/web-quality-skills

Web Quality Audit is a community skill for auditing web application quality, covering performance profiling, accessibility testing, SEO evaluation, best practice compliance, and Lighthouse-based scoring for comprehensive web quality assessment.

What Is This?

Overview

Web Quality Audit provides comprehensive guidance on evaluating and systematically improving web application quality across multiple dimensions. It covers performance profiling that measures Core Web Vitals including Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift for user experience scoring, accessibility testing that checks WCAG compliance for keyboard navigation, color contrast, ARIA labels, and semantic HTML structure, SEO evaluation that verifies meta tags, structured data, canonical URLs, and crawlability for search engine optimization, best practice compliance that checks HTTPS usage, image optimization, JavaScript error handling, and security headers, and progressive web app assessment that verifies service worker registration, manifest configuration, and offline capability. The skill helps developers deliver high-quality web experiences that meet modern standards and user expectations across devices.

Who Should Use This

This skill serves frontend developers optimizing web application performance, QA teams establishing quality baselines, product teams monitoring score trends across releases, and teams preparing sites for production launch.

Why Use It?

Problems It Solves

Web quality issues across performance, accessibility, and SEO are difficult to identify without systematic auditing. Core Web Vitals failures directly affect search ranking and user experience metrics. Accessibility violations create legal compliance risks and exclude users with disabilities from accessing content. Manual quality checks miss issues that automated tools detect consistently across every page, particularly when codebases change frequently and regressions are introduced incrementally.

Core Highlights

Performance profiler measures Core Web Vitals and loading metrics with detailed breakdowns. Accessibility checker validates WCAG compliance across all severity levels. SEO evaluator verifies search optimization requirements and structured data. Best practice scanner checks security headers and optimization standards.

How to Use It?

Basic Usage

npx lighthouse \
  https://example.com \
  --output=json \
  --output=html \
  --output-path=./audit

npx lighthouse \
  https://example.com \
  --only-categories=\
performance \
  --output=json

npx lhci autorun \
  --collect.url=\
https://example.com \
  --assert.preset=\
lighthouse:recommended

Real-World Examples

// Programmatic audit
const lighthouse = require(
  'lighthouse');
const chromeLauncher =
  require(
    'chrome-launcher');

async function audit(url) {
  const chrome = await
    chromeLauncher.launch({
      chromeFlags: [
        '--headless'] });

  const result = await
    lighthouse(url, {
      port: chrome.port,
      onlyCategories: [
        'performance',
        'accessibility',
        'best-practices',
        'seo']
    });

  const scores =
    result.lhr.categories;
  for (const [k, v]
    of Object.entries(
      scores)) {
    console.log(
      `${k}: ${
        (v.score * 100)
          .toFixed(0)}`);
  }

  await chrome.kill();
  return result;
}

audit('https://example.com');

Advanced Tips

Run audits in CI pipelines with Lighthouse CI to catch quality regressions before deployment. Set performance budgets that fail builds when bundle sizes or metric scores exceed thresholds. Use the Lighthouse user flow API to audit multi-page interactions beyond single page loads. For more consistent results, run each audit three to five times and average the scores, since individual runs can vary due to network conditions and CPU throttling behavior.

When to Use It?

Use Cases

Audit a production website for Core Web Vitals compliance before a search ranking update. Run automated accessibility checks in CI to prevent WCAG violations from reaching production. Establish quality baselines and track score trends across releases.

Important Notes

Requirements

Node.js with Lighthouse CLI or Chrome DevTools for running comprehensive web quality audits against target URLs. Chrome browser installation for headless audit execution in both local development and continuous integration environments. Network access to the target web application for loading pages and measuring real performance metrics under realistic conditions.

Usage Recommendations

Do: run audits on both mobile and desktop configurations since performance characteristics differ significantly. Address high-impact findings first since fixing large images or render-blocking scripts yields the biggest improvements. Track scores over time to measure the impact of optimization changes.

Don't: optimize solely for Lighthouse scores while ignoring real user metrics from field data. Run audits only once since scores vary between runs and averages provide more reliable baselines. Ignore accessibility findings since they affect real users and carry legal compliance implications.

Limitations

Lab-based audit scores may not match real user experience measured by field data from different devices and networks. Lighthouse cannot test all accessibility issues since many require manual verification with assistive technology and real user testing. Single-page audit results do not reflect quality across an entire multi-page application with varied content types and interaction patterns.