gzip compression
Page Speed

GZIP Compression: Speed Up & Optimize Your Website

GZIP Compression: Speed Up & Optimize Your Website

Introduction

When a visitor send a request for a page to your site via client’s browser, a request is sent to your website server to deliver the requested file/information. The webpage may includes HTML, CSS, JS and any media you have on the page. The larger these files are, the longer it will take time to load in browsers. This applies even if you’re lazy loading or asynchronously loading content. That content still needs to load in browser. You can load a page faster by loading everything at once rather than all at a time. But you still have to content with sending the files. The larger the files, the longer they take to send to the browser.By compressing your resources such as webpage, CSS, JavaScript, HTML files before sending them over to the browser you will significantly reduce the loading time as the files will be smaller.

To accomplish fast webpage load on your own WordPress site, it is necessary to decrease the size of your website’s webpages. Enabling GZIP compression help decrease the size of your web pages. It will significantly reduce the quantity of time to download the webpage. Further, reduce data utilization for your client, and enhance the time to 1st render of your webpage(s).

Now a days, All browsers support gzip compression. Further, They automatically negotiate GZIP compression for all requests of HTTP/HTTPs. In this post, we will talk about GZIP compression in length. And, provides information how to check and allow GZIP compression on your web server.

What’s GZIP Compression?

Gzip is a file format & a method to compressing files such as HTML, JS, CSS etc for faster network transfers. It is done by making files smaller in size. Compression allows your server to serve smaller document sizes which load faster for your site visitors

GZIP is a technique used for document compression and decompression. GZIP compression can be enabled at server-side, and permits further reduction in how big is your HTML, stylesheets, and JavaScript files. Usually images are already compressed & can be compressed in different ways. It a known fact that Gzip Compression can do upto 70% reductions.

When a browser visits a website it checks to see if the webserver has GZIP enabled simply by seeing if the “content-encoding: gzip” response header exists. If the header can be detected, it delivers the compressed and smaller sized files. If not really, is delivers the uncompressed files.

Why we need GZIP Compression?

It is really beneficial in a web environments. It is because HTML, CSS files use a lot of repeated text and spaces. Once you perform gzip compression on a webpage, You may notic that it compress the size of pages, CSS, JS, & HTML file size by up to 60-70%.

Here is a proof for your reference.

Standard Vs Compressed HTTP Request & Response

Standard Vs Compressed HTTP Request & Response Snapshot

When you request a page like sitemap, your browser interacts with website’s web server. And, The conversation may goes such as this:

HTTP Request & Response
Internet browser: Hey, GET me /sitemap.xml
Server: Ok, Let me see if sitemap.xml is present with me…
Server: Found it! Here’s your response code (200 Okay) and I’m sending it.
Web browser: 100KB? Ouch… waiting… waiting..waiting… okay,finally, it’s loaded fully .

Nonetheless, Your request has been served, and you have your page. But, the problem is that it’s not really that efficient. Here, 100KB will be a lot of text message. HTML is usually redundant. Every <html> , <table> and <div> tag includes a closing tag. Also, Terms are repeated through the entire document. In fact, HTML isn’t lean.

Let me ask you one question.

what’s the solution when a file’s too large to send?

Your answer may be, simply Zip it before sending it to the browsers  & vice versa.

Yes, You are right.

If we’re able to send a .zip document to the internet browser (Ex: pindex.html.zip) rather than the usual way of uncompressed file (pindex.html), we would save bandwidth and increased download speed of page. And, The web browser may download the zipped document, extract it, and show it to visitor. It makes visitor happy since the page is loaded quickly.

Once HTTP request is compressed, the browser-server conversation may look like below:

Browser: Hey, may i GET /pindex.html? I can handle compressed edition of files.
Server: Let me find that page.. yep, it’s available. And you’ll have a compressed version? Awesome.
Server: Here is your response code (200 OK), am zipping it and sending it to you.
Browser: Great! It’s just 10KB. I’ll unzip it and show it to the visitor.

