Improving Website Performance – Gzip Compression

Introduction

When someone enters your site, a request is sent to your server to deliver the requested file. The larger these files are, the longer it will take to load. By compressing your web pages and CSS before sending them over to the browser you will significantly reduce the loading time as the files will be smaller.

In short, gzip finds similar strings within a text file and replaces those strings temporarily, thus making the overall file size smaller. Gzip compression is really beneficial in a web environment because HTML, CSS files use a lot of repeated text and spaces. In the final result gzip can compress the size of pages and CSS by up to 60-70%.

Step 1 — Enabling gzip compression

You can enable gzip on your website using either mod_gzip or mod_deflate. The compression with mod_deflate is generally recommended due to a better conversion algorithm and the module itself being comptactible with a higher versions of apache. More information about the two methods can be found in this Linux Journal article.

Option 1. Editing .htaccess

Gzip compression via mod_deflate (recommended) can be enabled by implementing the following code to your .htaccess file.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml 
  AddOutputFilterByType DEFLATE application/x-font  
  AddOutputFilterByType DEFLATE application/x-font-truetype  
  AddOutputFilterByType DEFLATE application/x-font-ttf  
  AddOutputFilterByType DEFLATE application/x-font-otf 
  AddOutputFilterByType DEFLATE application/x-font-opentype 
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE font/ttf 
  AddOutputFilterByType DEFLATE font/otf 
  AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers Which Can't Handle Compression
  BrowserMatch ^Mozilla/4 gzip-only-text/html 
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

If your server does not support mod_deflate you can try the mod_gzip alternative:

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  mod_gzip_item_exclude mime ^image/.* 
  mod_gzip_item_include handler ^cgi-script$
</ifModule>

Once the changes are saved, gzip compression will be enabled.

Option 2. CMS plug-ins

WordPress users can enable gzip compression by installing plugins such as GZip Ninja Speed Compression.

With Joomla, you can gzip your website via Sytem -> Global Configuration -> Serversection.

Option 3. Gzip via cPanel

If you have a cPanel license, you can enable gzip for all websites under your hosting account using Optimize Website section.

Option 4. Windows-based hosting

If you are using a Windows server, you can enable HTTP compression for static and dynamic content using the command line:

appcmd set config /section:urlCompression /doDynamicCompression:True

appcmd set config /section:urlCompression /doStaticCompression:True

For more specifics, you can view the official Microsoft guide .

Step 2 — Testing Gzip Compression

Gzip compression can be tested with various tools, such as WebPageTest or GTMetrix.

Conclusion

In this short guide, we have learned how to increase the performance of a website by enabling mod_gzip or mod_deflate compression via .htaccess, CMS plug-ins, cPanel and Windows server