GZIP Compression: Speed Up & Optimize Your Website
Introduction To GZIP Compression
When a visitor sends a request for a page to your site via the client’s browser, a request is sent to your website server to deliver the requested file/information. The webpage may include 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 the browser. You can load a page faster by loading everything at once rather than all at a time. But you still have to contend with sending the files. The larger the files, the longer they take to send to the browser. By compressing your resources such as a 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 a fast webpage load on your own WordPress site, it is necessary to decrease the size of your website’s webpages. Enabling it to 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).
Nowadays, All browsers support it. Further, They automatically negotiate it for all requests of HTTP/HTTPs. In this post, we will talk about it in length. And, provides information on how to check and allow it on your web server.
What is 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. It can be enabled at the server-side and permits a 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 it can do up to 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 Compression?
It is really beneficial in a web environment. It is because HTML, CSS files use a lot of repeated text and spaces. Once you perform it on a webpage, You may notice that it compresses the size of pages, CSS, JS, & HTML file size by up to 60-70%.
Standard Vs Compressed HTTP Request & Response Snapshot
When you request a page like sitemap, your browser interacts with the website’s web server. And, The conversation may go 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 messages. HTML is usually redundant. Every <html> , <table> and <div> tag includes a closing tag. Also, Terms are repeated throughout 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 the uncompressed file (pindex.html), we would save bandwidth and increased the download speed of the page. And, The web browser may download the zipped document, extract it, and show it to the visitor. It makes the visitor happy since the page is loaded quickly.
Once the HTTP request is compressed, the browser-server conversation may look like below:
Browser: Hey, may I GET /pindex.html? I can handle the 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 a Smaller file means faster download & a happy visitor of the website along with web browser.
How does the Compression Scheme Negotiation happen Between Browser & Server?
Browser Gzip Request & 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-Encoding, Accept-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 a 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 the 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 the 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. Nowadays, 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 Compression is Enabled?
There are many ways to verify the compression of GZIP on websites. Here are two approaches often used by webmasters.
1. Online Compression Testing Tool
The first and quickest way to check if compression is enabled on your own site is to check it via Compression Testing tool. Please provide your website URL and click on the 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 the total size.
And, also understand that GZIP pertains to your static property aswell. Which means that in case you are serving resources from a CDN, you need to ensure that the compression is allowed. All modern CDN companies such as Cloudflare, KeyCDN, and CloudFront support it.
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 pre-requisites for Enabling ZGIP Compression in WordPress?
Before you Enabling ZGip Compression you need the following:
- Access to .htaccess file on the webserver
- cPanel access (optional)
Step 1 — Enabling Compression
Assume it 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 webservers have different instructions. Those are explained below for you.
Here are the most common ways to enable compression includes .htaccess, Apache, Nginx, and Litespeed web servers.
Two Methods of Compression
You can enable it 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 version of Apache webserver.
Two compression choices are available to allow HTTP compression:
1. mod_deflate is simpler to set up 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 well. 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 compressing or decompress and there are some special directives you can add to correct this behavior.
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 the related code. The code enables it 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 it, Make sure the 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 a 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 is designed for it. Thus, we may conserve bandwidth for everyone.
a) Compression via mod_deflate (recommended)
It is enabled by updating the below code in your .htaccess file. It is a recommended approach for enabling it. 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 it, 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 it for your website.
b) 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.
Option 5. Enable GZIP on NGINX
If you are using NGINX, simply add the below code to your nginx.conf document.
gzip on;
gzip_disable “MSIE [1-6]\.(?!.*SV1)”;
gzip_vary on;
gzip_types text/simple text/css text/javascript picture/svg+xml picture/x-icon application/javascript program/x-javascript;
Option 6. Enable GZIP on IIS
If you are working on IIS webserver, we recommend looking into Microsoft’s guide about how to enable compression. Microsoft IIS broadly has two various kinds of compression. They are dynamic and static.
Option 7. Enable Gzip compression on Litespeed webservers
The correct way to allow compression in Litespeed is to accomplish it through the configuration under “tuning”.
Just go below to “enable compression” and check to see if it is on. In case if not, click “edit” & then choose to turn it on. And, look over there for several compression options that are nearby.
