Optimize website by compress to speed it up and reduce bandwidth usage

There are serial ways that let you compress your webpages (using gzip). What benefit can we get from this? Compress webpages could help you reduce bandwidth and loading time. In fact, using gzip to compress webpage can save 50-70% resource as follows:

  • Large HTML Document orginal size: 56380 bytes.
    • After compressed with mod_gzip (apache 1.3), the file size become 16333 bytes (29% of orginal size).
    • After compressed with mod_deflate (apache 2.2), the file size become 19898 bytes (35% of orginal size).
  • Postscript file orginal size: 63451 bytes.
    • After compressed with mode_gzip (apache 1.3), the file size become 19758 bytes (31% orginal size).
    • After compressed with mod_deflate (apache 2.2), the file size become 23407 bytes (37% orginal size).

What we need to do that? Client's browsers must support gzip encoding (almost all browser support gzip right now), and a little bit CPU resources for encoding and decoding. It will be very little bit CPU usages if we cache the responses properly. Now, how to do that on your share hosting.

First of all, If you are using apache (at least 2.2 version) you can think about mod_defalte, it is one of easiest solutions. Just add this code to your .htaccess

  1. <IfModule mod_deflate.c>
  2.         # compress text, html, javascript, css, xml:
  3.         AddOutputFilterByType DEFLATE text/plain
  4.         AddOutputFilterByType DEFLATE text/html
  5.         AddOutputFilterByType DEFLATE text/xml
  6.         AddOutputFilterByType DEFLATE text/css
  7.         AddOutputFilterByType DEFLATE application/xml
  8.         AddOutputFilterByType DEFLATE application/xhtml+xml
  9.         AddOutputFilterByType DEFLATE application/rss+xml
  10.         AddOutputFilterByType DEFLATE application/javascript
  11.         AddOutputFilterByType DEFLATE application/x-javascript
  12. </IfModule>
Hide/show line number

The code above tell apache to compress the special webpage type automatically! Apache will check if browser support gzip encoding through the header Accept-encoding and coder don't need to do anything more!

In additions, we can add DEFLATE module to special file extension as follows:

  1. <files .html="">
  2. SetOutputFilter DEFLATE
  3. </files>
Hide/show line number

Node: some case, we want to compress all except some file types (such as mp3, jpg because it already have its own compressing type), this code below could do that:

  1. SetOutputFilter DEFLATE
  2. SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
  3. SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
  4. SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
  5. SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary
  6. SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary
  7. SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
  8. SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary
  9. SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary
Hide/show line number

Second, this is another solution for anyone can not use the first solution (because of older apache version or server doesn't supporting), and only accept to php webpages. Easyly, just add this code below at begining of webpage, it tell php to gzip the file's output buffer.

Or the same function with:

Note: Someone tell me that ob_gzhandler doesn't work!

Another point worth talking is that when we are using the second solution to compress php webpages, what should we do to compress another file types? Of couse, we can using php functions to read another file type and output in gzip compression! For the best performmace, we could cache or prepaire a gz (gzip compression file extension) files, this let apache do not need to compress the same file repeatedly, the php file only read from that gz file.

If we have a static file (such as css or js file) and we don't need to dynamic generate gz version of it. We can use mod_rewrite in .htaccess instead of php. This is which solution Drupal 7 has choosen. They generate the gz version of the css and js file for first time (they also aggregrade all css or js file into one first). Example from Drupal:

  1. <IfModule mod_rewrite.c>
  2.         <IfModule mod_headers.c>
  3.                 # Serve gzip compressed CSS files if they exist and the client accepts gzip.
  4.                 RewriteCond %{HTTP:Accept-encoding} gzip
  5.                 RewriteCond %{REQUEST_FILENAME}\.gz -s
  6.                 RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
  7.  
  8.                 # Serve gzip compressed JS files if they exist and the client accepts gzip.
  9.                 RewriteCond %{HTTP:Accept-encoding} gzip
  10.                 RewriteCond %{REQUEST_FILENAME}\.gz -s
  11.                 RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
  12.  
  13.                 # Serve correct content types, and prevent mod_deflate double gzip.
  14.                 RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1]
  15.                 RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1]
  16.         </IfModule>
  17. </IfModule>
Hide/show line number

Above code also let apache do not re-compress the gz file by the last two row. And remember, if using this solution, we must check if browser support gzip compression by this line: RewriteCond %{REQUEST_FILENAME}\.gz -s. When client's browser do not support compression or there isn't any equivalent gz file exists, this code will response the orginal file.

Finally, how to check your results? Is your webpage have compressed successfully, we propose two online checking tools below:

The result from gidnetwork will look like:

  • Web page compressed?: Yes
  • Compression type?: gzip
  • Size, Markup (bytes): 24,938
  • Size, Compressed (bytes): 5,257
  • Compression: 78.9%

It's mean that we save about 80% bandwidth for our website. Two proposal online tool that check only the url inputted by you, so try to check other files included in your webpages by input it's urls into these tools.