Streaming live at 10am (PST)

IX-only webflow.js build


#1

Hi

It's been quite a while (nearly 3 years?) since @callmevlad and @danro mentioned they were working on streamlined webflow.js export functionality, but I don't think it was ever released in the end.

I'm only using a few animations on my website, and don't want to load the whole webflow.js.

With the webflow.css file, it's easy to see what is unneccesary and cut it from the file. But with the webflow.js file, it's very difficult to understand what can go and what needs to stay.

I just want a minimal subset of the webflow.js that is generated when I export my site, and is tailored only for what I'm using.

I've tried following the instructions here: https://gist.github.com/danro/d99a87225ea0eebf72d1 but can't get it to work.

Has anyone else had any success? Or can anyone offer any other ideas or suggestions about how to cut down unneccesary code?

Thank you kindly.


Just gotta do it
Ideas / Comparison SEO Website Speed
Google analytics speed improvements
#2

Hmm, I thought unused components are supposed to be excluded now, unless it's a bug.

Just tested it:

Currently, a new project will have stuff like Lightbox and Slider in the webflow.js file, and is 142KB.


#3

That's a lot for a slider and lightbox but smaller than the full webflow.js file.


#4

Actually, my understanding is that it is the full webflow.js file. It might be smaller than yours because it doesn't yet have any user-added interactions.

The problem is: that's the file for an empty project. It shouldn't have anything in there for a slider or lightbox or lots of other things.

That's the bug.


#5

Any feedback about this? Is it the expected behaviour or not?
And if not, is there another way to reduce the size of webflow.js?
Thanks.


#6

I had read on a previous post that unused elements were (now) removed from the JS files.

This is what I recommend to them when I saw them in Atlanta.


#7

Oddly earlier today I was debating if I should start a new project with Webflow or just start hand coding from scratch. So I basically went a head and just exported a "blank" document. Here was the breakdown:

HTML
index.html - 2k

JS
modernizr.js - 6k
webflow.js - 143k

CSS
normalize.css - 8k
project.webflow.css - 0k
webflow.css - 37k

So you're basically looking at 200k for a "blank" project.

EDIT: Just wanted to add if you run the JS through a minifier here was the savings:

Stats: 54.59% compression, saving 77.89 kb

That brings it down to 65k. This, again, was stated in a previous post I had replied to a few weeks ago is why I don't host with Webflow. The code isn't optimized enough for my liking.


#8

for a blank website :frowning:


#9

Yes, and incase you missed the update to my previous post:

EDIT: Just wanted to add if you run the JS through a minifier here was the savings:

Stats: 54.59% compression, saving 77.89 kb

That brings it down to 65k. This, again, was stated in a previous post I had replied to a few weeks ago is why I don't host with Webflow. The code isn't optimized enough for my liking.


#10

https://jscompress.com/


#11

It might have been reverted. I couldn't find any reference to it in the announcements category or features page.


#12

I remember seeing a 'since you've been gone' notice about this too – I guess it must have been reverted.

While on topic, I created a wishlist item for this a while ago. There's also a related one for minifying the js (which does offer a decent kb saving, not sure why this has been implemented for CSS but not JS yet).


#13

if so... that's a shame.

I think everyone would find that feature very useful...
and I would think it's a good selling point as well.


#14

But, hey, on the other hand, Webflow already have a 4th ! redesign of the main page, don't you appreciate the usefulness of that? :slight_smile:


#15

Please don't get me started. I get they have to keep things "updated" for marketing, but at some point you have to fix the stuff that people are paying for. I am starting to wonder if they think ignoring their paying customers is going to pay off in the long run because there are other options out there.


#16

scompress didn't compress my js file.

I did minimize the js file first...
- so am I right or wrong in thinking
--- scompress doesn't really compress - it minimizes ?


#17

I want to bump this issue back to the front...

What's going on with the selective JS code insert feature that @webflow announced a while back ?

From my understanding... only the utilized JS features were inserted into the webflow.js file.

This doesn't seem to be the case... as the webflow.js is HUGE.

And a blank project should have a tiny tiny tiny webflow.js file... and it too is HUGE.