Webflow sync, pageviews & more.
NEW

Is anyone experiencing difficulties improving their Pagespeed Insights score for Webflow sites, despite taking measures such as image compression and JS/CSS minification?

TL;DR
  • Defer or remove non-essential third-party scripts, optimize fonts (limit variants, use font-display: swap), and enable native lazy loading for all media.
  • Simplify DOM structure, analyze with Chrome DevTools, and understand Webflow’s built-in limitations to improve beyond standard optimizations.

Many Webflow users encounter challenges improving PageSpeed Insights scores, even after standard optimizations like image compression and minifying assets. This is often due to underlying factors specific to Webflow’s structure and hosting.

1. Understand Webflow's Limitations

  • Webflow automatically compresses images, minifies code, and uses CDN hosting through Fastly and Amazon CloudFront.
  • You don’t have direct control over server-side settings, critical CSS, or code-splitting, which limits deep performance tuning.
  • Some built-in scripts (like Webflow’s interactions.js) and third-party libraries affect Largest Contentful Paint (LCP) and Total Blocking Time (TBT).

2. Audit with Field vs Lab Data

  • Field Data in PageSpeed Insights reflects real-world user data and tends to be more stable.
  • Lab Data can appear artificially low due to simulated throttling and may not represent actual performance once your site is hosted.
  • Use WebPageTest.org or Lighthouse in Chrome DevTools for a more granular view.

3. Defer and Reduce Third-Party Scripts

  • Avoid embedding unnecessary external scripts (chat widgets, tracking tools, etc.) that slow initial load.
  • Use Google Tag Manager to better control and defer non-essential scripts.
  • In Webflow’s Custom Code areas, place scripts in the Footer to avoid render-blocking.

4. Lazy Load All Media

  • Webflow now supports native lazy loading via loading="lazy" for images.
  • Make sure all images, background videos, and iframes have lazy loading enabled either automatically or via custom attributes.

5. Optimize Fonts

  • Limit custom fonts to only used weights and styles.
  • Consider using system fonts or font-display: swap (added via Custom CSS) to reduce render delay.
  • If using Google Fonts, self-hosting via Custom Code may give more control.

6. Reduce DOM Size and Complexity

  • Excessively nested divs or large symbol structures can negatively impact LCP and CLS.
  • Simplify your Webflow layout by reducing wrappers, using combo classes wisely, and reusing components efficiently.

7. Use the Performance Panel

  • Preview the site in Chrome DevTools > Performance to analyze layout shifts, slow scripts, and rendering delays.
  • Focus on metrics like Time to Interactive (TTI) and First Contentful Paint (FCP).

Summary

Even with compressed images and minified code, PageSpeed Insights scores for Webflow sites may remain low due to built-in scripts, third-party tools, font usage, and layout complexity. Focus on lazy loading, script deferral, font optimization, and streamlined design to improve scores beyond basics.

Rate this answer

Other Webflow Questions