How to enable GZIP compression for faster loading?
What is GZIP Compression?
GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allows for further reduction in the size of your HTML, stylesheets, and JavaScript files. It will not work on images as these are already compressed in a different way.
GZIP works best on text-based content like HTML, CSS, Javascript, JSON, XML, SVG.
How GZIP compression works?
When a browser that supports GZIP compression requests a resource from the server, it sends the Accept-Encoding header. The Accept-Encoding header informs the server of the compression algorithms supported by the browser.
When the GZIP enabled server sees the Accept-Encoding header, it will compress the resource before sending it to the client browser. The server sets Content-Encoding header to tell the browser what kind of compression was applied to the resource.
When the browser receives the resource, it scans the header and finds that the resource is compressed. The browser then goes on to decompress the received resource before using it.
Benefits of GZIP Compression
GZIP is actually a fairly simple idea that is extremely powerful when put to good use. Gzip locates similar strings within a text file and replaces those strings temporarily to make the overall file size 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%.
GZIP is an important tool because it reduces the time taken by a website to transfer the page files and style sheets which ultimately reduces the load time of your website.
How to Check if GZIP Compression is Enabled?
There are a couple quick ways to check for GZIP compression:
1.Check GZIP Compression Tool
2.GZIP content-encoding HTTP Response Header
Here is the explanation of these methods:
Check GZIP Compression Tool
The first and quickest way to check if GZIP compression is enabled on your site is to simply head over to the free Check GZIP compression tool. For checking click here. After opening this link simply input your website URL and click search icon. It will return the amount that was saved by compressing the page with GZIP. Or it will return an error letting you know GZIP isn’t enabled. As you can see in our test below, we saved 76.8%.
And remember that GZIP also applies to your static assets as well. Which means if you are serving assets from a CDN, you will want to ensure they also have GZIP compression enabled. All modern CDN providers support GZIP compression, such as Cloudflare, KeyCDN, and CloudFront. You can also easily test this by simply running one of your CSS or JavaScript files on your CDN through the tool.
GZIP content-encoding HTTP Response Header
The second way to check is to verify if the “content-encoding: gzip” HTTP response header is active on your site. This is what the browser looks for when it sends a request to the server. You can inspect your site and look at your first response header under the network section.
How to enable GZIP compression?
If you don’t have GZIP compression enabled, there are a couple ways to enable GZIP compression on your webserver.
Enable GZIP compression on Apache
The first way to enable Gzip compression is by editing your .htaccess file. If your server is Apache, you will need to add the following lines to your .htaccess file for enabling gzip compression. You can find your .htaccess file at the root of your WordPress site via FTP. After finding your .htaccess file simply add this code at the bottom of this file. Here is the code:
# 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 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 you’ve saved your .htaccess file, test your site again to make sure it has been properly compressed.
Enable GZIP compression with WordPress Plugin
One of the easiest way to enable GZIP compression is to use caching plugin. WP Rocket for example adds GZIP compression rules in your .htaccess file automatically using the mod_deflate module. W3 Total Cache also has a way to enable this for you under it’s performance section. Even though these are plugins, this still relies on permissions to modify files on your webserver. If your caching plugin doesn’t have permission, you will need to ask your host or use a snippet of code above.
[…] Gzip Components – Read our post How to Enable gzip […]
[…] 9.Enable 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 webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller. For more about gzip compression we recommend this link : GZIP compression […]