Lighthouse Scores

Lighthouse is an automated tool for auditing web quality. It provides scores across four categories: Performance, Accessibility, Best Practices, and SEO.

Score Calculation

Lighthouse scores are calculated on a 0-100 scale:

90-100 (Green): Good
50-89 (Orange): Needs improvement
0-49 (Red): Poor

Target Scores by Category

Category	Target Score	Priority
Performance	≥ 90	High
Accessibility	100	Critical
Best Practices	≥ 95	High
SEO	≥ 95	High

Performance Score

Weighting (Lighthouse 10+)

Performance score is a weighted average of metric scores:

Metric	Weight	Good Threshold
First Contentful Paint (FCP)	10%	≤ 1.8s
Speed Index	10%	≤ 3.4s
Largest Contentful Paint (LCP)	25%	≤ 2.5s
Total Blocking Time (TBT)	30%	≤ 200ms
Cumulative Layout Shift (CLS)	25%	≤ 0.1

Key Performance Audits

Core Web Vitals (Critical):

LCP < 2.5s
TBT < 200ms (proxy for INP in lab)
CLS < 0.1

Resource Optimization:

Minimize main-thread work
Reduce JavaScript execution time
Eliminate render-blocking resources
Properly size images
Serve images in next-gen formats (WebP, AVIF)
Enable text compression (Gzip, Brotli)
Use efficient cache policy

Loading Strategy:

Preconnect to required origins
Preload key requests
Avoid enormous network payloads
Use HTTP/2 or HTTP/3
Minimize critical request depth

Accessibility Score

Score Calculation

Accessibility score is based on passing automated WCAG 2.1 checks. Each failing audit impacts the score based on severity.

Critical Audits (Highest Impact)

Image alt text - All images must have alt attributes
Form labels - All input elements must have associated labels
Color contrast - Text must meet minimum 4.5:1 contrast ratio
Valid ARIA - ARIA attributes must be valid and used correctly
Keyboard navigation - All interactive elements must be keyboard accessible
Focus indicators - Focusable elements must have visible focus state

Major Audits

Page language (<html lang>)
Heading hierarchy (logical structure)
Link text (descriptive, not “click here”)
Valid HTML (no duplicate IDs)
Landmark regions (header, nav, main, footer)
Skip links for keyboard users

Minor Audits

Meta viewport allows zoom
Document title exists and is descriptive
List items properly structured
Definition lists properly structured

Target: 100 (perfect score)

Best Practices Score

Score Calculation

Best Practices audits are binary (pass/fail). Each failing audit reduces the score.

Critical Audits

Security:

Uses HTTPS
No mixed content (HTTP resources on HTTPS page)
No vulnerable JavaScript libraries
CSP prevents XSS attacks
No geolocation on page load
No notification on page load

Browser Compatibility:

Uses passive listeners for scroll/touch
No document.write()
No deprecated APIs
Valid doctype
Charset declared
Images have correct aspect ratio

Code Quality:

No browser errors in console
No issues fetching web app manifest
No errors in console logged
Source maps not exposed in production

Passing Criteria

All security headers present
No vulnerable dependencies
Modern JavaScript APIs used
No deprecated patterns
Clean console (no errors)

Target: ≥ 95

SEO Score

Score Calculation

SEO audits check for technical SEO requirements. Like Best Practices, these are mostly binary checks.

Critical Audits

Crawlability:

Valid robots.txt
Page is indexable (no noindex meta tag)
Document has valid rel=canonical
robots.txt doesn’t block important resources

On-Page SEO:

Document has a title tag
Document has a meta description
Page has successful HTTP status code
Links have descriptive text
Heading elements in sequentially-descending order

Mobile:

Has a viewport meta tag with width or initial-scale
Document uses legible font sizes (≥ 16px)
Tap targets are sized appropriately (≥ 48x48px)

Technical:

Document has valid hreflang (if applicable)
Structured data is valid (if present)
Links are crawlable (not JavaScript-only)

Passing Criteria

