Eliminate render-blocking resources - Page Speed Mobile

Hi! I have a problem with my “Page Speed”. I don’t understand what I should do with this information…

" Eliminate render-blocking resources

2.15 s

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.

URL Transfer Size Potential Savings

(uploads-ssl.webflow.com)|18.9 KiB|930 ms|"

I hope someone knows this :slight_smile:

Sending my regards from Sweden

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


Not everything recommended you can address. This is one of those.

it’s true webflow does not allow us to address this but you guys could address it on your end. Is this something being looked into? I also get less than ideal mobile results on page speed and have no ability to fix the issues in Webflow.

1 Like

2.2 seconds is no joke

bump @Waldo is there anything to add on this or is it being looked into do you know? :slight_smile:


I think Webflow allows to defer and async, and thus solve the problem in the topic, but only after exporting code out of Webflow.

I think it should be possible to deal with it with an additional tool that analyzes the CSS file. Friend suggested to me, that he had once a tool which suggested which CSS classes or selectors should be looked into. Then, it is the matter of logging into Styles Manager in Webflow and checking them manually. Do you perhaps know the name of this tool? I’ve been looking for it to no avail. Have seen it a few years ago.

Any updates on this? Webflow team?


@webdev currently with recent Google Page Speed updates it’s becoming a lot more of an issue, because css request is blocking.

I realize obvious things are done - minify, serve from CDN, one file, etc…

You could go much further:

  • Automatically purge unused classes
  • Automatically break down CSS into site specific and files common to each page
  • Break down into files by media queries as explained here Render Blocking CSS

Then minimum amount of CSS would load and that would mean less time loading and less time processing rules on slower mobiles on slower networks

I understand you keep it render blocking to avoid a flash of unstyled content and it’s great. However, all modern frameworks, like Gatsby, next, anything with webpack, already produce optimized css for each page that dynamically loads.


These are the suggested fixes for my mobile site - 4 out of 5 items can only be addressed by webflow :disappointed_relieved: My SEO is really suffering so any advice would be much appreciated.

1 Like

Also keen to understand how to fix this issue - or how Webflow are thinking about addressing it.

I come from JAMStack, we moved from there to Webflow because of scaleability issues with designers…it’s great to not have to deal with backend…but not seeing them implement best practices like purging unused CSS (stuff Bootstrap and Tailwind does) is sad.

Why not just in-line the CSS, that’s wouldn’t that solve the problem: “Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.”


Any solution? It is making my lcp take 2.5 seconds and I my score is almost perfect other than this.

Having a major issue with this on my site as well. Everything is pretty much perfect apart from the render blocking issue which takes 1.7 seconds(???). Craziness - hope there is a fix soon otherwise I’ll need to think about self-hosting

1 Like

I work as a mobile web developer. For me, perceived speed is a huge issue. For the time being, backend constraints prevent me from breaking out JS and CSS in this manner. Icons were one area where I did have more control. We use FontAwesome, and because of the way we defer webfonts, it’s one of the last things rendered. This looks bad because the icons on our burger, cart, and search buttons appear after everything else. It’s startling. I despised it so much that I converted each glyph to SVG, hand-optimized them to remove unnecessary detail, and in-lined them in markup instead.
They’ve gone from being the very last to load to appearing instantly when the DOM is painted for the first time. It vastly improves the user experience while having virtually no effect on load time. It took some effort to establish a good workflow, and I understand that it may not be a viable option for some people, but I wouldn’t do it any other way now.

1 Like

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).

Hi Webdev,
Would you please reach out to me. I’m interested in services you provide to improve my webflow websites.

It’s incredibly important that Webflow responds to this with some sort of solution. Every publisher on Webflow is suffering in Google search because it’s so challenging to meet Google’s Core Web Vital scores on Webflow. This is not challenging at all on other CMS platforms. I’ve done nearly everything I can do on my end — but am still in the red because of Webflow’s render blocking resources.

@brandenh - Webflow would need to change their build process and break the CSS into multiple files like they do on exports. They could also do the same for the JS files since they bundled in underscores. It probably won’t happen. Look at webflow in PSI. 30-86-73-93 mobile.

This should be at the top of Webflow’s priority list.