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.
If you host your Magento website on a dedicated server and you have all of the rights on your web server, just locate your php.ini and make sure you have the following line:
Zlib.output_compression on
If your host is shared it will be a bit of a challenge, but it's still possible!
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:
## enable resulting html compression
php_flag zlib.output_compression onWhen 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:
<IfModule mod_deflate.c>
# Insert filter on all content
SetOutputFilter DEFLATE
# Insert filter on selected content types only
#AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>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.
; enable resulting html compression zlib.output_compression = on
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.phpthat 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 forDOCUMENT_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.inithat contains the following lines of code:zlib.output_compression=1 auto_prepend_file=VALUE_FROM_STEP_ONE/media/gzip.php
Upload the newly created file,
php.ini, inMAGENTO_HOME/media/css/and inMAGENTO_HOME/media/js/.Create a file named
gzip.phpthat contains the following lines of code:<?php if (isset($_SERVER['SCRIPT_FILENAME'])) { echo "/*".$_SERVER['SCRIPT_FILENAME']."*/"; $timestamp = filemtime(__FILE__); header('Last-Modified: ' . $timestamp); $expires = 60*60*24*14; header("Pragma: public"); header("Cache-Control: maxage=".$expires); header('Expires:'.gmdate('D,d M Y H:i:s',time()+$expires).'GMT'); header('Vary: Accept-Encoding'); $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); $extension = $pathinfo['extension']; if ($extension == 'css') { header('Content-type: text/css'); } if ($extension == 'js') { header('Content-type: text/javascript'); } }?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:
AddType x-mapp-php5 .php .shtml .html .htm .txt .js .css
This line can totally mess up your CSS; therefore, we add the following line just after the previous line:
RemoveHandler .css
It's done! Let's have a look at the performance after compressing all of your content:
|
Type |
Requests |
Load time |
Size (KB) |
|---|---|---|---|
|
CSS |
1 |
35 milliseconds |
110.6 |
|
CSS compressed |
1 |
30 milliseconds |
21 |
|
JS |
1 |
62 milliseconds |
360 |
|
JS compressed |
1 |
50 milliseconds |
85.8 |
|
Overall |
35 |
1.12 seconds |
713.4 |
|
Overall compressed |
35 |
993 milliseconds |
330.3 |
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.
gzip is a GNU project used (initiated in 1992) for compression and decompression. It's based on the DEFLATE algorithm and enables compressing textual data, such as HTML, CSS, and JavaScript by 80 percent. A common misconception is that compressing textual data when the customer requests it will slow down the server. Indeed, it does take CPU time to do the compression, but the result is that your server runs with notably less data and reduces the CPU load.