Google page speed tool shows a very low page speed at 51% for my Webflow site.
I wonder if there’s a solution to fix these problems:
- Eliminate render-blocking resources
- Ensure text remains visible during webfont load
- Reduce JavaScript execution time
Webflow has a lot of baggage and it won’t let you pick and choose what it can bring along. Unfortunately, there’s nothing you can really do about that. What you CAN do, though, is defer via script or delay via GoogleTagManager literally everything else. Google wants your text to load first (in the way it’s planned to be seen), then whatever image is above the fold (you can set your page up so that it is none), and then everything else after that. If you set up a Trigger in GTM for “3000ms has elapsed” and then make all of your external scrips (including GA, etc.) fire after that timer, your PageSpeed will skyrocket. You’ll still have the Webflow baggage, but that’s how you get the best score possible on Webflow. I’ve gotten a few sites to be 99 with this one weird trick (;
Thank you, I’ve already turn most of the things async, but how do you turn their global asset thing async?
interesting how do you set that trigger in GTM so it is 3000ms?
1 Like
You can’t set desync for Webflow’s assets, only the others that you bring in.
You need to use Google Tag Manager and set a Timer Trigger for 3000ms and then use that Trigger to load in all your other scripts after the page is done loading.
Do you guys also feel like the global asset loading times got much more?
The speed scores of old sites keep dropping…
The new “Asynchronously load JS” toggle under advanced publishing options seems to have helped. I don’t know how with no “async” or “defer” attributes added to scripts. However, the Google Tag Manager script added by the Google site tools for Webflow app is the only script that Chrome DevTools’ Lighthouse is reporting as render-blocking on my site.
As for the site stylesheet also render-blocking, it would be amazing if Webflow could deliver critical CSS inline, then load the non-critical stylesheet asynchronously by applying the rel=“preload” as=“style” onload=“this.onload=null;this.rel=‘stylesheet’” pattern, or whatever magic behind the scenes. 
Hi @jacklau ,
It sounds like you’re dealing with some common performance issues that can significantly impact your Google PageSpeed score. Here are a few suggestions to help resolve these problems and boost your site’s load time:
- Eliminate Render-Blocking Resources:
- One way to handle render-blocking resources is to defer or async the loading of JavaScript files that are not crucial for the initial page render. This can be done by adding the async or defer attributes to your script tags.
- You can also use Webflow’s built-in options to minify and optimize scripts in the Project Settings under Hosting.
- Ensure Text Remains Visible During Webfont Load:
- This is a common issue with web fonts. To fix it, you can use the font-display: swap CSS property. This ensures that text is shown immediately with a fallback font while the web font is loading.
@font-face {
font-family: “YourFont”;
src: url(“your-font-url.woff2”) format(“woff2”);
font-display: swap;
}
Reduce JavaScript Execution Time:
Minimize the use of JavaScript-heavy interactions or remove unnecessary scripts that aren’t adding value to the user experience. Consider using custom code to streamline interactions or reduce animation complexity.
Additionally, look for unused JavaScript libraries or frameworks in your Webflow project and remove them to reduce load time.
If you’re looking for an automatic solution to optimize your site’s performance, I recommend trying Website Speedy, a Webflow app that automates performance optimizations such as image compression, lazy loading, and minifying JS/CSS. It helps speed up your site without requiring manual intervention, saving you time while improving your PageSpeed score.
You can find it on the Webflow Marketplace here: Website Speedy on Webflow Marketplace