All technical SEO basics covered
Mobile-friendly design
Proper meta tags and titles
Crawlable navigation
Valid structured data

Target: ≥ 95

Lighthouse Modes

Analyzes a fresh page load. Used for:

Core Web Vitals assessment
Initial load performance
Full audit across all categories

Timespan

Measures metrics over a period of user interaction. Used for:

INP measurement
CLS during scrolling
Runtime performance

Snapshot

Analyzes page in current state. Used for:

Accessibility audit on specific state
SEO audit
Best Practices check

Running Lighthouse

Chrome DevTools

Open DevTools (F12)
Go to Lighthouse tab
Select categories to audit
Click “Analyze page load”

Lighthouse CLI

# Install globally
npm install -g lighthouse

# Run audit
lighthouse https://example.com

# Generate HTML report
lighthouse https://example.com --output html --output-path report.html

# Performance only
lighthouse https://example.com --only-categories=performance

# Mobile emulation
lighthouse https://example.com --preset=mobile

# Desktop
lighthouse https://example.com --preset=desktop

CI/CD Integration

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['https://example.com'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['error', { minScore: 0.95 }],
        'categories:seo': ['error', { minScore: 0.95 }],
      },
    },
  },
};

# Run in CI
npx @lhci/[email protected] autorun

Understanding Score Variations

Lab vs Field Data

Lab Data (Lighthouse):

Controlled environment
Consistent network/CPU throttling
Single device profile
Good for debugging

Field Data (CrUX):

Real user measurements
Various devices and networks
75th percentile reported
True user experience

Score Variability

Scores can vary due to:

Network conditions
CPU performance
Browser extensions
Background processes
Cache state
Server response times

Best Practice: Run multiple audits and average the results.

Improving Your Scores

Performance

Optimize Core Web Vitals first (75% of score)
Implement code splitting
Optimize images (WebP, lazy loading)
Minimize JavaScript execution time
Use efficient caching strategies

Accessibility

Add alt text to all images
Ensure proper color contrast
Add labels to all form inputs
Implement keyboard navigation
Use semantic HTML

Best Practices

Enable HTTPS everywhere
Update vulnerable dependencies
Add security headers (CSP, HSTS)
Remove console errors
Use modern JavaScript APIs

SEO

Add unique title tags and meta descriptions
Implement mobile-responsive design
Create XML sitemap
Add structured data (JSON-LD)
Ensure crawlability

Metrics

Standards

Resources

​Lighthouse Scores

​Score Calculation

​Target Scores by Category

​Performance Score

​Weighting (Lighthouse 10+)

​Key Performance Audits

​Accessibility Score

​Score Calculation

​Critical Audits (Highest Impact)

​Major Audits

​Minor Audits

​Best Practices Score

​Score Calculation

​Critical Audits

​Passing Criteria

​SEO Score

​Score Calculation

​Critical Audits

​Passing Criteria

​Lighthouse Modes

​Navigation (Default)

​Timespan

​Snapshot

​Running Lighthouse

​Chrome DevTools

​Lighthouse CLI

​CI/CD Integration

​Understanding Score Variations

​Lab vs Field Data

​Score Variability

​Improving Your Scores

​Performance

​Accessibility

​Best Practices

​SEO

​Additional Resources

Build docs developers (and LLMs) love

Lighthouse Scores

Score Calculation

Target Scores by Category

Performance Score

Weighting (Lighthouse 10+)

Key Performance Audits

Accessibility Score

Score Calculation

Critical Audits (Highest Impact)

Major Audits

Minor Audits

Best Practices Score

Score Calculation

Critical Audits

Passing Criteria

SEO Score

Score Calculation

Critical Audits

Passing Criteria

Lighthouse Modes

Navigation (Default)

Timespan

Snapshot

Running Lighthouse

Chrome DevTools

Lighthouse CLI

CI/CD Integration

Understanding Score Variations

Lab vs Field Data

Score Variability

Improving Your Scores

Performance

Accessibility

Best Practices

SEO

Additional Resources