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.
I think Webflow allows to defer and async, and thus solve the problem in the topic, but only after exporting code out of Webflow.
@webdev
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.
@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 My SEO is really suffering so any advice would be much appreciated.
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.”
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
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.
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).
My SEO is really suffering so any advice would be much appreciated.