How to speed up your website with gzip compression

Compressing your content saves bandwidth and improves render time, particularly on devices with slow internet connections but it also reduces load on your server. While it does take some amount of computer power to compress files on the fly, you save much more power by having your server doing fewer things at once. It takes a lot less time to transfer files that are smaller. Your server is therefore, at any given time, maintaining far fewer open connections. There really is no down-side to enabling some form of HTTP compression.

The best way to enable this compression, is by using mod_gzip or mod_deflate. You can use them to automatically compress all HTML, CSS, JavaScript and XML content. And even SVG images, which are a form of xml. If your server is not configured to compress content, and you are unable to change that, there is an alternative. It only applies to HTML, but you can add one simple line of PHP to the top of your documents, to let PHP gzip the HTML on the fly.

If you don’t have GZIP compression enabled, there are a couple ways you can go about enabling it on your webserver.

<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 handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

The second way to enable Gzip compression is by editing your .htaccess file. Most shared hosts use Apache, in which you can simply add the code below to your .htaccess file. You can find your .htaccess file at the root of your WordPress site via FTP.
Ensure to add the these lines at the bottom of 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/
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

if the above methods are not worked, simply add this line to the top of your PHP documents:

<? ob_start("ob_gzhandler"); ?>

It has to be inserted before any content is outputted. It’s not as efficient as mod_deflate, but it still works well and saves a ton of bandwidth and processor power.

And that’s it!

You can test the result directly with your browser developer’s tool (inspector), or by using some online tools such as: HTTP Compression Test. Just enter your site’s URL, and it will tell you if it is actually gzipped, and if it is, you will see the impressive compression ratio.

check for gzip response header compressed

You may also like...

  • Elroy

    Excellent post. I was checking continuously for the website speed up solution but nothing worked for me. Finally got the solution for it. Thank you very much…