How To Compress JavaScript Files to Improve Google Pagespeed Optimization Score

This guide details the steps for compressing JavaScript files for the purpose of improving the Google Pagespeed Optimization Score of the pages that the scripts are served on.

Although there are plenty of tools online that can be used for this purpose, when working with many scripts it is often easier to compress them all at once before uploading them to the server instead of having to compress each file individually using an online tool.

What You’ll Need

Google’s Closure Compiler. It is a Java application so it will also require the installation of the Java Runtime Environment.

The Java JRE is available as an executable installation so getting that set up shouldn’t be a problem. The compiler on the other hand is just a zip folder with some files in it:

The folder should be unzipped and placed in any location. Before continuing, the compiler must be renamed from closure-compiler-vxxxxxxxx.jar to just closure-compiler.jar.

 

Opening the Terminal

All of the following steps will involve working with the terminal so the next step is to learn how to open it. To open the terminal, navigate to the folder you will be working in.

Click in the address bar and type “cmd” then press enter.

That should open a terminal at the path of the directory.

Preparing the Compiler

The closure compiler does not have a GUI (graphical user interface) so it can only be used from the terminal. Because some of the commands are really long, it is necessary to create a script that will be used to call the closure compiler.

Open a terminal in the folder containing the compiler using the steps outlined above. Next, type the following into the terminal then press enter: echo 1> minify.bat. That should create the file minify.bat as shown in the image below:

Now, open minify.bat by right-clicking on it and selecting “Edit”. Replace the contents of the file with the following text:

@echo off
if "%2" == "" ( 
 java -jar %~dp0closure-compiler.jar --js %1 --js_output_file %~n1.min%~x1
) else (
 java -jar %~dp0closure-compiler.jar --js %1 --js_output_file %2
)

Save the file “File -> Save” then close the editor as well as the terminal window.

Preparing the Terminal

Open a new terminal in the folder containing your scripts, again using the steps outlined above. You will be using minify.bat from the previous step to compress the JavaScript files so the location of minify.bat needs to be communicated to the terminal.

Go back to the folder containing the compiler and copy the path to the folder from the address bar:

Clicking in the address bar then pressing Ctrl+C should be sufficient. If the address bar still contains the previous commands (or the path to cmd.exe), erase all of that text using backspace then click anywhere outside of the address bar; that should reset it. Click in it once more then copy the path.

Now type the following command into the recently opened terminal and replace <compiler-path> with the path of the compiler folder: set PATH=%PATH%;<compiler-path> then press enter.

When pasting the path into the terminal, right-click and select “Paste” as the terminal does not support Ctrl+V. The terminal will now know where to find minify.bat.

Compressing Scripts

To compress a script, type the following command and replace <script-name> with the name of the script: minify <script-name> then press enter.

This should create the minified file with the appropriate name. Note the reduced size of the file.

It is also possible to specify the name of the minified file as a second argument when using the command:

Beware that any files that are overwritten using this process cannot be recovered so be careful not to set an output file name that is the same as an existing file in the directory unless it is the desired effect.

Tip: When using the terminal, pressing the up and down keys on the keyboard will recall previous commands. Furthermore, pressing tab will cycle through all of the files in the current directory, making it easier to include the name of a file in a command; this also works when used after typing the first few characters of a file name.

Conclusion

The methods described in this + my previous post are normally enough to get me to 80+ for the optimization score so I normally apply them to every website I make, just in case it does improve page ranking.

End.

Leave a Reply

Your email address will not be published. Required fields are marked *