In the same way as CSS, we can merge all JavaScript files in our Magento.
In order to merge your JavaScript files, you have to open your Magento backend and go to System | Configuration | Advanced | Developer | JavaScript Settings.
Just as for the CSS settings, you have to turn this option on and save your settings in the top-right corner. The following table shows you the difference after the JavaScript merging is done.
Type |
Requests |
Load time |
Size |
---|---|---|---|
JS (before) |
13 |
742 milliseconds |
363.4 KB |
JS (after) |
1 |
148 milliseconds |
359.9 KB |
The overall size is somewhat similar, but the number of requests is now only one and the load time has been reduced by more than half a second. Remember, the overall load time was 2.58 seconds, so this improvement is really significant.
The Magento core is able to find and merge all the JavaScript files present in your installation. By reducing the number of files to retrieve you considerably lower the load time, even if the overall size is quite the same.
Once again, you can definitely improve your performance by doing a little by hand. In this section, you will learn how to compress your JavaScript files.
Analogous to a cascading stylesheet, JavaScript can be compressed by removing spaces, backslashes, and new lines.
function displayDate() { document.getElementById("demo").innerHTML=Date(); } displayDate(){document.getElemById("demo").innerHTML=Date()}
The file has been reduced by 5 characters which means 6.49 percent saved. On a very large JavaScript file, such as libraries, this will be very effective.
The base 62 is a positional notation. A positional notation is a method of representing encoded numbers and it can be used to represent a very long test by a shorter version. Using the base 62 will reduce the time to download the file but will add an extra step before the customer can use it. Indeed, the client has to decode the encoded JavaScript. The previous function in base 62 is equal to the following function:
eval(function(p,a,c,k,e,r){e=String;if[…]))
For the sake of readability, we will not put the whole of base 62 encoding here. But, before applying this technique to your JavaScript files, you have to compare the reduction in time for downloading the script to the extra time taken to execute it.