Webflow generates clean code but there are still several things that can drag your PageSpeed score down. Here's how to optimize a Webflow site for speed.
Webflow generates cleaner HTML and CSS than most page builders, which gives you a head start on performance. But there are still several common issues that drag scores down, especially around images, fonts, and third-party scripts.
Here's how to get the most out of your Webflow site's PageSpeed score.
Before getting into fixes, it's worth knowing what Webflow handles for you:
These give Webflow sites a solid baseline. Most Webflow sites score in the 70-85 range without any optimization. With deliberate effort, 90+ is achievable.
Even with automatic WebP conversion, Webflow serves whatever resolution image you upload. If you upload a 4000x3000 photo for a 600px thumbnail, you're serving a massive file.
Fix: Resize images before uploading. Match the image dimensions to their largest displayed size. For a hero image that displays at 1400px wide, upload at 1400px wide, not 4000px.
Use Squoosh or TinyPNG to compress before uploading. Target under 100KB for hero images, under 30KB for thumbnails.
Webflow lazy-loads images by default, which is good for most images. But your hero image (the LCP element) should load immediately, not lazily.
Fix: Select your hero image in the Webflow designer, open the element settings, and uncheck "Lazy load." This removes the loading="lazy" attribute from your LCP image.
Webflow's font picker defaults to Google Fonts, which adds an external request and can delay text rendering.
Fix: Upload fonts directly to Webflow using custom fonts. Download your Google Font files (WOFF2 format), upload them in Project Settings > Fonts, and use font-display: swap in your custom code.
Alternatively, use system fonts for body text. They load instantly with zero external requests.
This is the most common cause of poor TBT scores in Webflow sites. Analytics, chat widgets, heat map tools, and marketing automation scripts all run on the main thread.
Fix: Add scripts through Project Settings > Custom Code > Footer Code rather than the head. Scripts in the footer load after the page content, reducing their impact on your scores.
For Google Analytics, consider switching to Umami or Plausible. They're under 2KB and have near-zero performance impact.
Webflow's interactions and animations feature is powerful but can add significant JavaScript weight. Complex scroll-triggered animations across many elements create long tasks that drive up TBT.
Fix: Audit your interactions. Remove animations that aren't adding clear value. Use CSS transitions instead of Webflow interactions where possible, as CSS animations run off the main thread.
Many Webflow users add jQuery plugins, sliders, and other libraries through the custom code section without realizing the performance impact.
Fix: Audit your custom code sections (both page-level and site-level). Remove libraries you no longer use. Replace jQuery-dependent features with vanilla JavaScript alternatives.
In Project Settings > SEO:
In Project Settings > General:
In the Designer for each image:
Webflow's built-in CDN via Fastly is good, but you can add Cloudflare in front for additional caching and performance:
This typically reduces TTFB by 50-150ms and improves scores by 3-8 points.
| Setup | Realistic Score | |---|---| | Optimized images, minimal scripts | 85-95 | | Default settings, good images | 70-80 | | Heavy animations + third-party scripts | 50-70 | | E-commerce with many products | 60-75 |
Webflow is one of the easier platforms to optimize because you're working with clean, predictable output. The biggest wins almost always come from image optimization and script management.
Test your Webflow site to see your current score and identify the specific issues holding you back.
How fast is your site?
Get your PageSpeed score in seconds — free, no sign-up needed.
Test Your Site →