How to Audit and Fix Webflow Performance with Lighthouse

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to audit and fix your Webflow site’s performance with Lighthouse.

1. Run a Lighthouse audit

Open Chrome DevTools (F12) > the Lighthouse tab. Select Mobile, check Performance, and click Analyze page load. Always use Mobile first — that’s the score Google uses. Close all other tabs to avoid interference.

2. Read the report in priority order

Lighthouse ranks opportunities by estimated impact in seconds. Start with the items marked in red with a gain > 0.5s. Orange items matter, but they come second. Green items are nice bonuses.

3. Fix the most common Webflow issues

• Reduce unused JavaScript: remove unnecessary third-party scripts or defer them via GTM
• Properly size images: make sure your images aren’t wider than their container
• Eliminate render-blocking resources: switch your scripts to defer or async
• Serve images in next-gen formats: Webflow handles WebP automatically, so make sure it’s enabled

4. Measure real-world performance with CrUX

Lighthouse measures in lab conditions, which are simulated. For real-world data, use PageSpeed Insights, which shows Chrome User Experience Report (CrUX) data based on real users. The two metrics can differ significantly.

Conclusion

Lighthouse is the starting point for any performance audit. Use cases:

• Monthly audit of your key pages
• Validation before publishing a redesign
• Before-and-after optimization benchmark