Compressing your website pages and static assets on the web/hosting server is a great way to improve your site speed overall. GZip compression reduces the size of static content which subsequently makes a website load faster.

Most modern browsers support compression of HTML, CSS, and JavaScript files. So if you set up your web server to deliver compressed files, the majority of your readers will receive compressed files, greatly improving their delivery speed.

Additionally, having GZip compression enabled on the CDN’s end ensures all your compressible files are optimized before they are delivered

GZip compression on a web server running Apache

Put the code below in your .htaccess file.

############################################################################################
    # Deflate files to decrease load times

    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE application/x-httpd-php text/html text/xml text/plain text/css text/javascript application/javascript application/x-javascript image/jpeg image/jpg image/png image/gif font/ttf font/eot font/otf

    # properly handle requests coming from behind proxies
    Header append Vary User-Agent

    # Properly handle old browsers that do not support compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    # Explicitly exclude binary files from compression just in case
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|pdf|swf|ico|zip|ttf|eot|svg)$ no-gzip

############################################################################################

Note: this code is a part of the perfect .htaccess tutorial.

Example of NginX configuration block:

server {
...
    gzip on;
    #Optionally, GZip level of compression can be added to the NginX server block using the following directive:
    gzip_comp_level 3;
    gzip_min_length  100;
    gzip_types    text/plain application/x-javascript text/xml text/css text/javascript application/javascript application/x-javascript text/x-component application/json application/xhtml+xml application/rss+xml application/atom+xml application/vnd.ms-fontobject image/svg+xml application/x-font-ttf font/opentype;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
...
    }

Enabling GZip compression on a CDN (Pull/Push Zone)

In order for the Gzip compression to be enabled in a Pull Zone, please log into your account and follow these steps:

  1. Click Zones
  2. Click View Pull Zones
  3. Click Manage next the zone you wish to delete
  4. Under Edge Settings, you will find GZip Compression. Click the checkbox next to it to enable the option and then click the Update button.Click the Pull Zone Settings tab.
    enable-gzip
  5. After Gzip is enabled, an ‘Advanced’ option will show up, and it can be optionally used to set the level of compression used on the files.¬† The scale for this is between 1-6 where the option 6 is the most compressed level.

    It should be noted that the larger level of compression is using larger process time so in some cases the pain is greater than the gain.

    gzip-set-level

Curl showing compressed delivery

curl -I http://foo.bar.netdna-cdn.com/mystyle.css -H 'Accept-Encoding: gzip,deflate'
HTTP/1.1 200 OK
Date: Mon, 27 Jan 2014 00:35:34 GMT
Content-Type: text/css
Connection: keep-alive
Last-Modified: Fri, 24 Jan 2014 19:20:10 GMT
Cache-Control: public, max-age=2592000
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
Server: NetDNA-cache/2.2
X-Cache: HIT
Content-Encoding: gzip

Compressible content

If you hover your mouse over this option you will find the list of compressible content types

GZIP Compression Scheme

gzip-scheme