In this recipe, we will use algorithms that are able to compress and uncompress textual data, such as the HTML code behind our web pages.
In this recipe, we will compress our web pages by almost 80 percent. To do this, find the file named .htaccess
in the root directory of your Magento installation and open it with your favorite text editor. Remove the sharp at line 52 so it looks like the following:
When it's done, go to line 74 and find the block belonging to mod_deflate.c
. Then remove the sharps at lines 81, 86, 89, 92, 95, and 98 so that it looks like the following:
Find the file named php.ini.sample
in the root directory of Magento and rename it to php.ini
; then remove the comma at line 19.
The previous size of our HTML file was 25.16 KB and it has folded to 4.37 KB with these manipulations. You can check what the compression offers you by visiting this website: http://www.gidnetwork.com/tools/gzip-test.php. However, the total weight of our home page was 713.4 KB; so the compression of HTML files is not so significant in comparison with the total weight.
The total weight is divided into four parts. There is the JavaScript of 360 KB, the CSS of 100 KB, the HTML of 25.16 KB before compression, and images of 218.2 KB. From the perspective of a computer, HTML, JavaScript, and CSS are very similar: they are just bunches of text. So, with a few more steps we will be able to compress our JavaScript and our CSS in the same way as HTML.
With JavaScript and CSS compression still enabled, perform the following steps:
Create a file named info.php
that contains <?php phpinfo(); ?|
Upload this new file (info.php
) to your web server and browse to the file. When the page is fully loaded, search for DOCUMENT_ROOT
. This value is the exact path of your server, and it can be tricky to find the path on a shared hosting environment.
Create a file named php.ini
that contains the following lines of code:
Upload the newly created file, php.ini
, in MAGENTO_HOME/media/css/
and in MAGENTO_HOME/media/js/
.
Create a file named gzip.php
that contains the following lines of code:
Check if it works!
Browse back to http://www.gidnetwork.com/tools/gzip-test.php and test the direct address of your CSS files and JavaScript files. In theory, your files should be compressed and a new line with the filename should appear as the first line of your CSS and JavaScript files. If they are not compressed, reopen your .htaccess
file in the root directory of Magento and add the following line of code at the top:
This line can totally mess up your CSS; therefore, we add the following line just after the previous line:
It's done! Let's have a look at the performance after compressing all of your content:
As before, the total weight is divided into four parts but the percentages have changed. Now JavaScript stands for 85.8 KB, the CSS for 21 KB, the HTML for 4.37 KB, and the images for 218.2 KB. We've just found a way to compress our web pages by 54 percent, and as a result optimize the overall load time.