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

To optimize page load speed in Webflow and address Lighthouse issues like render-blocking resources and unused JavaScript, you'll need to focus on efficient asset management and minimal third-party interference.

1. Minimize and Defer Unused JavaScript

• Remove unused libraries (like jQuery) if your custom code or design doesn’t require them—go to Project Settings > Custom Code and uncheck jQuery under the “Advanced” tab.
• Eliminate unused third-party scripts or load them only when necessary.
• For custom scripts, use async or defer attributes in embeds to avoid render-blocking behavior.
• Avoid embedding large external JS libraries unless essential.

2. Optimize Fonts and Typography Settings

• Use only necessary font weights and styles—extra weights increase load time.
• Host fonts via Webflow’s built-in font system or locally, and avoid loading them via external services if unnecessary.
• Enable Font Display: Swap in custom code to prevent text from being invisible during load.

3. Remove Render-Blocking CSS and JS

• Avoid embedding critical CSS or large style blocks in the .
• If using custom code, move non-critical CSS and JavaScript to the footer using Webflow's Before tag section in Page Settings.
• For embedded third-party widgets or integrations, defer their loading until user interaction or after page load.

4. Reduce Third-Party Scripts

• Audit unused trackers, chat widgets, or embeds (e.g., Hotjar, Intercom, YouTube iframes).
• Defer or lazy-load these scripts using platforms like Google Tag Manager or by adding loading="lazy" and async where allowed.

5. Use Webflow’s Asset Optimizations

• Webflow automatically compresses images and minifies code; enable these under Project Settings > Hosting:
• Check Minify HTML, CSS, and JavaScript.
• Use WebP images where possible for better compression.
• Replace GIFs with lightweight Lottie animations.

6. Enable Lazy Loading for Images

• Webflow enables native lazy loading by default for images; ensure advanced embeds (like <img> in custom HTML) use loading="lazy".

7. Leverage the Webflow CMS Correctly

• Avoid unnecessary CMS references on pages—extra bindings can inflate page weight.
• Limit the number of CMS-generated content blocks rendered per page (e.g., limit Collection Lists to a specific number of items).

8. Controlled Use of Interactions and Animations

• Avoid overly complex page-load animations or multiple continuous interactions.
• Minimize use of scrolling animations that rely on continuous JavaScript computations.

Summary

To fix Lighthouse-reported issues like render-blocking resources and unused JS, streamline your Webflow site by removing unnecessary scripts, deferring custom code, limiting external dependencies, and optimizing fonts and images. Using built-in Webflow performance settings combined with selective customization will significantly improve load times.