These days website speed makes the first impression of your business. Website speed is one of the key factors which decides the ranking of your website on various search engines.

According to one analysis, If your website takes more than 3 seconds to loads completely then you lose half of the visitor before they even arrive on your website.

So to survive with your competitors, your website speed is also one of those factors which will help you to grow exponentially.

High-performance website results in good search ranking, high visitors, low bounce rate, high conversions.

In this article, I will tell you how to compress the content of your website by enabling the gzip compression into your website.

You can test your website speed using the google page speed insight.

What is GZIP Compression

GZIP is a file format and a software application used for file compression and decompression.

GZIP compression is a method through which you can reduce the size of your webpage.

When a user hits request to your website then a call is made to your server to return the requested files. The larger these files are the bigger time it takes to load the content of the webpage.

Gzip compresses your webpage and stylesheets before sending them over to the browser.

Enabling GZIP compression for HTML, CSS, and Javascript files increase your website loading speed up to 50%.

From the client-side, all modern web browsers support GZIP compression and automatically ask for it when making HTTP requests — this means that you can expect all users to reap the benefits of GZIP compression once you’ve enabled it.

How GZIP Compress The Website?

The CSS, html and other static files use a lot of repeated text and spaces which increase the size of the webpage and because of this, it takes too much time to load on the browser.

Gzip locates similar strings within a text file and replaces those strings temporarily to make the overall file size smaller.

You can easily check the gzip compression status from the GT matrix website.

Enable GZIP Compression

There are lots of methods to enable the GZIP compression for your website depending upon the server on which your website is running.

Enable GZIP compression in Nginx Server

Nginx server is a very powerful server. It is light-weight and easy to use. Apart from using the Nginx as a web server, it can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. By Default Nginx do not enable the GZIP compression.

To Enable the GZIP Compression in nginx, you have to modify the nginx configuration file. So if you have a good server knowledge then only try this method.

Open the Nginx config file and put below lines under the HTTP section.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Below is a brief explanation of the terms used in the above lines.

  • gzip on: enables gzip compression
  • gzip_vary on: tells proxies to cache both gzipped and regular versions of a resource
  • gzip_min_length:  informs NGINX to not compress anything smaller than the defined size
  • gzip_proxied: compress data even for clients that are connecting via proxies (here we’re enabling compression if: a response header includes the “expired”, “no-cache”, “no-store”, “private”, and “Authorization” parameters)
  • gzip_types: enables the types of files that can be compressed
  • gzip_disable: disable compression for Internet Explorer versions 1-6

Once you’ve added the options, save and close the nginx.conf file and restart NGINX with the command:

sudo service nginx restart

Enable GZIP compression in Apache Server

To enable the GZIP on apache server, copy the below code and paste it into 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>

For ISS Server

If you are using ISS server then you can follow this link to enable the gzip compression for your website.

For WordPress Website

If you are using WordPress for your website then you can easily enable gzip by using the WordPress plugins like W3 Total Cache, WP Rocket, WP Super Cache.

All of the above plugins do lots of other things also which can help to reduce the size of your website and make decrease the loading time of your website.

Conclusion

Hope, you got the idea on how to enable gzip compression for your website. GZIP compression is very important for every website if they don’t want to lose their valuable visitors.

After enabling the gzip compression, you can see the difference into your website page speed from this link.

If you have any doubts and suggestion then comment below.

And if you like this article then please support us by sharing this article.

Codecademy Web Development
Pin It