I tried to send this as a support request but the support website fails to do so because of a cross-domain error (if anyone can tell the tech team, please do).
I have checked my website with Google Lighthouse (on November 13th, 2023) and got a low score of 41 on performance, the main two points being Blocking Third-party Code and JavaScript execution time, which both had webflow.js as the biggest impact (see attached images):
If you export your site you could break the Webflow.js file into multiple files. One for the core JS, one for underscores, one for your animations. On an export Webflow correctly breaks the CSS down into three distinct files (its mind numbing that they don’t in production). These will significantly improve performance since HTTP2 allows multiple files to be downloaded by the browser at once.
Honestly, I find this unacceptable from Webflow. This should just work and be optimized out of the box… Why aren’t more people complaining about this? I haven’t found any similar posts on here.
Also doesn’t exporting my site mean that I will have to then host it myself instead of Webflow directly? I am a software developer myself, but I work with non-developers on the website and it’d make doing changes and publishing them infinitely more complex for my colleagues.
Me too. Yes at least you should have options. If you search the forum you should be able to find plenty of topics where I discuss this issue and offer specific performance advice.
Yes, self-hosting has implications. Personally I use something else when performance is my number one goal. Some have found success with Udesly Jamstack. At least you can maintain your site and push it to netlify when changes are made.
It is essential to understand that Webflow adds all its functionality into one large JS file. IX2, Forms, Scrolling, Lightbox, Slider, etc. They probably don’t break it up per site since calculating what each site uses and then building assets per site would be an expensive compute process and a potential support nightmare.
Webflow is trying to serve many different audiences. Some don’t know anything about web development and don’t care. Some do. Webflow has hard choices to make.
I remember telling troops in basic training why we pack a ruck with the same stuff for each person. So, all a soldier needs for the field is in the ruck, their web gear, or their hands. Anyone picking up a ruck from a fallen comrade also knows what is in it. Special warfare units pack whatever they need for the mission and preference because they are the pros.
Could you go off and dismantle the core JS and reduce its dependencies? You sure could, but why bother since you chose Webflow? As I said, when conversions and performance have to be as high and fast as possible, Webflow is not the tool. I prefer to judge what gets loaded, where, and when—trivial stuff when I am being the pro.
Oh yeah, I totally understand why they do it. But how they do it is the problem here.
If they broke up the js file into pieces instead of one massive file and serve all those smaller files, it would already increase performance by a lot, I’d argue. But that would probably mean more stress on their network, so I get it.
And I understand that they want to serve a wide range of sites, but let’s face it, probably over 90% of their use cases are the same: a marketing site for a company or start-up, a portfolio cite for a free-lancer, simple stuff like that. And for those use-cases SEO (thus performance) is a huge point.
But anyway, I just realized that Webflow support most likely will never address this, after seeing some more posts on here. So I won’t argue more as I see no point.
Thanks a lot for your suggestions! I will see about alternatives.
@Mountainer - I would suggest a look at Astro.Build which can do SSR or SSG and hydrates JS when desired. I like using AlpineJS with it for components and TailwindCSS which is super lean. I also like using BricksBuilder with WP which is a really nice tool and I can also control the loading of assets on a page by page, template, tag, or category. It has significantly more features than Webflow and clients have no problem maintaining content. Lots of good tools means lots of choices. Good luck with your project.
Just wanted to pump this topic up as I have the same problem. And looking through the Forum I see 75% of these questions arise. Is webflow doing something in the near future to improve this?
I don’t think this analogy holds here.
It’s the industry standard to use automations during the CI build process to remove unused code automatically and safely.
It’s called tree shaking.
Just look at how JS frameworks all do it. Of course you have to write proper type-safe Typescript code, but who doesn’t do it in 2024? From there it should be pretty easy to automate tree shaking as the compiler understands all the code
I would also argue that Webflow shouldn’t load all thes bloated 3rd party dependencies (underscore, moment.js, jQuery, etc), they should write their own code and optimize it for size and speed. Most companies do this nowadays, loading speed and slow bundle sizes have become important aspects, development speed is not only what matters. Use browser features where possible (e.g. CSS animations, HTML5, ES14, etc). And of course Typescript and tree shaking
