PageSpeed: Enable compression

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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 recommendation?

What is 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/Brotli 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, compression should be near the top of your page speed optimizations if you don't have it setup already.

How does it work?

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

The reason gzip/Brotli 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/Brotli compresses common strings, this can reduce the size of pages and style sheets by up to 70%!

Gzip/Brotli 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/Brotli enabled and requests the webpage. If it's enabled it receives the gzip/Brotli 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 enable

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

Read our Lighthouse documentation to learn more about enabling text compression.

Summary

Server
High
Easy
88%

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.

My Adobe Flash widget broke!

The Flash preloader doesn't handle compressed Flash files. If you've enabled compression and things break, try disabling compression on your Flash files.

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.

PageSpeed 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

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×