In the last post we defined the next steps to make our website faster. The first step – to merge JavaScript files together and make them smaller (minify). Also we should remove jQuery duplicate.

Removing JavaScript duplicates

To prepare all data for minify let’s find this duplicate. The first one is inserted by GD Star Rating – line 1274 in the file /wp-content-plugins/gd-star-rating/code/class.php. The second one is inserted by our theme (BasicPress) – line 23 in the file wp-content/themes/basicpress/header.php. As fas as we need this library only once we can safely remove the last call (or just add HTML comments around it – <!-- before this line and --> after).

But there is something wrong – we have our slide show broken. And there is a JavaScript error on the website. It seems our troubles begin with

jQuery.noConflict();

in the file wp-includes/js/jquery/jquery.js (line 20).

It’s dangerous to run jQuery library on unknown system (such a common WordPress blog) without this string (because jQuery function $ can conflict with the same one in Prototype library and others – and we need to encapsulate it). But we don’t have any other libraries except jQuery here (you can check list of JavaScript files for your website with one of the performance testing tool and be sure there is no Prototype, MooTools, or YUI).

OK. We know what is the trouble we are going to resolve it. Just remove this string (and don’t forget to re-create jquery.js.gz file if you are using static gzip). Page size has been reduced by 18 Kb (duplicated jQuery library).

It seems modern WordPress performance optimization tools (we are covering them in this article) should have such feature – to exclude duplicated library and fix possible issues with ‘noConflict’ behavior.

Automatic scripts merging

Manual way (to find all scripts in the head of our blog, merge them and minify) can take too much time so we will review current WordPress plugins to do all this work automatically.

Please note: right now we are working with JavaScript only. CSS is out of scope in this post.

Here we are reviewing current WordPress plugins which can help to merge / mnify JavaScript files / inline code and remove blocking JavaScript.

W3 Total Cache

It was already mentioned as a tool for server side caching). It has an interface for Minify tool. It can be a bit tricky to use it properly (and it doesn’t support dynamic JavaScript files – we have one with GD Star Rating). So let’s try.

After some tuning (this plugin works badly with inline code – it seems it can’t be included into combined file, but this breaks JavaScript logic sequence) we have the following:

W3 Total Cache also doesn’t have any workaround to insert combined JavaScript file after all CSS (to speed up initial page rendering in browser). Not very good.

Script Compressor

This plugin is a bit better. But it also doesn’t have support for inline JavaScript code merging and dynamic files parsing.

Benefits include ability to move merged JavaScript file to the </body> (otherwise it’s moved to </head>). Very smart but useless in our case. Because we have a lot of inline JavaScript code inside document head. And without its merging with the content of external files we can’t safely move our JavaScript somewhere except the very beginning of the page (so all JavaScript chunks of code will have all libraries loaded before any actions are performed).

One more drawback here is that you have to place some code into your templates (theme files). It’s inconvinient – if you want to switch a theme you need not to forget about this code.

Autoptimize

This plugin allows you to make all operations automatically. It doesn’t handle dynamic files but moves all files to </body>. Very good. But… arrh, GD Star Rating is broken because dynamic PHP file requires jQuery library. And it exists (in the file merged by Autoptimize) but is initialized after GD Star Rating file is included. So our rating doesn’t work now . Some drawbacks.

• The placement of this merged JavaScript file can’t be chosen (sometimes we need to place this file into the head section).
• Can’t parse dynamic JavaScript files.
• No option to exclude some files (we can prevent behavior described above with excluding jQuery from merging).

YSlow chart shows also 5 Kb difference from W3 Total Cache.

WEBO Site SpeedUp

Well, let’s try this ‘Swiss knife’ of web performance. It can combine all JavaScript files (no matter static or dynamic ones). Also it handles all online code and minifies it with JSMin (or YUI Compressor if it can be executed on the server side). And of course it has an option to move all merged JavaScript to the bottom of the page.

Now we have only 2 JavaScript files (the second one is Google Analytics library which loads asynchronously and seems to be cached for your visitors because a lot of websites around use it).

Conclusion

But what is actual speedup? Are performed actions worth it? In the previous post we had 55 Kb of JavaScript file (now 39 Kb, 15 Kb – or 27% – have been saved after additional minify and duplications removal). Also we have eliminated 6 HTTP requests to JavaScript files (each request ‘costs’ us about 20 ms) and have moved combined file to </body>. So our page is being rendered faster (for about 400 ms). Overall speedup of page rendering here is 650 ms. Total document speedup wasn’t so significant – only about 250 ms, or 6%.

Also we have reduced size of HTML document (by 0.2 Kb after gzip). But this is too small to be taken into consideration.

Is this valuable? Answer is definitely yes if you are looking to create a high performed website (and because it’s a one more method only, which can be well automated with reviewed tools). And answer is no if you don’t need any specific performance from your website. But it’s your choice.

Related Posts

• January 19, 2010 -- Too many styles? Shrink them! (1)
• March 7, 2010 -- Dynamic CSS / JavaScript files are evil – 8 reasons (4)
• February 2, 2010 -- HTML minify – to be or not to be? (4)
• January 29, 2010 -- Reviewing speedup – from advanced to extreme website acceleration (0)