How to Minify Javascript for a Fast Site

In this tutorial, we are going to show where to find your JavaScript files for your website, how to minify the code, and how to replace the code with a compressed version to speed up your website’s load time. Does that sound good? Let’s get started!

How to Run a Speed Test to Find the JavaScript Files to Minify?

You can use Google’s Page Speed Report to find the Java files to work on. Here is an example of a website that can minify their code according to Google. You can hover over each URL to read the entire path to where that JavaScript is from which will help us find it. Then you can head over to your file manager to open that file to get the code. As a note, I already made these changes to my site, so that is why I can’t show my blog as an example.

How to Find the JavaScript Files for your Website

Ok, so we know that we have some files to work on to improve the load time for our site, but how do we find them on our site? The answer is that we need to head over to the file manager for our site. I use GoDaddy, but the steps are pretty much the same for whoever else hosts your site.

Head over to the file manager section and follow the path that Google is telling you the issues are from. For example, my problems were on the theme of my site, so I followed the path until I got to these files on my website.

From here, you want to right-click on the file and click on edit. From here, I would suggest copying the original code and putting that into a notepad if anything happens to your site. From there, we are going to take this code and minify it with a tool.

Tools to Minify the JavaScript for your Website

There are many great tools to use for free that don’t need a plugin to minify the JavaScript. One of my favorite tools is called JS Compress. Here is a picture of the original JavaScript code on my website. You will notice there a lot of lines of code with a lot of spaces. This tool is going to reduce all of this for me which is exactly what I want to do.

Before

After

With the after picture above, you can see how the tool took all of my lines of code and condensed everything for me.

Some other tools that can do this job are

How to Upload the New Code

With the code minified, we are going to upload it to our site. Same steps as before, we find the correct folder and right-click on it. Then we go to edit and replace the code with the minified code we just worked on. It will look something like this for your website once you do this. Once that code is in place, I clicked on save changes.

Repeat the Steps

Right after you make this change, you can run the page speed report in Google to see if you fixed the problem. If you did the steps above, you will see one less Java Code that needs to be worked on. Depending on how large the Java file was, you might even see an improvement in your score for both mobile and desktop. The key is to make this change to all the Java files for your site. As a note, you can use other page speed reports to see the difference in real seconds. The Google speed report just show’s efficiency. It does not break down the load time in seconds.

How to Minify JavaScript with WordPress Plugin

You can also do this with a plugin if you use WordPress. I personally think it is better to limit the amount of plugins your site has (for many reasons including speed), but there are some great plugins that do this job fine. In fact, the plugins are probably the fastest and easiest way to do this for your site. Some great plugins include:

These plugins work pretty much the same way. When you download them, you can choose the options to minify the JavaScript for your website with a few checkpoints. This is a really good guide to do this with the W3 Total Cache plugin. Again, I would suggest you do this process manually, but the plugins do a good job too.

What Does Minify JavaScript Mean?

“Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time”. This quote comes directly from Google, but I am going to break it down a bit more simple.

Browsers need to break down the code for your site to load it properly for users. The more code you have with more spaces, the longer it will take to load. By minify the code, we are not changing the properties, but the way it seems for browsers. We get rid of all the extra spaces, line breaks, and more to simplify the process and improve the load time.

Does a Small Change to Load Time Matter?

Yes!

First, a faster website is good for your audience. The faster a website can load can do wonders for your site and the bottom line. For example, Amazon has been quoted to say that an extra one second to load can cost them over one billion dollars in revenue. A faster load time can also decrease the bounce rate of your site which again can improve other KPI’s for your site since fewer people are leaving.

Second, we can thank Google for saying that site speed is a small ranking reason for SEO. How much of a cause can be tough to prove, but why not take advantage of it? Google wants to see us create a good experience for users, so if we can offer a fast site for users, Google might take that into consideration for ranking in the SERP. In fact, Backlinko released a great article about a test that they did to measure different areas of SEO. Page Speed was one of the factors with sites that load faster on average show up higher in the search results.

Conclusion

This entire process does not take a lot of time to do. In fact, this process can take about 20 minutes of your time to improve the site speed. The faster your site can load should always be something you strive for, so allow Google to tell you where to make the changes and do it!

Looking to make many speed changes for your site? Check out how to speed up your WordPress site.