Here, please note that Smaller file means faster download  & a happy visitor of website along with web browser.

How the gzip Compression Scheme Negotiation Happens Between Browser & Server?

Browser Gzip Resquest & Server Response

                         Browser Gzip Resquest & Server Response Snapshot

The whole negotiation between browser & server is done in simple two steps.

1. The browser transmits HTTP request with header informing the server that it accepts compressed content. It can be either gzip and deflate. These are 2 well-known compression schemes available for compression. Ex: Accept-Encoding: gzip, deflate

For Content-EncodingAccept-Encoding filed is used & for Transfer-Encoding, the field TE is used.

GET /encrypted-area HTTP/1.1
Host: www.auniqueweb.com
Accept-Encoding: gzip, deflate

The “Accept-encoding” header is only a demand by the internet browser, not really a demand.

2. Then, The server transmits a reply containing  one or more compression schemes it supports. if the content material is in fact in compressed form, It sends response with Content-Encoding: gzip. In fact, The outgoing request data may be compressed by one or more methods supported by both parties. So, the server will add a Content-Encoding or Transfer-Encoding field in the HTTP response with the available compression schemes, separated by commas.

HTTP/1.1 200 OK
Date: mon, 26 June 2016 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix)  (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip 

If the server doesn’t send the content-encoding response header, this means the file isn’t compressed. In other words, If the server doesn’t want to send compressed content to web browser, the web browser has to put up with the heavy standard version.

The most tricky part of this exchange is the browser and server knowing upfront it’s ok to send a zipped file over.

The compression method used by web server solely depends on the internal settings of the web server. Further, it may also depend on the internal architecture of the site.

How compressed files work on the web?

For example, When a request is made by a browser for a file of your website, your web server returns the smaller compressed file if the browser indicates that it understands the compression. Now a days, All most All  browsers understand and accept compressed files.

How GZIP Compresses data of a web page?

Gzip locates similar strings within document types such as CSS and HTML files. It replaces those strings temporarily with some placeholders. It is to make the overall file size smaller.

Do you know the reason why these compressions work so well in a web environment?..It is because these document types such as CSS files and HTML files use a lot of repeated text and have loads of white space. Since, It compresses common strings, it may reduce the size of pages and style sheets by up to 60-70% !

How to Verify if GZIP Compression is Enabled?

There are many ways to verify GZIP compression of websites. Here are two approaches often used by webmasters.

1. GZIP Compression Tool

The first and quickest way to check if GZIP compression is enabled on your own site is to check GZIP compression tool. Please provide your website url and click on search button. The tool will either return the total amount that was preserved by compressing the web page with GZIP Or it’ll return an error helping you discover GZIP isn’t enabled. As you can plainly see in our check below, we saved almost 64% of total size.

gzip compression

And, also understand that GZIP pertains to your static property aswell. Which means that in case you are serving resources from a CDN, you will need to ensure that there is also GZIP compression allowed. All modern CDN companies such as Cloudflare, KeyCDN, and CloudFront support GZIP compression.

2. Via HTTP Response Header “content-encoding: gzip”

The second way to check is to verify if the “content-encoding: gzip” HTTP response header is active on your website. This is exactly what the browser searches for when it transmits a request to the server. You may start Chrome Devtools and look at your initial response header beneath the network section.

You can also go through the “view large requests” choice and it’ll show you the initial and compressed size of the web page.

What are per-requisites for Enabling ZGIP Compression in WordPress?

Before you Enabling ZGip Compression you need the following:

  • Access to .htaccess file on webserver
  • cPanel access (optional)

Step 1 — Enabling gzip compression

Assume GZIP compression is not enabled in our webserver. we have different ways to start enabling it on your own web server.

  • Compression is enabled via webserver configuration
  • Different web servers have different instructions. Those are explained below for you.

Here are the most common ways to enable compression includes .htaccess, Apache, Nginx, and Litespeed webservers.

Two Methods of GZIP Compression

You can enable gzip compression on your website using either mod_gzip or mod_deflate algorithm. The compression with mod_deflate is generally recommended. And, it is compatible with a higher versions of Apache webserver.

Two compression choices are available to allow HTTP gzip compression:

1. mod_deflate is simpler to setup and is a typical standard.
2. mod_gzip: it is more powerful since it helps to pre-compress content.

mod_deflate is quick and it works very good.so you may use it or use mod_gzip if that what you prefer. In any case, Apache webserver checks if the internet browser delivered the “Accept-encoding” header. Then it returns the compressed or regular edition of the file. However, some older browsers may have trouble to compress or decompress and there are some special directives you can add to correct this behaviour.

If in case, you can’t change your .htaccess file, you may use PHP to return compressed content. Also, Give your HTML file a .php extension and add below code to the top of it (for PHP).

<?php
if(substr_count($_SERVER[“HTTP_ACCEPT_ENCODING”], “gzip”)){
ob_start(“ob_gzhandler”);
}else{
ob_start();
}
?>

Option 1. Editing .htaccess file to enable GZIP on Apache webserver

If you have access to webserver, you may edit .htaccess file & update Gzip compression related code. It enables Gzip compression on webserver. Most shared hosts make use of Apache, where you may add the code mentioned below to your .htaccess document. You could find your .htaccess document at the main of your WordPress site via FTP.

Before you enable GZIP compression, Make sure  mod_filtration system is loaded on your own server. Otherwise the AddOutputFilterByType directive won’t work and could result in a 500 mistake. We recommend looking at your mistakes in log file in case you have any problems with the code below.

Setting up the server

The important thing you have to know is that we can’t control the web browser. it either sends the Accept-encoding: gzip, deflate header or it generally does not.

Our job is to configure the server so that it returns zipped content only if the browser can handle it. Thus saving bandwidth for webserver & Client’s browser.

Our work is to configure the server so that it returns zipped content material if the browser are designed for it. Thus, we may conserve bandwidth for everyone.

a) Gzip compression via mod_deflate (recommended)

It is enabled by updating the below code in your .htaccess file. It is recommended approach for enabling Gzip Compression. Please, make sure that you add it all below the existing contents of your .htaccess file.

Once you add code in .htaccess file to enable GZIP Compression, Save the changes to the file.

That’s essentially a listing of MIME types that gzipping will  be applicable. Feel free to alter the file types as per your need.

<IfModule mod_deflate.c>
# Compress Text,HTML, CSS, JavaScript, XML and fonts
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 you wish to download file, you may down it from Here.

Note
1. If in case your server does not support mod_deflate,  you may try the mod_gzip scheme.
2. In case you don’t have access to web server, you may use plugins to enable GZIP compression for your website.

b) Gzip compression via mod_deflate

<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 it is updated, compression will be allowed.

Conclusion

Website gzip compression can help you reduce the quality of a web document. Be it like HTML, PHP, CSS and Javascript documents. It can reduce size to the subject of 60% or much less of its initial size before these data files get delivered to the browser of an user. This compressed document is then served to the web browser of the user . Browsers Then decompresses it instantly to load the entire original document in the browser once again. Enabling gzip compression is ideal for enhancing page speed because these potential customers will have to download much smaller sized web documents as the initial types when browsing your webpages. It boosts the download time for these data files.

GZIP is quite common nowadays. In fact it is enabled by default on all servers. All most all modern browsers handle the “content-encoding: gzip” HTTP response header. All modern browsers like chrome, firefox support GZIP compression.

HTTP response size may be reduced by using Compression. GZIP compression is the most well-known and effective compression technique available for HTTP response. GZIP compression generally decreases the response size to 60-70%.

Therefore, webmasters need to make sure that the server is properly configured to provide the compressed source when requested by your client’s browser. It means that it takes much less time to load your web pages, and very less bandwidth is used over all.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!