Book Image

Instant Magento Performance Optimization How-to

By : Nayrolles Mathieu (USD), Mathieu Nayrolles
Book Image

Instant Magento Performance Optimization How-to

By: Nayrolles Mathieu (USD), Mathieu Nayrolles

Overview of this book

The optimization of an attractive commercial website is a non-trivial task that demands time and knowledge. Optimization is a critical point for all growing businesses because a misconfiguration could make you lose money, a lot of money. If your server is overloaded, a browser that wants to turn into a buyer will not be able to, and you will lose customers. "Instant Magento Performance Optimization How-To" is a practical, hands-on guide that provides you with a number of clear, step-by-step exercises to help you reach a high performance level for your Magento stores and keep your customers satisfied.This book looks at tweaks and tips used to boost your Magento Performance, and breaks down the confusion that surrounds the subject.You will learn how to compress your pages, styles, and scripts by almost 80%. We will also take a look at controversial optimization settings such as Magento core compilation or enabling all caching systems. You will discover new applications that improve performance. If you wish your e-businesses to grow and want to keep your customers satisfied, you definitely need this book.
Table of Contents (7 chapters)

Merging JavaScript (Must know)


In the same way as CSS, we can merge all JavaScript files in our Magento.

How to do it...

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.

How it works...

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.

There's more...

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.

Simple JavaScript compression

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.

Base 62 JavaScript compression

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.

Including other libraries

There are some known issues when you use JavaScript merging and other JavaScript libraries ,such as jQuery integrated in Magento. Most of the time the issues come from bad integration.