How to improve page load time in Webflow and fix performance issues reported by Lighthouse such as render-blocking resources and unused JS?

Improving page load time in Webflow involves reducing unnecessary resource usage and optimizing how assets are delivered. Common issues like render-blocking resources and unused JavaScript reported by Lighthouse can be addressed with several Webflow-conscious techniques.

1. Minimize Unused JavaScript and CSS

• Delete unused interactions and animations that are no longer active on your site.
• Avoid installing multiple third-party embeds or widgets (e.g., chat services, analytics scripts) unless necessary.
• Remove unused classes, components, or symbols within the Webflow Designer to prevent extra code from being published.

2. Enable Asset Minification

• In Webflow’s Project Settings, go to the Publishing tab.
• Enable “Minify HTML,” “Minify CSS,” and “Minify JS.” This strips unnecessary whitespace and comments from the code.

3. Optimize Web Fonts

• Limit the number of fonts and weights you use (e.g., not Regular, Medium, SemiBold, Bold for the same font).
• Use system fonts where possible to improve load speed and avoid render-blocking Google Fonts.
• If you use custom fonts, upload locally in Webflow instead of linking to external CDNs.

4. Defer or Async Third-Party Scripts

• For custom embeds (like Google Analytics, chat widgets, or social integrations), manually add async or defer attributes in the Custom Code > Footer section of the page or site settings.
• This prevents these scripts from blocking page rendering.

5. Lazy Load Images and Videos

• Webflow automatically enables lazy loading on most images (loading="lazy"), but double-check by:
• Selecting an image → Settings Panel → Make sure “Lazy load” is enabled.
• For background images, consider converting them into inline elements with <img> tags if lazy loading is needed.

6. Reduce Large Media Files

• Compress images using tools like TinyPNG or Squoosh before uploading to Webflow.
• For videos, host externally (like YouTube or Vimeo) and use preview thumbnails to prevent initial load impact.
• Avoid autoplay videos in the hero section unless absolutely needed.

7. Minimize Use of CMS Collection Lists on Page Load

• Limit the number of CMS items displayed initially—use pagination or “Load More” buttons if necessary.
• Avoid nesting Collection Lists if possible, as they can drastically increase page weight and load time.

8. Avoid Heavy Custom JS Libraries

• If you’re importing full libraries (like full jQuery UI or GSAP bundles), consider using only the parts you need or removing them entirely.

9. Check for and Remove Render-Blocking Elements

• Lighthouse often flags external CSS (like Google Fonts) as render-blocking.
• Host critical CSS locally in Webflow or load secondary styles asynchronously using rel="preload" or media attributes in Custom Code.

10. Regularly Audit with Lighthouse

• Run Lighthouse reports frequently, especially after adding new features.
• Focus on core metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP) to guide improvements.

Summary

To improve performance in Webflow and fix Lighthouse issues like render-blocking resources and unused JS, focus on minimizing third-party scripts, optimizing image and font usage, enabling asset minification, and lazy loading media. Webflow provides direct controls for many of these optimizations, and Custom Code allows for further tuning. Regular performance audits help sustain speed gains.