After working with CSS and images, we are going to focus on the Javascript of the theme. iNove load 2 or 3 JavaScript files on every page.
- base.js ( 2 565 bytes)
- comment.js ( 2 210 bytes)
- menu.js (4 819)
Again, we are not going to look inside the code to improve it. We are going to make change on the JavaScript.
Before you start, make sur that you have a backup of every files you are going to edit.
Optimization of the JavaScript file
The content of the file isn’t optimize : the JavaScript is store in several files, in a human readable format not optimized for performance.
To change it, we are going to use a free, online tools : the Google Closure compiler
Just go on the website and copy paste the content of one of your JavaScript file in it. A new version of your code is going to appear, with errors and warnings if it the programme found some. Variables are renamed, space removed, … changed are powerful and make the script impossible to read ( and understand) so keep a backup of your code !
The decrease in size can be huge. For the 3 files of iNove, we got :
google closure compiler results
Decrease the number of files
Now that we have optimized the JavaScript, why we keep 3 files ? Everything can be load in only one file. This file is going to be bigger, but with the optimization it is going faster to load one “big file” instead of 3 small. It is not always the case, so doing some benchmark can be a good idea.
To do that we need to edit the theme PHP files to find where the author added link to the files.
But, what if we integrate directly the code in the theme file, as we did for the CSS ? But this time we have to put it at the bottom of the page. So let’s edit the footer.php file of the theme. Just before the closing body tag, add a and put the output of the google closure compiler in it.
Next, we have to remove the link of file. Most of the time it is in header.php.
Be careful sometimes, by moving the JavaScript from the top to the bottom, you are going to break some functionality. So in this case, it is better to add the script tag directly in the header.
Again same problems with this technique : it is static, and make the content of the file almost impossible to edit.