|

Page Speed: Enable gzip compression More Recommendations

Rule Summary

Server
High
Easy
78%

Overview

Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.

  • Reduce sizes of pages by up to 70%
  • Increase page speed
  • Cost-benefit ratio: high
  • Access needed to the .htaccess files or server administration files

How does your site score on this rule?

What is gzip compression?

When a user hits your website a call is made to your server to deliver the requested files.

The bigger these files are the longer it's going to take for them to get to your browser and appear on the screen.

Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don't have it setup already.

How does it work?

Gzip is actually a fairly simple idea that is extremely power when put to good use. Gzip locates similar strings within a text file and replaces those strings temporarily to make the overall file size smaller.

The reason gzip works so well in a web environment is because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%!

Gzip has to be enabled on your webserver which is relatively straight forward.

When a browser visits a webserver it checks to see if the server has gzip enabled and requests the webpage. If it's enabled it receives the gzip file which is significantly smaller and if it isn't, it still receives the page, only the uncompressed version which is much larger.

Why Is It Important

The main reason it is important is because it reduces the time it takes for a website to transfer the page files and style sheets which ultimately reduces the load time of your website.

How To Add Gzip

There are different methods of setting up gzip compression depending on whether or not you've got an IIS or Apache server (or something else entirely).

For IIS

If your server is IIS, follow these instructions in the Microsoft TechNet document to enable compression.

http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx

For Apache

You will need to add the following lines to your .htaccess file:

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

After you've saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed.

Need Help with this Rule?

Our good friends at tweaky.com can set up gzip compression on your website for only $39!

Submit a GTmetrix report to tweaky and they'll help you get started!

Get This Fixed on Your Site

Need Help with this Rule?

Our good friends at tweaky.com can set up gzip compression on your website for only $39!

Submit a GTmetrix report to tweaky and they'll help you get started!

Get This Fixed on Your Site

Troubleshooting

How can I verify that gzip compression is working?

Run a test with GTmetrix.com - it should identify whether or not gzip compression is happening.

Why won't my images, PDF's and video files compress?

Gzip compression won't work for images, PDF's and other binary formats which are already compressed. If you want to know more about reducing file sizes in these areas, we recommend you start at Optimizing Images.

I followed the steps but gzip compression isn't working. What do i do?

You can try a couple of things if gzip compression doesn't work.

  1. Add the Apache lines of code to the vhosts.conf or httpd.conf file for your site
  2. Look for your site in the file and find the line that starts with <Directory> - add the code above into that section and save the file.
  3. Reload Apache.

If this still doesn't work you'll need to contact your hosting provider.

recommends:

Write your web page content to make compression most effective

To ensure that your content compresses well, do the following:

  • Ensure consistency in HTML and CSS code. To achieve consistency:
    • Specify CSS key-value pairs in the same order where possible, i.e. alphabetize them.
    • Specify HTML attributes in the same order , i.e. alphabetize them. Put href first for links (since it is most common), then alphabetize the rest. For example, on Google's search results page, when HTML attributes were alphabetized, a 1.5% reduction in the size of the gzipped output resulted.
    • Use consistent casing, i.e. use lowercase wherever possible.
    • Use consistent quoting for HTML tag attributes, i.e. always single quote, always double quote, or no quoting at all where possible.
  • Minify JavaScript and CSS. Minifying JavaScript and CSS can enhance compression both for external JS and CSS files and for HTML pages containing inlined JS code and style blocks.
Don't use gzip for image or other binary files

Image file formats supported by the web, as well as videos, PDFs and other binary formats, are already compressed; using gzip on them won't provide any additional benefit, and can actually make them larger. To compress images, see Optimize images.

Read More

Related YSlow Recommendations

Contribute to this recommendation

Have an opinion, link, or other contribution to share regarding this recommendation? Share it with us and help make the web a faster place!