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 web pages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much 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%!
Enable Gzip Compression for Apache (cPanel user)
Be sure you have a recent, good backup of your site you can use to restore from if an update or upgrade goes horribly wrong.
As a bare minimum, you add the following in your .htaccess. To do this, simply access your hosting cPanel, and with your File Manager to do the update. Steps as below:
- Access the File Manager by clicking on the File Manager icon within your cPanel. This can be quickly located by typing File Manager into the search bar at the top of the cPanel.
- In the top right of the screen, click the settings button. Ensure the option that states Show Hidden Files is checked and click save at the bottom of the window.
- Once you can see your hidden dot files, navigate to the domain’s file path by right clicking the .htaccess file, and then selecting Edit.
- Once in the edit mode for the .htaccess file, paste the following codes on a new line within the .htaccess file.
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) 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 </IfModule>
- After the code above has been added to the .htaccess file, Do not make any other changes, click the save button at the top right corner of the screen. Congrats! You have now enabled the Gzip Compression!
