7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. JavaScript

How to Externalize and Minify JavaScript

Scroll to top
Read Time: 6 mins

One of the most valuable methods for optimizing your JavaScript code might surprise you—removing it from your HTML files altogether. In this video from my course The Designer’s Guide to JavaScript Optimization, you'll learn how to externalize and minify JavaScript.

How to Externalize and Minify JavaScript

How to Externalize JavaScript Code

A great way to increase the efficiency of our code is by externalizing and minimizing our code. 

When we talk about externalizing our code, what I'm talking about is taking all of our JavaScript out of our HTML pages and putting that JavaScript into a separate JavaScript file, a .js file.

It's very easy to do. You would just take everything inside the script tags, remove it, and then create a new text file with a .js extension. Then you would simply use a script tag to point to that file. 

So here's an example. I have an index.html file with JavaScript code inside it. So I simply highlight everything inside the script tags and cut it.

highlight everything inside the script tags and cut ithighlight everything inside the script tags and cut ithighlight everything inside the script tags and cut it

And then we can get rid of the script tags altogether by highlighting and deleting them. 

get rid of the script tags get rid of the script tags get rid of the script tags

And then I'm going to create a new JavaScript file inside my JavaScript folder and just call it site.js.

It doesn't matter what text editor you're using. I'm using Visual Studio code here, but you could also use brackets or any other plain text editor. But I'm saving it as site.js, and I'll just paste all of that JavaScript code into it. 

Sitejs fileSitejs fileSitejs file

Now it's not going to work just yet because we're not pointing to this JavaScript in our HTML file yet.

But we can jump back over to our index.html. And then, after we've loaded all our dependencies, we'll create our own script tag to load the file that we just created. 

So it's in our JavaScript folder js/ and then I called it site.js, so the code is: 

Script code in indexhtmlScript code in indexhtmlScript code in indexhtml

That's really all it takes to externalize your JavaScript. 

How to Minify JavaScript Code

One of the big benefits of having your JavaScript in a separate file is that you can then very easily minimize or minify that JavaScript code. And when you have a minified version of your code, that minified version's going to run much quicker, because it's going to be a smaller file size. 

It's going to be difficult to read or edit that minified file. That's why you save the original copy of your JavaScript so that if you need to make changes, you make changes to that original JavaScript file, and then minify it again.

Now, how do you minify? There are several options. 

Visual Studio Code Plugins

Most modern code editors have plugins that will minify your JavaScript for you. For example, I am using Visual Studio Code. If we go to our extensions and just do a search for "minify", you can see several options for minifying your code.

Visual Studio Code minifying extensionsVisual Studio Code minifying extensionsVisual Studio Code minifying extensions

Brackets Plugins

Another free online text editor called Brackets also has extensions you can use to minify code. So if you go to the extension manager for Brackets and do a search for "minify", you'll see a JavaScript minifier.

Brackets extensions for minifying codeBrackets extensions for minifying codeBrackets extensions for minifying code

Keep in mind that after you minify your code, you need to change the file that you're pointing to in the HTML file. So if you minified site.js, then you would have a new version probably called site.min.js. And so in your HTML, you would want to point to that minified version instead of the original version of your code. Otherwise, all that minification is pointless 


If for some reason you just like using notepad to do all of your code editing, you can still minify, and one way you can do that is by going to a website like JSCompress.

Basically, this just allows you to paste your code and then click on the Compress JavaScript button, and you'll see that this compressed our code by 74%. 

JS code compressed on JSCompress websiteJS code compressed on JSCompress websiteJS code compressed on JSCompress website

This is just a very small chunk of JavaScript here, so you can imagine that if you had a lot of JavaScript on your page, this would really save you a lot of file size. And when you've got a high traffic website, that is really going to help out a lot. 

Benefits of Externalizing and Minifying JavaScript

One benefit of externalizing and minifying your JavaScript is that it allows you to handle caching a little bit better. 

Let's say, for example, that you have a chunk of JavaScript code that you're going to be using on several different pages on your website. It would make sense to put that little chunk of JavaScript code in its own JavaScript file, so that once your user visits it once, it's already cached in their browser. Then, when they visit another page that's pointing to the same JavaScript file, it doesn't have to load that JavaScript again. So that will reduce the number of requests that are made for that particular piece of JavaScript. 

If you want to take this to the next level, you can use a Content Delivery Network (CDN) to store versions of your JavaScript files in geographically diverse locations. So you might have your JavaScript stored on servers all over the world. 

The benefit to that is that if you've created your website in Texas and somebody in the UK wants to access your website, then without a CDN, that user would have to connect to your server in order to get all of the files they need.

But if your JavaScript is in a CDN, then chances are there will be a version of that JavaScript file on a server either in the UK or somewhere in Europe. So it would be much closer to that user's location, which means that it would download more quickly and run more smoothly.

Keep in mind that a CDN does cost money, so that's really only something you want to pursue if you're ready for that next level. But it really can help to speed up your website. 

Watch the Full Course

In the full course, The Designer’s Guide to JavaScript Optimization, you'll learn more optimization techniques that are perfect for web designers. I'll show you some easy-to-implement techniques for making your JavaScript, and thus your websites, run smoothly.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 460,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.