How can I improve my Page Speed in Webflow to eliminate render-blocking resources and improve the first paint of my page?
TL;DR
- Minimize and defer custom CSS/JS, use Webflow’s built-in minification, and move third-party scripts to the footer.
- Optimize critical CSS, fonts, and media by using system fonts, WebP/SVG images, lazy-loading, and deferring heavy embeds.
- Limit third-party scripts, ensure caching via CDN, and regularly audit with PageSpeed Insights for render-blocking resources.
To improve your page speed in Webflow, especially by eliminating render-blocking resources and enhancing First Paint, you need to optimize assets, loading behavior, and third-party integrations.
1. Reduce or Defer Render-Blocking CSS & JavaScript
- Minimize Custom Code in the Page Settings > Custom Code area. Avoid large CSS/JS files added in the
<head>section. - Use Webflow's built-in minification: Go to Site Settings > Publishing > Advanced options and enable:
- Minify CSS
- Minify JavaScript
- Enable Webflow's responsive image generation
- Move third-party scripts (like Google Analytics) to the Before </body> section to defer them.
2. Prioritize Critical CSS
- Webflow doesn't currently offer automatic critical CSS loading. As a workaround:
- Keep essential styles inside Webflow’s Designer (these load inline and faster).
- Minimize use of excessive classes and complex style trees.
- Avoid large external style sheets injected via custom code.
3. Load Fonts Efficiently
- Remove unused fonts from Project Settings > Fonts.
- Use system fonts or load only necessary font weights and styles.
- Enable font display: swap when embedding custom fonts so text can render immediately.
4. Optimize Images and Videos
- Use WebP images where possible. Webflow supports this automatically on export when responsive image generation is on.
- Use SVGs for icons and simple graphics.
- For background videos, keep file sizes minimal (<3MB) and avoid autoplaying videos above the fold.
- Use YouTube/Vimeo videos with lazy-loading attributes and defer their iframe scripts.
5. Lazy Load Assets
- Webflow auto-applies
loading="lazy"to most images; ensure you're not disabling it manually. - For custom embeds (e.g., YouTube), use lightweight thumbnail + load iframe on click.
6. Minimize Third-Party Scripts
- Evaluate each third-party script (e.g., chat widgets, tracking codes).
- Only include what is necessary, and load non-critical scripts asynchronously or defer them (
async,deferwhere applicable).
7. Enable Browser Caching and Use a CDN
- Webflow automatically serves content via Fastly CDN and sets long cache lifetimes for assets.
- For assets added via custom code or external sources, ensure they have proper cache headers on their hosting server.
8. Use PageSpeed Insights or Lighthouse
- Use Google PageSpeed Insights for real diagnostics.
- Look at specific render-blocking resources listed and identify if they come from Webflow (core) or your custom additions.
Summary
To reduce render-blocking resources and improve first paint in Webflow, minimize and defer CSS/JS, avoid unnecessary custom code, use Webflow’s built-in minification, optimize fonts and images, and reduce reliance on slow-loading third-party scripts. Regularly test using PageSpeed Insights to target specific bottlenecks.
