Recommended Tools

A comprehensive list of tools for auditing, testing, and optimizing web quality across performance, accessibility, SEO, and best practices.

Performance Testing

Lighthouse

What it does: Automated audits for performance, accessibility, SEO, and best practices. Installation:

# CLI
npm install -g lighthouse

# Usage
lighthouse https://example.com
lighthouse https://example.com --output html --output-path report.html
lighthouse https://example.com --only-categories=performance

Browser: Built into Chrome DevTools (F12 → Lighthouse tab) URL: https://developer.chrome.com/docs/lighthouse/

WebPageTest

What it does: Detailed performance analysis with waterfall charts, filmstrip view, and comparison tools. Features:

Test from multiple global locations
Test on real devices
Connection throttling
Video comparison
Advanced metrics

URL: https://www.webpagetest.org/ Usage: Paste URL, select location and device, run test

Chrome DevTools

What it does: Built-in browser tools for performance profiling and debugging. Key Panels:

Performance: Record and analyze runtime performance
Network: Monitor resource loading
Coverage: Find unused CSS/JS
Lighthouse: Run audits
Performance Insights: Visual timeline analysis

Access: Press F12 or right-click → Inspect

PageSpeed Insights

What it does: Analyzes both lab and field data (Core Web Vitals from real users). Features:

Real user metrics from Chrome User Experience Report (CrUX)
Lighthouse lab data
Field data at 75th percentile
Improvement suggestions

URL: https://pagespeed.web.dev/

web-vitals Library

What it does: JavaScript library for measuring Core Web Vitals in the field. Installation:

npm install web-vitals

Usage:

import {onLCP, onINP, onCLS, onFCP, onTTFB} from 'web-vitals';

function sendToAnalytics({name, value, rating, id}) {
  // Send to your analytics service
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: id,
    non_interaction: true,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

URL: https://github.com/GoogleChrome/web-vitals

Webpack Bundle Analyzer

What it does: Visualizes bundle size and composition. Installation:

npm install --save-dev webpack-bundle-analyzer

Configuration:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

URL: https://github.com/webpack-contrib/webpack-bundle-analyzer

bundlesize

What it does: Enforces performance budgets in CI/CD. Installation:

npm install --save-dev bundlesize

Configuration (package.json):

{
  "bundlesize": [
    {
      "path": "./dist/js/*.js",
      "maxSize": "300 KB"
    },
    {
      "path": "./dist/css/*.css",
      "maxSize": "100 KB"
    }
  ]
}

URL: https://github.com/siddharthkp/bundlesize

Accessibility Testing

axe DevTools

What it does: Automated accessibility testing browser extension. Installation: Install browser extension for Chrome, Firefox, or Edge Features:

Scans for WCAG violations
Highlights issues in page
Provides fix recommendations
Intelligent guided testing

CLI:

npm install @axe-core/cli -g
axe https://example.com

URL: https://www.deque.com/axe/

WAVE

What it does: Web accessibility evaluation tool. Features:

Visual representation of issues
Detailed error/warning descriptions
Color contrast testing
ARIA validation

URL: https://wave.webaim.org/ Browser Extension: Available for Chrome and Firefox

What it does: Free screen reader for Windows. Usage:

Test keyboard navigation
Verify accessible names
Check reading order
Validate ARIA

Download: https://www.nvaccess.org/ Key Commands:

Start/Stop: Ctrl + Alt + N
Next item: ↓
Previous item: ↑
Activate: Enter

What it does: Built-in screen reader for macOS and iOS. Access: ⌘ + F5 (Mac) or Settings → Accessibility (iOS) Key Commands:

VO (Control + Option) + →: Next item
VO + ←: Previous item
VO + Space: Activate
VO + U: Rotor (headings, links, etc.)

URL: https://support.apple.com/guide/voiceover/

Colour Contrast Analyser

What it does: Tests color contrast ratios for WCAG compliance. Features:

Real-time contrast checking
WCAG AA/AAA pass/fail
Color picker
Simulation of color blindness

Download: https://www.tpgi.com/color-contrast-checker/

Accessibility Insights

What it does: Automated and manual accessibility testing. Features:

FastPass (automated checks)
Assessment (guided manual tests)
Tab stops visualization
Heading structure
Landmark regions

Download: https://accessibilityinsights.io/

SEO Tools

Google Search Console

What it does: Monitors site performance in Google Search. Features:

Index coverage reports
Core Web Vitals data
Search query analytics
Sitemap submission
Mobile usability issues
Rich results status

URL: https://search.google.com/search-console

Google Rich Results Test

What it does: Validates structured data markup. Features:

Test any URL or code snippet
Shows rich result preview
Identifies errors and warnings
Supports all schema types

URL: https://search.google.com/test/rich-results

Schema.org Validator

What it does: Validates structured data against Schema.org specification. URL: https://validator.schema.org/ Usage: Paste URL, code, or upload file

Screaming Frog SEO Spider

What it does: Website crawler for technical SEO audits. Features:

Crawl up to 500 URLs (free)
Find broken links
Analyze page titles and meta
Generate XML sitemaps
Discover duplicate content

Download: https://www.screamingfrog.co.uk/seo-spider/

Best Practices & Security

npm audit

What it does: Checks for known vulnerabilities in dependencies. Usage:

# Check for vulnerabilities
npm audit

# Auto-fix when possible
npm audit fix

# Check specific severity
npm audit --audit-level=moderate

SecurityHeaders.com

What it does: Analyzes HTTP security headers. Features:

Checks for missing headers
Provides security score (A-F)
Explains each header
Recommends improvements

URL: https://securityheaders.com/

Mozilla Observatory

What it does: Comprehensive security and configuration scanner. Features:

Security headers
TLS configuration
Cross-origin security
Content security policy
Third-party security

URL: https://observatory.mozilla.org/

W3C Markup Validator

What it does: Validates HTML markup. URL: https://validator.w3.org/ Usage: Enter URL, upload file, or paste HTML

W3C CSS Validator

What it does: Validates CSS stylesheets. URL: https://jigsaw.w3.org/css-validator/

CI/CD Integration

Lighthouse CI

What it does: Runs Lighthouse in CI/CD pipelines. Installation:

npm install -g @lhci/cli

Configuration (lighthouserc.js):

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
      },
    },
  },
};

URL: https://github.com/GoogleChrome/lighthouse-ci

Pa11y

What it does: Automated accessibility testing for CI. Installation:

npm install -g pa11y

Usage:

pa11y https://example.com
pa11y --standard WCAG2AA https://example.com

URL: https://pa11y.org/

Monitoring & Analytics

Google Analytics 4

What it does: Web analytics with Custom Events for Web Vitals. Setup Web Vitals tracking:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToGoogleAnalytics({name, value, rating}) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: rating,
  });
}

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

URL: https://analytics.google.com/

SpeedCurve

What it does: Performance monitoring with real user data. Features:

Synthetic and RUM (Real User Monitoring)
Performance budgets
Competitive benchmarking
Custom dashboards

URL: https://www.speedcurve.com/

Calibre

What it does: Performance monitoring with regression detection. URL: https://calibreapp.com/

Image Optimization

Squoosh

What it does: Image compression and format conversion. Features:

Convert to WebP, AVIF
Adjust quality settings
Compare before/after
CLI available

URL: https://squoosh.app/ CLI:

npm install -g @squoosh/cli
squoosh-cli --webp auto image.jpg

ImageOptim

What it does: Lossless image compression for Mac. Download: https://imageoptim.com/

Font Optimization

subfont

What it does: Automatically subsets web fonts. Installation:

npm install -g subfont

Usage:

subfont index.html -i

URL: https://github.com/Munter/subfont

glyphhanger

What it does: Analyzes font usage and generates subsets. Installation:

npm install -g glyphhanger

Usage:

glyphhanger https://example.com
glyphhanger --subset=font.ttf --formats=woff2

URL: https://github.com/zachleat/glyphhanger

Additional Resources

Chrome DevTools Documentation
web.dev - Learn modern web development
MDN Web Docs - Web standards documentation
Can I Use - Browser support tables

Metrics

Standards

Resources

​Recommended Tools

​Performance Testing

​Lighthouse

​WebPageTest

​Chrome DevTools

​PageSpeed Insights

​web-vitals Library

​Webpack Bundle Analyzer

​bundlesize

​Accessibility Testing

​axe DevTools

​WAVE

​NVDA (Screen Reader)

​VoiceOver (Screen Reader)

​Colour Contrast Analyser

​Accessibility Insights

​SEO Tools

​Google Search Console

​Google Rich Results Test

​Schema.org Validator

​Screaming Frog SEO Spider

​Best Practices & Security

​npm audit

​SecurityHeaders.com

​Mozilla Observatory

​W3C Markup Validator

​W3C CSS Validator

​CI/CD Integration

​Lighthouse CI

​Pa11y

​Monitoring & Analytics

​Google Analytics 4

​SpeedCurve

​Calibre

​Image Optimization

​Squoosh

​ImageOptim

​Font Optimization

​subfont

​glyphhanger

​Additional Resources

Build docs developers (and LLMs) love

Recommended Tools

Performance Testing

Lighthouse

WebPageTest

Chrome DevTools

PageSpeed Insights

web-vitals Library

Webpack Bundle Analyzer

bundlesize

Accessibility Testing

axe DevTools

WAVE

NVDA (Screen Reader)

VoiceOver (Screen Reader)

Colour Contrast Analyser

Accessibility Insights

SEO Tools

Google Search Console

Google Rich Results Test

Schema.org Validator

Screaming Frog SEO Spider

Best Practices & Security

npm audit

SecurityHeaders.com

Mozilla Observatory

W3C Markup Validator

W3C CSS Validator

CI/CD Integration

Lighthouse CI

Pa11y

Monitoring & Analytics

Google Analytics 4

SpeedCurve

Calibre

Image Optimization

Squoosh

ImageOptim

Font Optimization

subfont

glyphhanger

Additional Resources