Are you seeing error messages about text compression from Google Search Console and Google Lighthouse Core Vitals? Maybe it’s time to Enable text compression on your website.
Do you know there are some text-based resources on your site that hinder the performance and speed of your site? Lighthouse reports that there are some text-based resources that need to be compressed. Enabling text compression of these resources lightens your page weight and allows the browser to download the assets faster than before. Rendering faster and providing a better user experience.
In this post, I will show you the easiest and most convenient way to compress these text-based resources on your WordPress site. But before you should need to know about text compression, how it works, how to find these text-based resources and why it is crucial to compress these text-based resources on your site.
Are you ready?
What is text compression?
Text compression is a sort of mitigation technique in which you compress all the text-based resources ( HTML, CSS, JS) on your site to reduce the site weight and load it faster. It is one of the popular methods to speed up WordPress sites. When enabled it greatly reduces the size of the file on your site and boosts it’s speed.
So basically, text compression enables HTML, JS, and CSS files on your site to be compressed to a smaller size. The browser downloads these smaller files quickly and reduces the overall loading of the page. So if you really want to improve your page speed and performance, it is something you should consider.
Why is it critical to enable text compression on your site?
We know when a visitor visits a webpage their browser downloads all the resources ( i.e; CSS, HTML, JS, Images) on the page before showing the content on the screen. The larger these files are, the longer the browser takes to download them and the longer visitor has to wait to see the content on the screen. This can frustrate the users and they may close your site even before the rendering process starts.
The most recent studies reveal that 70% of visitors wait only two seconds for a web page to download and 40% of users don’t wait for more than three seconds. This has been a trend over the last few years and users are expecting quicker and quicker load times.
Compressing text files can help to reduce the file size in kb, making the file smaller and faster to download. This accelerates your site speed and improves performance.
How to enable text compression?
There are three types of text compression algorithms named as Gzip, Brotli, and Deflate. Although Gzip and Brotli are the most commonly used compression algorithms and can compress resources up to 70%. They reduce your page load time up to 50%, providing a better user experience and helping to attract more visitors.
Let’s take a look at how they all work.
1. Manual Compression Method
One of the easiest ways to enable Gzip compression on your WordPress site is by manually editing the .htaccess file. Since it involves editing the site code, there might be chances of breaking something and ending up with some other problems. Thus, it is crucial you should take a backup of your website and a copy of the file’s code before making any changes to the code. Once you take the backup it’s time to work on the code.
Find the .htaccess file in the root folder of your WordPress site. Find the file and edit it directly on the server or download it on the computer before making any change to the file. Now open the file and paste the below code in our .htaccess file below the section marked by # BEGIN WordPress and # END WordPress tags.
# 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
Note: If you paste the code anywhere else the specific location, it wouldn’t work.
2. Using a WordPress Plugin
Of course, if you’re working with WordPress there is nothing you can’t do using a plugin. There are plugins available even for small tasks. So if you don’t want to mess up with code you can simply do this by downloading a plugin. There is a handful of plugins that work perfectly and efficiently enable text compression on your site within a few clicks. Here are some of the best that I have tried so far.
- WP Rocket
- WP Super Cache
- W3 Total Cache
- Enable Gzip Compression
- PageSpeed Ninja
3. By contacting your hosting provider
Another amazing method to enable text compression is by contacting your hosting provider. Although many of the host providers enable compression by default, but still if you don’t have GZip compression enabled by default, you can contact web hosts to enable Gzip compression on your WordPress site. Ask your host provider, they will provide their own instruction to enable Gzip compression on your site.Â
The Bottom Line
In the developing era of technology when most businesses work online, everyone wants their site to load faster than ever and provide a better user experience. Websites that render slowly or take more time to show the page content only frustrate the user so they don’t visit your site again.
So if you want to make your site load faster and provide a better user experience you should compress all the text-based resources on your website. These compressed files download faster and greatly reduce the page load time. Above we have shown some of the best and easiest ways to enable text compression on WordPress. Give them a try and don’t forget to share feedback in the comment section. We would love to hear from you.
Need Help?
Know your websites slow and worried about Google reducing your visibility due to text compression issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.
