How can I improve my Webflow website speed? I've already optimized everything I can think of.

Community resources
1

Hi everyone,
I’m struggling with my Webflow site speed and could use help. I’ve already done the following:

  • Minified HTML, CSS, and JS via Webflow settings
  • Removed all unused styles, selectors, and interactions
  • Optimized all images (WebP format, compressed)
  • Avoided heavy layouts and animations
  • Cleaned up custom code

Despite all this, my site is still scoring low on PageSpeed (around 60 mobile / 75 desktop).
Is there any app, integration (like NitroPack for WordPress), or advanced optimization technique that actually works for Webflow?

Thanks in advance!

2

@Moiz_Zafar

If you haven’t already worked on the font optimization, please start with the steps below and give it a try.

Fonts Optimization Tips

Fonts can significantly affect your website’s load time. Follow these best practices to enhance performance:

  • Host Fonts Locally: Avoid using external services like Google Fonts or Adobe Fonts via embed codes. Instead, download and host fonts directly on your server.
  • Use font-display: swap: Ensures text remains visible during font loading, preventing the Flash of Invisible Text (FOIT).
  • Limit Font Variations: Stick to one or two fonts with minimal weights/styles to reduce load time.
  • Preload Critical Fonts: Add preload tags in the <head> section of your HTML for fonts used above the fold.
  • Trim Unused Unicode Characters: Use FontForge to remove unnecessary character sets and reduce file size.

Additionally, test your site performance and get optimization suggestions here: https://yellowlab.tools/

3

Hello @Moiz_Zafar , It sounds like you’ve already done a great job with optimizing the common areas like CSS, JS, images, and custom code—which is fantastic! However, if you’re still seeing low scores, there may be a few more advanced tweaks to help further improve performance, especially on mobile.

Here are some additional optimization techniques to improve performance:

Inline Critical CSS & Load Remaining Styles Asynchronously
Inlining critical CSS for above-the-fold content lets browsers render visible parts immediately without waiting for all CSS files to load.

  • Use online tools like criticalcss.com to generate critical CSS for your homepage.

  • Insert that CSS directly in a tag inside your site’s head embed code.

  • Load the rest of your stylesheets asynchronously with JavaScript.

Use JavaScript Libraries for Enhanced Lazy Loading

Even though Webflow has native lazy loading, adding libraries like lozad.js or LazySizes can give you more control and better results on media-heavy pages.

<img data-src="your-image.webp" class="lozad" alt="Description" />
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  const observer = lozad();
  observer.observe();
</script>

Defer Non-Critical JavaScript

  • Scripts from analytics, chat widgets, or third-party tools can delay page interactivity.

  • Add the defer attribute to script tags or load them after your main content is loaded. This ensures your site’s core content loads first.

Once applied, run another test using Google PageSpeed Insights to check the impact.

Alternatively, if still these optimization techniques do not work try Website Speedy app—a Webflow app that automates font optimization, JS/CSS minification, and lazy loading. to improve the site’s performance score or speed.

(Disclaimer: We are the developers of this app and happy to answer any questions.)