Compressing website pages and static assets on a web/hosting server is a great way to improve overall site speed.
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 a web server is set up to deliver compressed files, the majority of readers will receive compressed files, greatly improving their delivery speed.
Additionally, having Gzip compression enabled on the CDN's end ensures all compressible files are optimized before they are delivered.
Gzip with Apache
Put the code below in the server's .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.
Gzip with Nginx
This is an example configuration block to enable Gzip on Nginx.
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;
...
}
GZip on MaxCDN
In order for the Gzip compression to be enabled in a Pull Zone, please log in to the MaxCDN Control Panel and follow these steps:
- Select Zones.
- Select View Pull Zones.
- Select Manage next to the zone to delete.
- Under Edge Settings, find GZip Compression. Select the checkbox next to it to enable the option and then click the Update button. Select the Pull Zone Settings tab.
-
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 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.
Verify with cURL
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
Hover the mouse over this option to find the list of compressible content types.
Compression Scheme
As always, If you have any questions or concerns about any of the topics mentioned in this article, please feel free to reach out to support - we are available 24/7 by chat or email.