With Webflow's significant hosting plan bandwidth cuts in June, asset optimization is the name of the game.
But what happens when you've re-hosted your videos and optimized your images as much as you can? What do you do with that 500k webflow.js file that is now your #1 bandwidth consumer?
Yes this can actually happen, and more site owners are encountering this problem. After all, that webflow.js must be downloaded for every user no matter what page they visit.
Fortunately, it can be optimized too. Somewhat.
How Webflow.js Works
Whenever a site is published, Webflow.js is built dynamically by Webflow's publishing system. It includes only the JavaScript code needed to power your site.
This includes the base Webflow.js code, needed to make all sites run, plus the additional "modules" needed to power your site specifically.
These modules are intelligently determined by two things;
- The elements you are using on your site- sliders, tabs, lightboxes and such.
- The features enabled on your site, such as ECommerce and User Accounts.
How Elements Impact Webflow.js
When you use an element such as a Slider, Webflow detects that you are using that element type, and adds the necessary code to your Webflow.js.
It only needs to add the code once- so the publishing engine doesn't care if you're using only one slider, or 1,000, the code needed is the same. However it will add that code even if you're not using the element. If that slider is on a drafted page, or marked as visibility hidden, that code will still be added to your webflow.js.
These elements add code to Webflow.js;
- Lotties
- Interactions
- Rive
- Forms
- Lightboxes
- Navbars
- Tabs
- Background Video
- Maps
- Splines
- Dropdowns
Other elements we've tested do not require any additional code in Webflow.js, and are supported by the "base" Webflow.js - Selects, Recaptcha, Search, Code Block, Locales List, Log/In Log/Out.
How Features Impact Webflow.js
In the same way, when you enable a feature on your site, this has a permanent and irrevocable effect on your webflow.js code.
- User Accounts
- ECommerce
Localization and Logic do not appear to add any code to webflow.js.
The Hard Numbers
The base Webflow.js clocks in at 13.7k minified ( 17.8k unminified ).
On top of that, the various elements and features you use will add further code.
Here you're looking at a sorted list, with the most impactful features and elements at the bottom of the list.
Blue bars indicate the size of the minified code added to webflow.js. The black extension indicates the added bloat that will exist if you publish with JS un-minified.
The 5 Hefty Features
If you were to use all the different component types, and enable every feature in your Webflow site, your webflow.js would clock in at 398 k minified, or 563 k un-minified.
These ones have the biggest impact.
- User Accounts ( +143.5k )
- Lotties ( +102.4k )
- Interactions ( +43k )
- ECommerce ( +42.7k )
- Rive ( +36.7k )
Putting Your Site on a Diet
First, the good news.
Webflow is good at detecting which elements you are using in your site, and only delivers the code needed to support those elements.
That means that if you remove every slider on your website, from every page, Webflow will remove the slider code added to Webflow.js on your next site publish.
If you're pressed for bandwidth, that means that removing all Lotties and Rive elements as well as all Webflow Interactions from your site can reduce your webflow.js size significantly. It seems that animation is costly.
Now the bad news.
Two of the top 5 are User Accounts and ECommerce. When you enable these on your site, they are permanent additions which can not be removed.
You're stuck with them, even if you're not using them.
The only way around this is to rebuild your site in a clean project which does not have those features enabled, and that's a very tedious process.
