How do I improve Lighthouse scores?
Last checked 31 Aug 2026
Short answer
Run Lighthouse to find your worst-scoring category, fix the top 2-3 flagged issues (usually images, unused JavaScript, or render-blocking resources), and re-run it to confirm before moving on.
Run the report
Use Chrome DevTools → Lighthouse, or pagespeed.web.dev, on both mobile and desktop — scores often differ significantly between them.
What the categories mean
- Performance: load speed and responsiveness — usually the score people mean by "Lighthouse score".
- Accessibility: contrast, labelling, keyboard navigation.
- Best Practices: security headers, console errors, image aspect ratios.
- SEO: meta tags, crawlability, mobile-friendliness.
Fixing the Performance score
Lighthouse lists specific "opportunities" ranked by estimated impact. Common ones in Lovable apps:
- Properly size and compress images — usually the single biggest win.
- Eliminate render-blocking resources — defer non-critical scripts/styles.
- Reduce unused JavaScript — remove dead code or unused libraries.
- Minimise main-thread work — often caused by heavy client-side logic running on load.
Prompting Lovable
Lighthouse flags [paste the specific opportunities listed]. Fix these starting with the highest estimated impact, and don't touch anything else.
What usually goes wrong
- Chasing a perfect 100 instead of meaningful real-world speed — diminishing returns set in fast after the big wins.
- Fixing Accessibility or SEO issues while ignoring Performance, when Performance is usually what "slow site" complaints are actually about.
- Not re-running Lighthouse after each fix, so you can't tell which change actually helped.
- Testing only on desktop — mobile scores are usually much lower and matter more for real visitors.
See /questions/how-do-i-improve-core-web-vitals for the metrics Lighthouse's performance score is built from.
Sources
Was this answer helpful?
Related questions
- AnswerWhy is my database making so many requests?Usually a component is re-fetching data on every render, a page is running the same query multiple times, or you're fetching entire tables instead of what's actually needed — ask Lovable to audit data-fetching patterns.
- AnswerHow do I lazy-load images?Ask Lovable to add native lazy-loading to images below the fold while keeping the hero/first-visible image loading eagerly, so visitors aren't downloading offscreen images before they're needed.
- AnswerHow do I remove unused code?Ask Lovable to search for unused components, imports and dependencies, or run a tool like ts-prune/depcheck via the terminal, then remove what's confirmed unused and re-test.
- AnswerHow do I reduce unnecessary database calls?Fetch only what a page needs, cache results, batch requests, and let Postgres do filtering instead of pulling whole tables into the client.