It is important to note that external CSS files are render blocking (not just Webflow projects .
The only option you have to improve that on Webflow (hosted) is to minimize CSS: Remove any unnecessary CSS rules and reduce the file size of the CSS file by minifying it.
This is something you can do in the designer and project settings.
Off Webflow (you host and deploy), you could inline critical essential CSS in a style block (in the head) and then load the balance (non-critical) via the normal loading of the file.
If performance of your site is of an upmost concern of yours, feel free to reach out to me via a DM for professional services.
In https://webflow.com/ page, go to “/dashboard/sites/${yourWebsite}/code” > Custom Code > Add code at the end of the tag. In my case, I’ve added an async attribute to my script tag (my render-blocking resource was pointing to a js file).
This is the only thing stopping me from getting 100% on PageSpeed Insights. The Webflow Dev team should please fix this and the same for Google Fonts not having the ability to add the swap feature for font display, I had to upload the webfonts manually.
Yes - exactly that. Talking about Webflow-hosted only. Self hosted sites won’t have this problem because they clearly allow more autonomy and not everyone knows how to self host.
Hey nice going on the performance. So how did you get past the TBT and other metrics? I’m not talking about optimising images and CSS etc, this is easy. The problem is files that we have no control over. How do we defer or async or prefetch javascript and font?
Hey Daniel - thanks for sharing. Would you mind elaborating further on the custom code are you referring to that should be added to the end of the custom code tag?
Yes, of course. Inside the custom Head Code block (“/dashboard/sites/${yourWebsite}/code” > Custom Code > Head Code), I’ve added the async attribute into my script tag.
From: <script src="{url}"></script>
To: <script async src="{url}"></script>
(please consider testing all older behaviors after setting the ‘async’ attribute to make sure that everything is in place)
Ive removed as many interactions as I can (pre-loader etc) without getting ridiculous. All images are optimised and css and js is all minified. what am i missing?:
Do be careful with this though. All styles that aren’t in use at that moment will be deleted. Which also means that if you have any custom code that assigns classes to other tags won’t exist anymore.
I create a special sauce to optimize Webflow site over 90 in mobile in page speed insight, and I am an Expert in Cloudflare optimisation including custom script in Workers. If this is super important for one of your client just contact me
You can see the test site here https://speed-test-5dcd00.webflow.io/
.
