Only publish the JavaScript you need

"Starting now, your sites' Webflow.js files will only include the JavaScript you need for your components and interactions, so your sites will load that much faster."

yay. Will start playing with it. Hopefully it does what we need.

if it does… +1 for @webflow

Yeah I had a quick check on one of my sites. 36kb before republish, 31kb after republish.

Not much, but every byte counts :pizza:

TEST 1
Create New Project.
1 Page containing a section and nothing else.
No classes. No styles. No nothing. Just a section (div).

Result:

CSS:
project style sheet - 0 bytes
normalize - 8kb
webflow.css - 38kb… QUESTION: WHY IS THERE A WEBFLOW.CSS FILE (thinking about white-labeling)

JS:
modernizr: 5kb
webflow.js - 56kb… QUESTION: WHY IS THERE A WEBFLOW.JS FILE (thinking about white-labeling)


TEST 2
Open an existing project
Tons of classes.
Project uses jquery to dynamically load a photo library

Result

CSS:
project style sheet - 30kb
normalize - 8kb
webflow.css - my project doesn’t have a webflow.css - why not… test 1 did ???
component.css - 38kb

JS:
modernizr: 5kb
(project).js - 131kb… why does a new project have a webflow.js file but an exiting project have a js file nmed after the project.


So… it appears the project js file is smaller. In my case about 50% smaller when comparing a new project with nothing in it (56kb file) to a complete - fairly large project (131kb).

Issue 1:
Also… with this update… it seems webflow no longer uses the project name for the js file… instead opting to name the file webflow.js… Which is a step backwards when it concerns any level of white-labeling.

Issue 2:
And… with this update… it seems webflow no longer uses the project name for the css file… instead opting to name the file components.css… Which is a step backwards when it concerns any level of white-labeling.

1 Like

I found an error in my post…
So I wanted to provide a more accurate report.

This is a live project that was released 3 months ago and has not been updated since.

File sizes are from

  • a previous export (pre-js-exclusion feature) and
  • a new export (post-js-exclusion feature)

CSS
No changes to css file sizes

  • [project name].css - Old: 29KB / New: 29KB
  • components.css - Old: 38KB / New: 38KB
  • normalize.css - Old: 8KB / New: 8KB

After White-Space Removal

  • [project name].css - Old: 24KB / New: 24KB
  • components.css - Old: 29KB / New: 29KB
  • normalize.css - Old: 2KB / New: 2KB

JS
Reduction in [Project.js] File Size
[Project.js] is the Webflow JS File named after your Project.
A couple releases back… it was named webflow.js.

  • [project name.js] - Old: 180KB / New: 145KB
  • modernizr.js - Old: 5KB / New: 5KB

After White-Space Removal

  • [project name.js] - Old: 104KB / New: 88KB
  • modernizr.js - Old: 5KB / New: 5KB
2 Likes

I’m very confused about this update.

Why is reported that “only the Javascript you need” will be published when there is still a webflow.js file on a plain site with no Javascript used?

Hi @Rocky4OnDVD and @Revolution, at the moment the Javascript optimizations are being performed in phases. The optimizations are currently at Phase 1, with Phase 1 being conditionally adding JS for components (Navbar, Tabs, etc).

The script for the interactions engine and smooth scrolling are still included in phase 1 as they are needed for proper site load.

Phase 2 will move more into the hyper-optimization of the js, shipping only the bare minimum of the javascript needed (for example, if no interactions are present, do not publish the interactions engine code).

At the moment I do not have a timeline for this, but as work is completed and updates pushed out, there will be announcements on the updates page.

Regarding the code improvement change from Phase 1 to Phase 2, it was a 10x difference with 10k lines of code to around 1200 lines.

I hope this helps, further improvements are on the way.

5 Likes

This topic was automatically closed after 60 days. New replies are no longer allowed.