Per page JavaScript

Per page JavaScript improves site performance and saves on bandwidth. Let's take a technical look at what this actually means. So I've got a website here that we actually haven't published in quite a while. If I look in here we see it was actually published 10 months ago. Now something that's important to know about this site is that it's using web flow interactions which use JavaScript under the hood and has no site custom code attached to it. We can verify that by just collapsing and then expanding everything. And this little interactions icon means we're using interactions. If I come over here to the interactions tab we see we do have a page load animation. Again this is JavaScript but it is JavaScript but you won't find any on the page itself. So I'll scroll down here to inside the head tag and before the closing body tag and just look there's no JavaScript here. But we know that under the hood Webflow is shipping HTML CSS and JavaScript to make our website work.

Let's take a look at what that looks like. So okay over here I'm not publishing. All right this is still 10 months old and doesn't have our new per page JavaScript feature yet but I'm just going to go ahead and open it here and I'm going to rightclick and inspect on the page. So we're here in the Chrome DevTools elements tab. I'm going to click over to the network tab and we can see there's nothing here. And that's okay. If I go ahead and refresh the page we'll start getting a bunch of stuff. We can see SVG. We see PNG JPEG. We see fonts here. But I'm scrolling to the top. And now I see document. That's HTML. Stylesheet. That's CSS. And script. That's JavaScript. Let's go ahead and filter for JavaScript only by clicking this little JS button up here. And we see here we have four different scripts.

Now the one I care about is this web flow.bd B1CA32.js. And right now the size says disk cache. That means my browser has actually cached this file cuz I've opened it before. But we can look at the size by clicking disable cache and refreshing. Now we see I have that same JavaScript file and it's 101 kilobytes and it took 70 milliseconds to load. If I double click here I can start inspecting the JavaScript that web flow writes for our website. And I can scroll and just kind of look at all of this garbly and see what is going on. And we see it actually goes for quite a ways.

Now something that's interesting to note is that we did see it uses interactions but this web page doesn't use a slider or a tabs component. And if I go ahead and use Ctrl+F and search for slider we can see that there's code in this JavaScript to run a web flow slider element. Now if you ask me it doesn't make a lot of sense to include code that our website doesn't need to actually run. And that's what per page JavaScript is for.

To see this in action let's start a new website and not put anything in it. So I'm here on a completely new website and I haven't done anything with it. And I'm just going to go ahead and publish and look at the HTML CSS and JavaScript that Web Flow is shipping with this site. All right let's go ahead and click that. And I'm going to open the dev tools now by hitting command option I. And um actually it looks like there's a problem loading this. This is not my computer. This is Grimur's computer. Grimur you know what's going on here. oh yes of course I know it's my computer. So what we have to do here is uh actually uh click here and then uh click here again. Okay. And now we have a published website with nothing on it.

Let's open up Chrome DevTools again. I'm using command option I as the hotkey to do that. And notice we're still in the network tab here. I have to refresh to get our JavaScript to load. So we see here I've got another JavaScript file created by Webflow. And this time it's 13.3 kilobytes. So this is how much JavaScript that Webflow ships with your site when your site has nothing on it. So let's double click into that and I'm just going to control F and look for slider again. And notice there are zero results returned this time.

Now let's see how intelligent the web flow bundler is by dragging a slider into our project and publishing it and checking out the new JavaScript that shipped with our site. So back here in the project I am just going to hit command K to open up the quickfind menu and I'll type slider and click return. We have a basic slider on our site and I'm going to publish. All right that's published. Let's go ahead and refresh here again. And now notice that our JavaScript file size has gone up to 16.7 kilobytes. And if we click into that and now I'm going to command F and search for slider we see there's 10 results. And if we inspect it's kind of hard because this JavaScript is minified but we can see it's looking for specific Webflow slider classes here to run the JavaScript. It's got an Aria label the slider mask all here. So this is all the JavaScript that's used to make the slider work on our Webflow website and it was only included when we actually put a slider on the page. That's the magic of per page JavaScript.

What about a tabs component let's have a look at that. So back on the canvas now I'm just going to open up quickfind and search for a tabs component. And let's go ahead and publish this now. All right. Now we refresh and we see we've got our tabs component over here that is working and we have a new hashed JavaScript file. Notice it's 17.7 kilobytes. And we can open this one up. And now if I command F and search for tabs I don't know why I'm doing all caps here but for whatever reason I am. And it's case insensitive. So we're finding this tabs component right here. And notice it's looking for the W tabs class which is unique to our tabs component in Webflow. So that's pretty cool.

Another thing to notice is that this tabs code is at the bottom of the JavaScript file. And when bundlers are creating our JavaScript for us a lot of times what they'll do is they'll append the code we need to the bottom of the file. So this is indicative that the web flow bundler is intelligently adding the code as we add the elements or remove them from our page.

Now we didn't call it per component JavaScript. We actually called it per page JavaScript. So let's see what happens when we make a new page and start putting components on there. So Grimur what do you want to call this page. i would just say I am a page. I am a page. Yeah that sounds great. All right let's do that. So we're going to create this and I'm just going to drop something that I know uses JavaScript on this like our Lottie component. So there we go. We've got our Lottie. I'm not going to actually add anything. I'm just going to see what happens to the JavaScript file. So let's go ahead and publish this again.

Okay we're checking out I am a page page again. It's blank. There's nothing there. We don't actually have a Lottie but we did load the Lottie component. So I'm going to look at the network tab and I'm going to refresh. And now notice look at this. We have three different JavaScript files. We've got web flow.skunabunch of stuff. We've got Webflow.k. And we've got this other Webflow JavaScript file that looks familiar. It's splitting up the code in a way that it thinks is intelligent to send over the browser to our users.

Okay. So looking at the first one we see this is 91.4 kilobytes. And I'm going to double click into this one. And what do you think I'm going to search for. i'm going to search for Lottie. And look at that. There it is. We see Lottie in here and we have all this code that's related to running a Lahi on our website. Now what about these other chunks. Let's check this second one. Is Lottie in here. It's not. So this is doing something else. We could look into it. I see request animation frame. Maybe this has to do with interactions or something. I don't quite know. Um but if I search for slider. Slider is not there. And that's good because we don't have a slider on this page. And I'm also going to look at this very last one here and search for Lottie. There is Lottie on here. So again this is the page that is using Lahi.

Let's go back to our original page and make sure that we're not shipping any code related to Lahis on that page. So this is that page. I've just refreshed. We have the slider and the tabs component. Look we have two JavaScript chunks here. This time I'm going to open this and I'm going to search for Lottie. There is no Lottie on this chunk. And if I go to this one I'm going to search for Lottie. There is no Lottie there. So really cool. We have intelligently bundled our code so that we're only shipping the amount of code that we need for each web page.

So there you have it. In that quick example we've seen how Webflow now intelligently bundles our code on a component and a page level such that we can have better site performance and reduce bandwidth going across the wire to our users. So get out there and build some fast websites with Webflow.