In this recipe we will learn how to merge all CSS files that are present in your Magento.
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.
|
Type |
Requests |
Load time |
Size |
|---|---|---|---|
|
CSS (before) |
3 |
107 milliseconds |
100.6 KB |
|
CSS (after) |
1 |
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.
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.
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.
When you write your cascading stylesheet, you certainly put the following syntax into a priority list:
/* Headings */
h1,h2,h3,
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: http://compressmycode.com.