Combine and minify Javascript, reduce number of HTTP requests

Do you remember when I posted about combining stylesheets in order to reduce the number of HTTP requests? Well, a similar thing is possible with external Javascript files, which can improve website loading speed for your visitors. Here, I will relate my experience in achieving this. As you might expect, I have utilized this technique within WordPress, but you can apply it elsewhere.

If you are concerned about website loading speed, you have probably come across Y!Slow, Firebug and many of the other web developer tools out there that assist users in diagnosing which components of their web pages are cause for slowdowns. The very first recommendation at the top of Yahoo!’s Best Practices for Speeding Up Your Website is to reduce the number of HTTP requests for your visitors. It does not matter how good the content might be on a page; if it takes too long to load you are going to lose visitors who have already struck the ‘BACK’ button after waiting 10 seconds!

A. Let’s get started

This technique is quite basic and logical. The situation is that we have several calls to external Javascript files within our HTML’s header, which means several HTTP requests from the client’s browser. How do we approach reducing all these HTTP requests?

1. Combine them so that there is at least only one call to an external Javascript file,
2. Avoid breaking any Javascript-dependent functionality on the web page,
3. Minify the Javascript to save on bandwidth

Before we get our hands dirty, however, we need to do a bit of homework first. This is essential for addressing point number 2.

B. Observe your current Javascript reference order

Launch your favourite text editor and make a note of the order in which the Javascript references are made. Write down the Javascript file names in order and their respective locations. The reason for doing this is to avoid breaking Javascript functionality on the web page. Some scripts need to be loaded before others in order to work properly, so maintaining this order is important for the final combined file.

Sample Javascript reference within HTML head before combining.

C. Copy/paste all scripts into a single .js file

1. Locate the first Javascript file in the sequence. Open the file in your favourite text editor and copy/paste the code into a new text document. We will call the new document combined.js for now.
2. Use comment notation in order to keep track of the scripts you are including in the combined file.
3. Locate the other Javascript files in the sequence and include their code within combined.js, while remembering to keep them in order.
4. Save the new document and upload it to your web server.

Combined Javascript within a simple text editor.

For additional optimization, you may want to minify the copied Javascript before pasting it into combined.js. Minifying is another way of saying compressing. My favourite online tool for doing this is the Javascript CompressorRater. Simply insert the Javascript you wish to compress and let the compressors do the rest!

Here are some tips on using Javascript compressors in this case where we are also combining multiple scripts:

• Try to stick with the compressed output of a single compressor for all those scripts included in combined.js,
• I find that the JSMin compressor (no options) produces a small output that is less likely to break scripts,
• Do not jump to utilize the most-compressed output. Sometimes this is done at the expense of stripping a bit of code, which could be critical for functionality,
• Do not compress the entire combined.js file! Only compress the individual scripts before pasting the output into combined.js,
• Some Javascript libraries come pre-compressed so you should not attempt to compress any further.

D. Test and implement

All that is left to do now is to test how the combined Javascript file works. Create a backup of your web page’s HTML first then remove the Javascript references. Replace with a source call to combined.js. Remember to verify the file path. After saving the HTML and re-uploading it to the server, try loading the relevant page within your web browser. Does everything work properly?

Sample Javascript reference within HTML head after combining.

E. Troubleshoot when there is loss of functionality

If any functionality is lost after implementing the combined Javascript file you will need to go back and recheck that you did everything correctly. Sometimes the problem can be attributed to the Javascript compression that was applied.

F. Limitations of this technique

This technique has a few limitations that you should be aware of prior to implementation. Firstly, there is the inconvenience of having to manually update the scripts each time an update is released, unless if you have another script that automatically downloads and combines updates as they are released. Secondly, do not attempt to combine Javascript located within the HTML’s head and before the closing body tag. Yes, it reduces the number of HTTP requests, but you are forced to place the combined Javascript call into the HTML’s head, which can make for unnecessarily large scripts that slow down overall page loading. In this scenario, the best solution may be to keep the combined files separate.

Thanks for reading and please share your comments.

About these ads