How to Improve Your Webflow Site’s PageSpeed Score
Learn how to improve your Webflow site’s PageSpeed score: images, fonts, third-party scripts, and Core Web Vitals.
In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to improve your Webflow site’s PageSpeed score step by step.
1. Measure your starting score
Go to PageSpeed Insights and test your URL on both mobile and desktop. Note the LCP, CLS, and INP scores separately: these are the three Core Web Vitals Google uses for ranking.
2. Optimize your images
In Webflow, all uploaded images are automatically converted to WebP as of 2023. Make sure the Loading field for your above-the-fold images (hero, logo) is set to Eager and all the others are set to Lazy. Always specify a width and height for your images to avoid CLS.
3. Optimize font loading
In Page Settings > Custom Code > Head, add a preload for your critical fonts:
4. Defer third-party scripts
Intercom, HubSpot, Meta pixels, and TikTok pixels are the heaviest. Load them through Google Tag Manager with a Window Loaded trigger instead of All Pages to delay execution until after the initial render.
5. Remove unused CSS
In Chrome DevTools > Coverage, identify unused CSS. In Webflow, disable unnecessary classes through the Styles panel. Avoid importing full CSS libraries (Bootstrap, Tailwind) when you only use a fraction of them.
Conclusion
A high PageSpeed score directly improves your SEO and conversion rate. Use cases:
- Before/after Webflow redesign audit
- Optimizing a paid landing page
- Improving SEO rankings on key pages
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


.avif)












