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 CSS files (Must know)

In this recipe we will learn how to merge all CSS files that are present in your Magento.

How to do it...

First, we will merge all CSS files together. In order to do it, go to your backend and then navigate to System | Configuration | Advanced | Developer| CSS Settings.

You just have to turn on the Merge CSS Files setting and save your settings in the top-right corner. The following table shows you the difference after the previous change, that is, after CSS merging. For every single change in your Magento configuration, we will provide a similar table.



Load time


CSS (before)


107 milliseconds

100.6 KB

CSS (after)


73 milliseconds

110.6 KB

As you can see, it's not marvellous but it is the beginning of optimization, and any load time or requests you obtain are beneficial.

How it works...

The functioning principle of this basic option is very simple. Basically, the Magento core is able to find and merge together all CSS files discovered in your website. This technique reduces the number of requests by the previous number of CSS files.

There's more...

In this section, we will show you how to go beyond the simple check-and-save settings shown previously. Indeed, you can format your CSS files manually to obtain better performance.

CSS compression

When you write your cascading stylesheet, you certainly put the following syntax into a priority list:

/* Headings */
h4,h5,h6      { margin:0 0 5px; line-height:1.35; }
h1            { font-size:20px; font-weight:normal; }
h2            { font-size:18px; font-weight:normal; }
h3            { font-size:16px; font-weight:bold; }
h4            { font-size:14px; font-weight:bold; }
h5            { font-size:12px; font-weight:bold; }
h6            { font-size:11px; font-weight:bold; }

Believe it or not, this bunch of code can be optimized a lot. Of course, the optimization comes with a total destruction of readability, as shown in the following code snippet:

h1{font-size:20px;font-weight:400}h1,h2,h3,h4,h5,h6{color:#0a263c;line-height:1.35;margin:0 0 5px}h2{font-size:18px;font-weight:400}h3{font-size:16px;font-weight:700}h4{font-size:14px;font-weight:700}h5{font-size:12px;font-weight:700}h6{font-size:11px;font-weight:700}

Using this way of coding, we have optimized our CSS file by 36.22 percent (67 characters less). To do it you have to sort selectors and properties and compress colors and font weight. When it's done, you have to remove all backslashes, spaces, and new lines.

The good news is that you don't need to do it by hand. There's an excellent website that can do it for you: