How can I resolve various performance issues, such as eliminating render-blocking resources, deferring unused CSS, ensuring text remains visible during webfont load, minimizing main-thread work, serving static assets with an efficient cache policy, reducing JavaScript execution time, avoiding an excessive DOM size, and minimizing Critical Requests Depth in my Webflow site?
TL;DR
- Remove unnecessary fonts, scripts, and plugins; disable jQuery if unused and move custom code to the footer.
- Minimize unused CSS and components via audits; use a style guide and tools like PurgeCSS if exporting.
- Load fonts with
display=swapto prevent text delays and reduce font variants. - Optimize performance by limiting custom JavaScript, using lazy loading, and simplifying interactions.
- Rely on Webflow’s CDN for asset caching and avoid third-party-hosted files.
- Prevent DOM bloat with fewer nested divs, symbols for repeated elements, and optimized CMS structures.
- Reduce critical resources in the header and lazy load non-essential content like videos and maps.
Improving Webflow site performance involves several optimizations that go beyond default platform capabilities. Here's how to address each specific issue using available Webflow settings and external strategies.
1. Eliminate Render-Blocking Resources
- Avoid adding unnecessary external fonts, scripts, or custom embeds in the
<head>. - Disable Webflow’s jQuery if not used: Go to Project Settings > Custom Code and uncheck Load jQuery.
- Move custom code to the Footer section instead of the Head to delay script execution.
- Use Webflow's native interactions instead of third-party JavaScript where possible.
2. Defer Unused CSS
- Webflow doesn't provide native tree-shaking of unused CSS.
- Minimize unused classes and components in your build. Regularly audit components with Finsweet’s Client-First or similar system.
- Use a Style Guide page to ensure only necessary global classes are in the published CSS.
- For advanced users: Export the site, then manually purge unused CSS using tools like PurgeCSS in a custom deployment.
3. Ensure Text Remains Visible During Webfont Load
- Webflow includes default font-display settings, but you can enforce better defaults:
- Use Google Fonts with
display=swap, by linking them manually in the Custom Code > Head section:- Example:
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
- Example:
- Avoid overuse of font weights and families to reduce font file size and delays.
4. Minimize Main-Thread Work
- Reduce or eliminate heavy custom JavaScript.
- Avoid inline event listeners and unnecessary DOM manipulation.
- Use Webflow Interactions smartly—avoid multiple animations triggering at once when components enter the viewport.
- Use lazy loading (
loading="lazy") for all image and iframe elements, which Webflow supports natively.
5. Serve Static Assets with an Efficient Cache Policy
- Webflow serves images and static assets (like CSS/JS) via its CDN with effective caching headers by default.
- Avoid manually adding external assets hosted on third-party or uncached platforms.
- For downloads or PDFs, upload them directly to Webflow’s Assets panel to benefit from CDN caching.
6. Reduce JavaScript Execution Time
- Turn off unused Webflow plugins, such as unused sliders or tabs.
- Limit custom JavaScript and third-party embeds (e.g., chat widgets, analytics).
- Use clean, minimal JavaScript, and execute it on specific pages only instead of globally.
7. Avoid Excessive DOM Size
- Keep the DOM tree shallow: Avoid too many nested divs.
- Use Finsweet’s Client-First method or similar frameworks to avoid div soup.
- Consolidate repeated components using Symbols when possible.
- Limit deeply nested structures in CMS collections and components.
8. Minimize Critical Request Depth
- Reduce the number of fonts, third-party scripts, and other external resources loaded in the
<head>. - Lazy load non-critical assets (e.g., videos, maps).
- Reduce dependencies in the header—move all non-essential scripts to the footer.
Summary
To improve your Webflow site’s performance: remove unneeded assets, defer and minimize custom code, simplify your DOM, and reduce third-party script usage. While you can't control everything in Webflow’s built-in system, careful project structure and custom code management will significantly enhance load speed and performance scores.