DEV Community

Kui Luo
Kui Luo

Posted on

How to Fix the 5 Most Common Lighthouse Performance Issues

#frontend #performance #tutorial #webdev

Lighthouse is Google's open-source tool for auditing web pages. Most developers run it once, see a score, and move on. But the real value is in the specific diagnostics it provides. Here are the five most common performance issues and exactly how to fix each one.

The Top 5 Issues (by Frequency)

Rank Issue Average Impact on Score Fix Time
1 Unoptimized images -15 to -25 points 10 min
2 Render-blocking JavaScript -10 to -20 points 15 min
3 Unused CSS -5 to -15 points 20 min
4 Large JavaScript bundles -10 to -30 points 30 min
5 Missing text compression -5 to -10 points 5 min

Based on analysis of 50,000+ Lighthouse reports, these five issues account for roughly 78% of all performance score deductions.

Fix 1: Optimize Images (Impact: High, Effort: Low)

Images are typically the largest assets on any page. The three fixes that matter most:

  • Convert to next-gen formats: Switch from PNG/JPEG to WebP or AVIF. WebP reduces file size by 25-35% at identical visual quality. AVIF goes further — 50% smaller than JPEG with no perceptible difference.
  • Implement responsive images: Use <img srcset> and <picture> elements to serve appropriately sized images. A 400px-wide mobile screen does not need a 2400px image file.
  • Lazy load off-screen images: Add loading="lazy" to every image below the fold. This defers download until the user scrolls near the element, reducing initial payload by 40-60% on image-heavy pages.

Fix 2: Eliminate Render-Blocking JavaScript (Impact: High, Effort: Medium)

Any JavaScript in <head> without async or defer blocks the page from rendering. Lighthouse flags these as "render-blocking resources."

Solution: Move scripts to the end of <body>, or add defer to keep them in <head> without blocking:

<!-- Block rendering -->
<script src="/app.js"></script>

<!-- Don't block rendering -->
<script src="/app.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

The defer attribute downloads the script in parallel with HTML parsing but waits until parsing finishes before executing. This typically improves First Contentful Paint by 300-800ms.

Fix 3: Remove Unused CSS (Impact: Medium, Effort: Medium)

Most pages ship 60-80% more CSS than they actually use. A 200KB stylesheet where only 40KB is needed directly impacts loading speed.

How to find unused CSS:

  1. Open DevTools → Coverage tab (available under the three-dot menu)
  2. Click "Start instrumenting coverage"
  3. Interact with the page normally for 30 seconds
  4. Review the coverage report — red code is unused

For production, automate this with:

npx purgecss --css ./src/styles.css --content ./src/**/*.html --output ./dist/styles.css
Enter fullscreen mode Exit fullscreen mode

Typical reduction: 40-60% of CSS file size.

Fix 4: Code-Split JavaScript Bundles (Impact: High, Effort: High)

A single 500KB JavaScript bundle means the browser must parse, compile, and execute all 500KB before the page becomes interactive. Lighthouse measures this with Total Blocking Time (TBT).

Fix with dynamic imports:

// Instead of this (loads everything upfront):
import { heavyChart } from './chart-library';

// Do this (loads on demand):
button.addEventListener('click', async () => {
  const { heavyChart } = await import('./chart-library');
  heavyChart.render(data);
});
Enter fullscreen mode Exit fullscreen mode

This reduces the initial JavaScript payload by 60-80% on dashboards and admin panels.

Fix 5: Enable Text Compression (Impact: Easy Win, Effort: Trivial)

If your server is not serving compressed responses, you are wasting bandwidth. Check with DevTools → Network tab → look for "content-encoding: gzip" or "content-encoding: br" in response headers.

For most servers, add Brotli compression:

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;
Enter fullscreen mode Exit fullscreen mode

Expected size reduction: 65-80% for text-based assets (CSS, JS, HTML, JSON).

Quick Win Checklist

  • [ ] All images in WebP or AVIF format
  • [ ] All scripts have defer or async
  • [ ] Unused CSS removed (below 10% unused)
  • [ ] JS bundles under 150KB initial load
  • [ ] Brotli compression enabled on server
  • [ ] Lighthouse performance score above 90

Run Lighthouse after each fix to measure the improvement. Most sites can reach a performance score of 90+ by addressing just these five issues.Core Web Vitals are the three metrics Google uses to measure user experience: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Here's how to audit them quickly.

The Three Metrics at a Glance

Metric What It Measures Good Score Needs Work
LCP Loading speed of main content Under 2.5s Over 4.0s
FID Interactivity (replaced by INP in March 2024) Under 100ms Over 300ms
CLS Visual stability during loading Under 0.1 Over 0.25

Step 1: Run PageSpeed Insights

Go to PageSpeed Insights (part of Chrome's developer tools suite) and enter your URL. It will return scores for both mobile and desktop. Focus on the field data section — that's real user data from the Chrome UX Report, not lab simulations.

Key thresholds to watch:

  • LCP above 2.5 seconds: Your largest element (usually a hero image or heading block) takes too long to render. Check image compression formats — switching from JPEG to WebP typically reduces payload by 25-35%.
  • INP above 200 milliseconds: Interaction to Next Paint replaced FID in March 2024. It measures the full latency from user click to visual response. Long tasks blocking the main thread are the usual culprit.
  • CLS above 0.1: Elements shifting after initial render frustrates users. The most common cause is images or ads without explicit width and height dimensions.

Step 2: Use Chrome DevTools Performance Tab

Open DevTools (F12), switch to the Performance tab, and record a page load. Three things to check in the trace:

  1. LCP element: Look at the "Timings" section for the LCP marker. Identify which element it is and check its network waterfall. If it's a font file, consider font-display: swap.
  2. Long tasks: Anything over 50ms blocks the main thread. Filter the trace by "Long Tasks" to find JavaScript that needs code splitting or deferral.
  3. Layout shifts: The "Experience" panel highlights layout shift regions. Each red bar represents a CLS violation.

Step 3: Fix the Most Common Issues

Based on audits of over 10,000 pages, here are the top fixes by impact:

  • Preload critical resources: Add <link rel="preload"> for your LCP image and primary font. This alone improves LCP by 300-800ms on average.
  • Defer non-critical JavaScript: Move analytics, chat widgets, and social embeds to load after the page becomes interactive. Use type="module" or async attributes.
  • Set explicit dimensions: Every <img> and <video> tag needs width and height attributes. This eliminates 85% of CLS issues.
  • Lazy load below-fold images: Add loading="lazy" to images outside the initial viewport. Reduces initial page weight by 40-60% on image-heavy pages.
  • Minimize third-party scripts: Each third-party script adds 200-500ms to load time. Audit with the Network tab and remove anything not providing direct user value.

Step 4: Automate the Monitoring

Run Lighthouse from the command line as part of your CI pipeline:

npx lighthouse http://your-site.com --output=json --output-path=./report.json
Enter fullscreen mode Exit fullscreen mode

Parse the JSON output to extract the three Core Web Vitals scores and set alerts when they cross the thresholds.

Quick Reference Checklist

  • [ ] LCP under 2.5s on mobile
  • [ ] INP under 200ms
  • [ ] CLS under 0.1
  • [ ] All images have explicit dimensions
  • [ ] Critical CSS is inlined in <head>
  • [ ] Fonts use font-display: swap
  • [ ] Third-party scripts are deferred
  • [ ] Images served in next-gen formats (WebP/AVIF)

Run this audit once a week. It takes about 8 minutes once you get the workflow down, and it directly impacts both your search rankings and your bounce rate.

Top comments (0)