Is it possible to get an authentic answer about how to eliminate render blocking resources for Google Page Speed in Webflow? Thank you in advance.
TL;DR
- Defer JavaScript by placing scripts in "Before
</body>tag” under Page Settings and adding thedeferattribute to<script>tags. - Minify and combine CSS/JS via Site Settings > Publishing and avoid external blocking styles.
- Optimize fonts with
font-display: swap;and limit unnecessary font weights/variants. - Use lazy loading for images and prefer WebP format for better compression.
- Reduce third-party scripts by limiting external libraries and hosting key scripts locally.
- Test performance in Google PageSpeed Insights and adjust accordingly.
Eliminating render-blocking resources in Webflow helps improve your Google PageSpeed score by optimizing CSS, JavaScript, and font loading. Below are the key steps to reduce these blocking elements.
1. Defer Non-Critical JavaScript
- Enable Defer or Async: Webflow automatically moves custom code inside the
<head>tag, which can block rendering. Place scripts in the “Before</body>tag” section under Page Settings to defer loading. - Use
deferAttribute: For external scripts, modify the<script>tag to includedefer, ensuring execution only after HTML parsing.
2. Minify and Combine CSS & JavaScript
- Enable Minification: Go to Site Settings > Publishing and turn on Minify CSS and Minify JavaScript.
- Avoid External CSS Blocking: If using custom fonts or stylesheets, consider importing them in-line or using async-friendly methods.
3. Optimize Web Fonts
- Use Font Display Swap: Add the following
font-display: swap;rule in your custom CSS to prevent font rendering delays. - Limit Font Weights & Variants: Only include necessary styles in Project Settings > Fonts to reduce blocking requests.
4. Optimize Image Delivery
- Use Webflow's Built-in Lazy Loading: Set image elements to Lazy Load (
loading="lazy"). - Use Next-Gen Formats: Prefer WebP images for better compression and faster loading.
5. Reduce Third-Party Scripts
- Limit Unnecessary External Libraries: Avoid excessive Google Fonts, embed scripts, or external assets that increase blocking resources.
- Host Key Scripts Locally: If possible, serve key scripts like Google Fonts or analytics libraries from your Webflow-hosted site.
6. Check Performance with Google PageSpeed Insights
- Test After Changes: Run your site through Google PageSpeed Insights to check if render-blocking elements are reduced.
Summary
Eliminate render-blocking resources by deferring JavaScript, minifying CSS/JS, optimizing fonts, using lazy loading, and reducing third-party scripts. These steps will help improve Webflow site performance and PageSpeed scores.