HTTP Compression. Does it Make a Difference for Website Speed?

HTTP Compression?

HTTP compression is a capability that can be built into Web servers and browsers to make better use of available bandwidth, and provide faster transmission speeds between both. The most common compression are gzip and deflate. More from Wikipedia…

HTTP Compression saves bandwidth usage and may speed up a Website loading time by reducing the amount of data sent. The user requests a Web page, then the server compresses the page and transfers it to the user´s browser. On the user´s side, the file is being decompressed and visualized.

Compression algorithms trade time for space by pre-processing files to create a smaller version. Compressed files are then decompressed to reconstruct the original. The compression process includes two components: encoding and decoding. Encoding compresses the data, while decoding decompresses the data, usually at a faster rate. The cost of compression is certainly not zero, it does take a little CPU to do the compression, but the result is that your Web server is handling significantly less data. All modern browsers support compressed content.

No question that HTTP compression saves bandwidth usage, but does compression speeds up your Website´s load time? NOT for this Blog…

Configuring the Server

Configuring the server to use HTTP compression depends on the type of the server type hosting your Website. This article covers the following Web servers:

  1. Apache servers on Linux.
  2. Windows IIS servers.

Compression for Apache Servers

There are Two ways to setup Compression on Apache servers. You could:

  1. Use the cPanel.
  2. OR add the code in the .htaccess file.

Option1: Set up Compression using cPanel on Apache Servers

To compress your Website files on the server, you will need to log in to your cPanel account and then under "Software/Services" click on "Optimize Website". This will allow you to compress the content before sending it to the user´s browser. The types of content to be compressed are specified by MIME type on that page.

Image showing the Optimize Website feature in cPanel for Apache servers.

Some MIME types include: text/html, text/plain, text/xml, text/css, text/javascript, application/javascript, application/x-javascript, application/xhtml+xml, application/xml, application/rss+xml, …

I want to emphasize that these are general guidelines and they might not work for your specific Web server, or your Web host company might have a different control panel.

Option2: Set up Compression using “.htaccess” file in Apache Server

Your two options for file compression are Deflate and Gzip. Deflate is an option which is built in with the Apache server and is simple to set up but less reliable than mod_gzip. Gzip on the other hand is an external module that requires a more work to install. However, gzip does achieve a higher compression rate and therefore might be a better choice if your Website has large file sizes.

On the other hand, if your Website has a lot of traffic, deflate is actually a better option because it requires much less CPU to compress files. Again here are your 2 compression options for Apache HTTP server:

  1. mod_deflate
  2. mod_gzip

The .htaccess is the Apache´s directory-level configuration invisible file that allows you to manipulate the behavior of the Web server.

The .htaccess can contain all kinds of directives for the Apache server. To create an .htaccess file, open any text editor like Notepad or Notepad++, name it .htaccess (there is no extension).

If you already have an .htaccess file on your server, download it to your computer and edit it with your favorite text editor.

Now open or create your .htaccess file and type the following code (choose part1 or part2):

#part1 of the code: 
<IfModule mod_deflate.c>
#Compress all .txt and html files:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html

#Compress all .xml files:
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

#Compress all .css and javascript files:
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

#part2 of the code: 
#OR you could only compress certain file types using
#the FilesMatch and SetOutputFilter directives 
#Code targeting files ending in .html, .js or .css
<IfModule mod_deflate.c>
<FilesMatch "\.(html|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Once you are done with your changes, upload the .htaccess to the root directory of your Website.

Besides the cPanel, and since mod_gzip is not an Apache native but an external module, I only know of one way how to implement gzip compression: by using PHP code to return compressed content. If your Website is dynamic with .php extension, then include the following code in the header of every page. This code is dependent on the mod_gzip module already installed on your Apache server.

// Enable gzip compression in PHP:
<?php 
//check Accept-encoding header if it accepts gzip 
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') { 	
	 ob_start("ob_gzhandler"); //return a gzipped version. 
} else {
     ob_start(); //do nothing, return regular version.
} 
?>

Two more references I would like to share with you for this section:

  1. mod_gzip – Helicon Ape
  2. Enable file compression using mod_gzip

If you know another way to integrate mod_gzip compression, please add it in the comment section.

Compression for Windows IIS Servers

Set up Compression on Windows Servers using Helm Control Panel

If your Website is running on a Windows server, the only way, that I know of, setting up the HTTP compression on IIS servers is by asking your Web host customer support. For more information about enabling compression for IIS7 or for IIS6.

Verify your Compression

Once you have configured the server, the next logical step is to make sure you are actually serving up compressed content. The following 3 images show 3 different ways to do that:

The images above show, when compression is implemented, a significant reduction in file size and thus reduction in bandwidth. But does that translate to a faster Website load time? The next sections will show that compression did not improve this Blog´s download time.

YSlow and Page Speed Before and After Compression

The following table shows Yahoo! Yslow and Google Page Speed results before and after compression has been applied to this Blog.

Summary of Results
  Yahoo! YSlow Google Page Speed
BEFORE Compression Grade A – Score=92
see PDF file.
Score = 78/100
see PDF file.
AFTER Compression Grade A – Score=93
see PDF file.
Score = 80/100
see PDF file.

Note that HTTP compression was not applied to JavaScript external files. Also Google and Yahoo have different scores, they use somewhat different methods to calculate the overall performance of the Web page. Compressing this Blog added little value, an improvement of 1 to 2 points.

Does HTTP Compression Speed up Your Website?

To answer this question, I used two online tools: WebWait and WebPagetest. I tested this blog´s main page download time BEFORE and AFTER applying compression. The results are shown in the following 4 images:

Webwait baseline test results. My Blog´s download speed BEFORE compression. There is a 20 sec delay between each run.

Webwait – Baseline test results. My Blog download speed BEFORE compression.
Average load time after 15 runs = 15.97 sec

Webwait test results. My Blog´s download speed AFTER http compression. There is a 20 sec delay between each run.

Webwait – Test results. My Blog´s download speed AFTER compression.
Average load time after 15 runs = 15.93 sec (0% improvement)

WebPagetest results. My Blog´s download speed AFTER compression .

WebPagetest Complete Data – My Blog´s download speed AFTER compression.
Average load time after 10 runs = 18.79 sec (0% improvement)

From the results above, the improvement of this blog´s download time is NOTHING. This is a surprising fact that compression did not make any difference for this blog´ download speed even though the blog´s score has slightly improved in Yahoo! YSlow and Google Page Speed. I am sure that results for other Websites will probably make much bigger of a difference. I will leave that up to you sharing your experience in the comment section. The fact remains that sometimes HTTP Compression will NOT improve performance.

ALL images in this Blog have been optimized using mostly the Image Optimizer tool. For very few images I used the Smush.It tool. The size of most of the images are already reduced by about 80%, very few of them are reduced by about 30%. Image optimization is an important factor in improving Website load time.

Already Compressed Content

Servers choose what to gzip based on file type. Most Websites gzip HTML documents. It is also worthwhile to gzip JavaScript and CSS files. Images and PDF files should not be compressed because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.

Looking at the Web developer add-on´s results in Mozilla. HTTP compression did reduce the size of the document and CSS files quite nicely (improvement by about 73%), but nothing for the JavaScript external files. So for the total document, the improvement was in the range of 12 to 25%. Now it is clear why compression did not help speed up the download time for this blog. The next 2 images will shed some light.

Image1 showing that this Blog is compressed. From your browser, after the Web Developer add-on for Firefox is installed, go to Web Developer Toolbar > Information > View Document Size.

Image2 showing that this Blog is compressed. From your browser, after the Web Developer add-on for Firefox is installed, go to Web Developer Toolbar > Information > View Document Size.

You probably noticed that my Blog is slow; I will discuss how to dramatically speed up the download time, for better user experience, in my next article.

Related Reading

  1. 14 Tips for Maximum WordPress Performance & Speed
  2. 18+ Essential Tips to Dramatically Improve Website Speed
  3. Caching a Dynamic Website. Does it Make a Difference for Loading Speed?
  4. How to Delete and Limit Post Revisions in WordPress

If you enjoyed this post, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

2 Responses to “HTTP Compression. Does it Make a Difference for Website Speed?”

  1. Adrien K. says:

    I really like your article. Well done. Thanks!

  2. toolspot says:

    Tool to check http compression for your website: http://toolspot.org/http_compression.php