BAC Software Consulting Blog

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

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.

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.
} 
?>

A reference I would like to share with you for this section:

  1. mod_gzip – Helicon Ape

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.

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.

Creating a Mobile Friendly Website: How to “Mobilize” your Website

A “mobile-friendly” Website offers content without clutter and is easily viewable on mobile devices. Creating a mobile-friendly website has become crucial if you desire a presence on the mobile web. With more people browsing the internet from their mobile devices, it is important to make your website accessible to these users. If your business relies on the internet to generate revenue, then it is critical that you make adjustments to accommodate mobile customers.

A website displayed on a computer screen is not the same as a website displayed on a mobile device. There are, to name few: layout issues, navigation problems, and design issues. If you begin with a valid HTML code that is written with clean, logical markup, then you are ahead of the game. A well structured code with clear organization and semantic markup will display cleanly, is usable and accessible on any device; including mobiles.

Web developers may take few steps to optimize their website for mobile devices. These steps include:

  1. Create a separate CSS style sheet for mobile devices (media type handheld). Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile devices.
  2. Reduce the number of round-trip requests to your server and the amount of data transferred.
  3. Resize and compress images for the small screen to ensure fast page loading.
  4. Design the website to work for mobile devices: provide large clickable features and short links that are easy to type. Make sure the content is clear and concise. Design with a small screen in mind. While computer screens are getting bigger, mobile screens are not.
  5. Provide clear and concise navigation. Remove internal links that are not useful for mobile users.
  6. Optimize the website to have fast-loading pages.
  7. Minify your code. The less file size, the faster your page will load.
  8. Remove needless components: widgets, plugins and add-ons may slow down the website´s loading time and may not even work at all on old mobile devices.
  9. Eliminate link redirects.
  10. Rethink your content. Mobile users want useful information quickly.
  11. Think Vertical: organize content with mobile consumption in mind. Structure your website so that content and pictures are organized vertically, with pictures on top of articles. Content should be displayed in a one-column format.
  12. Eliminate any unnecessary images.
  13. Where possible Use CSS3 instead of images. HTML5 browsers that support CSS3 (like Android, Mobile Safari) can use attributes for gradients, rounded corners, shadows and text transformations.
  14. Take advantage of new features in HTML: use HTML5 and CSS3 when possible.
  15. Plan for the lowest common denominator. For example, Flash and JavaScript are not widely supported by many mobile devices. So it is best to leave them out.
  16. Use Fluid/Liquid design: use relative measures like percentage (%) and em units. Avoid using pixels.
  17. Eliminate frames: frames should not be used to start with.
  18. Eliminate popups in favor of plain HTML.
  19. Eliminate nested tables and layout tables. If you have tabular data, consider another way to present the data in a linearized display.
  20. Reduce margins, paddings and borders to fit the small screen.
  21. Use smaller font sizes.
  22. Keep it simple. Limit the need for user input and minimize user clicks.
  23. Use Java instead of Flash. Java is the most commonly used platform for mobile website development.
  24. If you have a long navigation list at the start of the page, move the links to the end of the document flow.
  25. Chose color combinations that provide good contrast, particularly for devices with fewer color options.
  26. Last but not the least, extensively test your mobile-friendly website on multiple devices – including, if possible, actual devices and mobile simulators. In the same way a regular website face testing, mobile versions of websites require testing and validation.
  27. If you have Adobe Dreamweaver installed on your computer, you can preview mobile content with Adobe Device Central. Adobe Device Central uses skins for dozens of mobile devices to display your content in various ways. The preview can give you a good impression of how content will look and behave on selected devices.

In conlusion, the need for mobile websites will continue to grow. Don´t let your business lag behind with an unfriendly website that is useless to your mobile customers.