How to Improve Your Chrome Lighthouse Score: A Practical Guide for Developers

Improving your Chrome Lighthouse score directly impacts user experience, search rankings, and conversion rates. This guide covers actionable strategies across all Lighthouse categories—Performance, Accessibility, Best Practices, and SEO—with practical code examples you can implement today.

Understanding Lighthouse Metrics

Lighthouse analyzes your page across five categories, each scored from 0 to 100. The metrics within Performance deserve special attention because they directly affect how users perceive your site.

Key Performance Metrics

First Contentful Paint (FCP) measures when the first text or image becomes visible. Largest Contentful Paint (LCP) tracks when the largest content element renders. Cumulative Layout Shift (CLS) quantifies visual stability. Total Blocking Time (TBT) measures how long the main thread is blocked during page load.

A score above 90 is considered good. Below 50 indicates serious performance issues requiring immediate attention.

Optimizing Performance

Image Optimization

Images typically account for the largest portion of page weight. Start by converting images to modern formats and implementing lazy loading.

<!-- Use modern formats with fallbacks -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy" width="800" height="600">
</picture>

The loading="lazy" attribute defers loading below-the-fold images until users scroll near them. Always specify width and height attributes to prevent layout shifts.

Code Splitting and Bundle Optimization

Modern JavaScript bundlers like Vite and Webpack support automatic code splitting. Configure your build to separate vendor code from application code:

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'moment']
        }
      }
    }
  }
}

Critical CSS and Inline Styles

Eliminate render-blocking CSS by inlining critical styles and deferring non-critical CSS:

<head>
  <style>
    /* Critical CSS only */
    header { background: #fff; }
    .hero { min-height: 100vh; }
  </style>
  <link rel="preload" href="styles.css" as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

JavaScript Optimization

Defer non-critical JavaScript and use the defer or async attributes appropriately:

<!-- defer: executes after HTML parsing, in order -->
<script src="app.js" defer></script>

<!-- async: executes as soon as available, order not guaranteed -->
<script src="analytics.js" async></script>

Avoid large inline scripts. Move third-party scripts (analytics, chatbots, ads) to web workers using Partytown or similar solutions:

<script>
  partytown = {
    forward: ['dataLayer.push']
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/partytown/partytown.js"></script>

Improving Accessibility

Accessibility improvements often provide immediate Lighthouse score gains.

Semantic HTML

Use proper semantic elements instead of generic <div> tags:

<!-- Instead of div soup -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- Use semantic elements -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

ARIA Labels and Attributes

Add proper ARIA labels for interactive elements:

<button aria-label="Close menu" onclick="closeMenu()">
  <span aria-hidden="true">&times;</span>
</button>

<input 
  type="email" 
  id="email"
  aria-describedby="email-hint"
  required
>
<p id="email-hint">We'll never share your email.</p>

Color Contrast

Ensure text meets WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text):

/* Good contrast */
body {
  color: #333;  /* #333 on white passes */
  background: #fff;
}

/* Use tools like WebAIM or Chrome DevTools to verify */

Best Practices and SEO

Security Headers

Implement essential security headers:

// Express.js example
app.use((req, res, next) => {
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  res.setHeader('Content-Security-Policy', "default-src 'self'");
  next();
});

Meta Tags

Include complete meta information:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Your description here - 150-160 characters">
  <title>Page Title | Site Name</title>
  <link rel="canonical" href="https://example.com/page/">
</head>

HTTPS and HTTP/2

Serve everything over HTTPS and enable HTTP/2 for multiplexing:

# nginx.conf
server {
    listen 443 ssl http2;
    server_name example.com;
    
    ssl_certificate /etc/ssl/cert.pem;
    ssl_certificate_key /etc/ssl/key.pem;
    
    # Enable HTTP/2 push for critical resources
    http2_push /styles.css;
    http2_push /critical.js;
}

Continuous Monitoring

Set up automated Lighthouse testing in your CI/CD pipeline:

# GitHub Actions example
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v9
  with:
    urls: |
      https://example.com
      https://example.com/about
    budgetPath: ./lighthouse-budget.json

Create a budget file to enforce performance thresholds:

{
  "budgets": [
    {
      "resourceSizes": [
        { "resourceType": "script", "budget": 100 },
        { "resourceType": "image", "budget": 200 }
      ],
      "resourceCounts": [
        { "resourceType": "third-party", "budget": 10 }
      ]
    }
  ]
}

Quick Wins Checklist

Enable text compression (gzip or Brotli)
Set appropriate cache headers
Remove unused JavaScript and CSS
Preconnect to critical third-party domains
Use system fonts or subset web fonts
Implement a service worker for caching
Optimize third-party script loading
Add missing alt text to images
Ensure HTML is valid and well-formed
Test on real mobile devices, not just emulators

Measuring Results

Run Lighthouse from Chrome DevTools (Ctrl+Shift+I or Cmd+Option+I), navigate to the Lighthouse tab, select categories, choose Mobile or Desktop, and click “Analyze page load.”

For continuous monitoring, use PageSpeed Insights for ad-hoc checks, Lighthouse CI for automated testing, or web-vitals library for real-user monitoring:

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics({name, delta, id}) {
  console.log(name, delta, id);
  // Send to your analytics service
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Improving your Lighthouse score requires ongoing effort. Focus on the biggest impact areas first—typically image optimization, JavaScript reduction, and third-party script management. Small improvements compound over time, leading to better user experiences and improved search visibility.

Built by theluckystrike — More at zovo.one