Falcon1986-Online

Home of a med student who likes to manage websites and talk tech!

Combine and minify Javascript, reduce number of HTTP requests

with 26 comments

Combine JavascriptDo 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.

Javascript within HTML

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

Combined Javascript within a simple text editor.

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?

Javascript within HTML

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

Written by falcon1986

11 January, 2010 at 1:51 AM

Posted in Web Development

Tagged with , ,

26 Responses

Subscribe to comments with RSS.

  1. First off, many thanks for your invaluable insight. Second, my site is running wp 3. engine on a shared hosting platform. Third, I have combined 27 js files into a SINGLE “combined.js” file. Issue is: Given that ALL 27 different js files have different folders NOW combined into ONE (combined.js) How do I upload the “Combined.js”n to my webserver? I don’t understand the ‘file path thing’ and how to make my wordpress engine read the new “combined.js”. For example, you mentioned “Remember to verify the file path.” Please could you provide a step-by-guide on how to “….verify the file path.”?
    A step-step guide would be highly appreciated as it would help DUMMIES like me know EXACTLY what to do :)

    Albert Jinger

    18 January, 2013 at 4:51 AM

    • Congratulations on trying to improve your page loading times for visitors. However, this post is a little dated and while the general concept is still sound and applicable today, it may be a stretch to combine 27 different Javascript files into one. First of all, your .js file is going to be pretty large and secondly, you might not need to load all of these scripts on every single page.

      You need to address something else here: Why does your website require so much Javascript to run? Rethink the necessity of some of your plugins and features. If some are not necessary, then do away with them. Additionally, in some cases, it might be better to create separate combined .js files to be downloaded in parallel from a CDN, for example.

      Now, to your question: The last screenshot above shows the code with a reference to ‘combined.js’ as the source. It is referenced here as a relative path, but you can use an absolute path reference if you want to reflect where you uploaded the ‘combined.js’ file. For example, ‘src=”http://www.yoursite.com/combined.js”‘.

      I should add that I have not mentioned how you turn off your original single Javascript calls in your WordPress header. That is a bit more tedious to do, but you’ll need to do that in order to test your ‘combined.js’.

      falcon1986

      9 February, 2013 at 10:57 AM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: