How can I improve my Page Speed in Webflow to eliminate render-blocking resources and improve the first paint of my page?

TL;DR

Move non-essential scripts to the bottom of the page, use defer/async, and remove unused third-party scripts.
Limit font styles, enable font display swap, and reduce the number of custom fonts used.
Ensure images/videos use lazy loading and optimized formats; resize and compress before upload.
Reduce animations on page load and enable minification settings in Webflow’s Hosting tab.

To improve Page Speed in Webflow and eliminate render-blocking resources, you'll need to optimize scripts, fonts, and image loading strategies.

1. Eliminate or Defer Render-Blocking Scripts

Avoid custom JavaScript in the <head> unless absolutely necessary. Move most scripts to the Before tag section in Page Settings > Custom Code.
For third-party scripts, use the defer or async attribute where possible. For example, when embedding Google Analytics, use the recommended async strategy.
Remove unused third-party scripts like old widget embeds, social plugins, or tracking scripts you no longer use.

2. Optimize Font Loading

Use only the font weights and styles you actually need. In Project Settings > Fonts, disable unused styles to reduce font file size.
Use Webflow’s built-in font display swap to avoid text rendering delays.
Avoid loading multiple custom fonts if one or two can serve your design.

3. Enable Lazy Loading for Images and Videos

Webflow automatically applies lazy loading (loading="lazy") to images and iframes. Make sure your images are served via the Webflow Image element to take advantage of this.
For videos (e.g., YouTube), use a thumbnail image with a play button overlay, and only load the iframe via custom code after the user clicks play.

4. Compress and Resize Images

Use the WebP format when possible. Webflow automatically compresses images, but you can manually optimize large image files using tools like TinyPNG before uploading.
Avoid setting width/height dimensions larger than needed. Serve the image at the actual display size rather than scaling it down with CSS.

5. Use Fewer Webflow Interactions on Page Load

Limit the number of animations and interactions that trigger on page load, as they can increase Time To First Paint.
Use them sparingly and test the impact using tools like Lighthouse or PageSpeed Insights.

6. Minify and Combine Files Where Possible

Webflow automatically minifies CSS and JavaScript, but ensure these settings are enabled in Project Settings > Hosting:
Minify CSS
Minify JavaScript
Use secure frame headers (optional for performance)

Summary

To improve Page Speed in Webflow: defer or remove render-blocking scripts, optimize font and image use, minimize on-load animations, and leverage Webflow’s built-in lazy loading and minification features. Always test changes using tools like Google PageSpeed Insights for specific performance bottlenecks.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer