Options for render-blocking resources

It is important to note that external CSS files are render blocking (not just Webflow projects :wink:.

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)

Hi @FeliciaForbes, For the font, I had to simply download them manually from Google Fonts then upload them to Webflow and used swap for display.

Seems @Daniel_Chavez has shown how to do that for javascript files

webflow custom code loads the script at the end of the head. So loading the script async doesn’t do anything. Is that right?

This is driving me mad. I’ve got a TTI of over 6s!!

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?:

read only: Webflow - We Are Sprout

Remember, it’s a good habit to clean up your style manager in the top right corner from time to time.

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.

It’s a niche case, but it’s good to keep in mind!

1 Like

I did this to myself at least three times before making it a habit to keep an “extras” page of all my coded styles :slight_smile:

1 Like

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
gif
You can see the test site here
https://speed-test-5dcd00.webflow.io/

1 Like

True! I always have a hidden non-indexed page where I drop all the custom code class stuff in so it wouldn’t be accidentally deleted.

It has been more than 4 years now I’ve been with webflow and still no fix on this is worrying as Webflow aims to replace wordpress.

Can anyone please help look at my site, Zensite and let me know if you are able to help resolve this?

Thanks

Really looking forward to the release of update webflow solution for css/js minification. Latency time on my site is 3.69 sec WAPP Web Studio | High-performance Web Developing

Is this on staging or production? I’m asking because ⏬ Speed: TTFB on webflow.io STAGING and our own PRODUCTION domain

Hello, can you share the “sauce” ?

Hi ! Really interested. Can we discuss ?