How to Fix a Low Lighthouse Score: A Practical Guide

Your Lighthouse Score Is Low. Now What?

You ran a Lighthouse audit and the numbers are not great. Maybe your Performance score is 38. Maybe SEO is showing 72 when you expected 95. Maybe the whole report is a sea of red and orange.

Take a breath. Low Lighthouse scores are fixable, and in most cases, you can make significant improvements in a few hours of work. The trick is knowing which issues have the biggest impact and fixing those first.

I have audited hundreds of sites and the same handful of problems account for the majority of low scores. Let me walk you through the most common culprits in each category and exactly how to fix them.

Fixing a Low Performance Score

Performance is the hardest score to improve and the one that matters most for user experience and rankings. Here are the issues I see most often, ordered by impact.

Unoptimized Images (The #1 Culprit)

I am not exaggerating when I say unoptimized images are responsible for more low Performance scores than any other single issue. I see this on probably 80% of sites I audit.

The problems:

JPEG and PNG files that could be WebP or AVIF (40-60% smaller)

Images that are 3000x2000 pixels but displayed at 300x200

No lazy loading on below-the-fold images

No explicit width and height attributes (causing layout shifts)

The fixes:

Convert images to WebP format. Every major browser supports it now.

Use responsive images with srcset to serve appropriate sizes

Add loading="lazy" to all images below the fold

Always specify width and height attributes in your img tags

Use a CDN with automatic image optimization (Cloudflare, Vercel, Imgix)

This single change can sometimes improve your Performance score by 20-30 points.

Too Much JavaScript

Modern websites ship way too much JavaScript. Every npm package, every analytics script, every chat widget adds to the bundle. Your users pay the price in loading time and interactivity delays.

How to diagnose: Look at the "Reduce unused JavaScript" opportunity in your Lighthouse report. Also check "Minimize main-thread work" and "Reduce JavaScript execution time."

The fixes:

Audit your dependencies. Do you really need that 200KB date formatting library? Native Intl.DateTimeFormat does the same thing.

Code-split your JavaScript. Load only what is needed for the current page.

Defer non-critical scripts. Analytics, chat widgets, and social embeds can load after the main content.

Remove unused code. Tree shaking helps, but manually auditing your imports helps more.

Consider lighter alternatives. Replace heavy libraries with smaller ones that do what you actually need.

Render-Blocking Resources

CSS and JavaScript files in the head of your document block the browser from rendering anything until they are downloaded and parsed.

The fixes:

Inline critical CSS (the CSS needed to render above-the-fold content)

Defer non-critical CSS with media attributes or dynamic loading

Add async or defer attributes to JavaScript tags

Move non-essential scripts to the end of the body

Largest Contentful Paint (LCP) Issues

LCP measures how long it takes for the biggest visible element to load. Usually this is a hero image, a heading, or a large text block.

If your LCP element is an image:

Preload it with a link rel="preload" tag

Serve it from a CDN

Use proper image formats and sizes

Do not lazy-load the LCP image (this is a common mistake)

If your LCP element is text:

Make sure fonts load quickly. Use font-display: swap.

Preload your primary web font

Consider using system fonts for the initial render

Layout Shifts (CLS)

CLS measures visual stability. Elements jumping around as the page loads is the most annoying user experience issue and it tanks your Lighthouse score.

Common causes and fixes:

Images without dimensions: Always set width and height on img tags

Ads and embeds loading late: Reserve space with CSS aspect-ratio or min-height

Web fonts causing text reflow: Use font-display: swap and preload fonts

Content injected by JavaScript: Avoid inserting content above existing content after page load

Dynamic banners or headers: Reserve the exact space they will need

Server Response Time

If your server takes more than 600ms to respond, everything downstream suffers. Lighthouse calls this "Reduce initial server response time."

The fixes:

Use a CDN to cache pages at the edge

Upgrade your hosting if you are on shared hosting

Optimize database queries if your pages are dynamically generated

Enable server-side caching for pages that do not change frequently

Consider static site generation for content pages

Fixing a Low SEO Score

SEO scores are usually the easiest to fix because most issues are simple HTML problems.

Missing or Poor Meta Tags

The most common SEO issues:

No meta description: Every page needs a unique meta description under 155 characters.

Title tag too long or missing: Keep titles under 60 characters and include your target keyword.

Missing viewport meta tag: Add meta name="viewport" content="width=device-width, initial-scale=1" to your head.

Missing lang attribute: Add lang="en" (or your language) to the html tag.

Missing Alt Text on Images

Every image should have descriptive alt text. Not just for SEO, but for accessibility. Screen readers depend on it, and Google uses it to understand image content.

Write alt text that describes what the image shows in context. "Screenshot of Lighthouse performance results showing a score of 95" is better than "image1" or "screenshot."

Links Are Not Crawlable

Lighthouse flags links that Google cannot follow. Common issues:

Links using JavaScript onclick handlers instead of href attributes

Links hidden behind JavaScript-rendered navigation

Links with href="#" or href="javascript:void(0)"

Use proper anchor tags with real URLs. If you need JavaScript behavior, add it on top of a working link.

Missing HTTPS

Your entire site should be HTTPS. Mixed content (HTTPS pages loading HTTP resources like images or scripts) also gets flagged. Check your browser console for mixed content warnings and update all resource URLs to HTTPS.

Fixing a Low Accessibility Score

Accessibility issues are not just about compliance. They affect real users and Google increasingly factors user experience into rankings.

Missing Form Labels

Every form input needs an associated label element. This is the most common accessibility issue I see:

Bad: input type="email" placeholder="Email"

Good: label for="email" followed by input id="email" type="email"

Insufficient Color Contrast

Text needs enough contrast against its background to be readable. Lighthouse checks against WCAG AA standards. Light gray text on a white background is a common offender.

Use a contrast checker tool. The minimum ratios are:

4.5:1 for normal text

3:1 for large text (18px+ or 14px+ bold)

Missing Document Language

Add lang="en" (or your language code) to the html tag. This tells screen readers which language to use for pronunciation.

Missing Alt Text (Again)

This shows up in both SEO and Accessibility categories because it matters for both. Every image needs alt text. Decorative images should have empty alt="" to tell screen readers to skip them.

Heading Order Issues

Headings should follow a logical order: H1, then H2, then H3. Do not skip levels (jumping from H1 to H3) and do not use headings purely for styling. Use CSS for visual sizing and keep the heading hierarchy meaningful.

Fixing a Low Best Practices Score

Best Practices issues are often security and modern web standards related.

Browser Errors in Console

JavaScript errors in the console tank your Best Practices score. Open your browser dev tools, load the page, and fix every error. Common culprits:

Undefined variables or missing imports

Failed API calls

Deprecated APIs

CORS issues with third-party resources

Insecure Resources

Loading resources over HTTP on an HTTPS page is a Best Practices flag. Update all resource URLs to HTTPS. This includes images, scripts, fonts, iframes, and API endpoints.

Missing HTTPS

Same as the SEO category. Get an SSL certificate (free from Let's Encrypt) and redirect all HTTP traffic to HTTPS.

Deprecated APIs

Using deprecated browser APIs gets flagged. Check the Lighthouse report for specific APIs and find modern alternatives. Common examples:

document.write() — use DOM manipulation instead

Synchronous XMLHttpRequest — use fetch() or async XHR

Application Cache — use Service Workers instead

Missing CSP (Content Security Policy)

Adding a Content-Security-Policy header tells the browser which resources are allowed to load. This is a security best practice that also improves your score.

Start with a report-only policy to avoid breaking things, then tighten it up once you know what your site needs.

The Priority Order for Fixing Lighthouse Scores

If everything is broken and you are overwhelmed, fix things in this order:

Images: Optimize, compress, add dimensions, lazy load. Biggest bang for the buck.

JavaScript: Remove unused code, defer non-critical scripts, code-split.

Meta tags: Title, description, viewport, lang attribute. Quick wins for SEO.

HTTPS: Get your SSL certificate sorted out if you have not already.

Alt text and labels: Fix accessibility issues. Usually quick to implement.

Core Web Vitals: LCP, CLS, INP. Tackle these once the big issues are resolved.

Console errors: Clean up JavaScript errors for Best Practices.

Advanced optimizations: Font loading, critical CSS, server response time.

How to Monitor Progress

After making fixes, do not just run one audit and call it done. Lighthouse scores can vary between runs due to network conditions and server load.

Run each page at least 3 times and average the scores. Better yet, use BulkAudit to test multiple pages at once so you can see your overall site health, not just individual pages.

Set up a monthly audit schedule. Performance can degrade over time as you add content, install plugins, and make changes. Catching regressions early prevents small issues from becoming big problems.