Speed up your server and webpages with text compression

Have you ever tested your page on google PageSpeed insights?

The score is pretty harsh with you if you don’t follow it’s optimization rules. And here we are to discuss one specific aspect of this optimization: the text compression.

How do you compress your page (aka GZIP me please)

Conveniently, google PageSpeed insight provide us with some information about the performance improvements required, and about text compression it mentions:

Text-based resources should be served with compression to minimize total network bytes.

Here you can find what else google have to say on the argument: Enable text compression

What to do

I am no expert by any means, I just googled around and gathered the necessary information for my specific case, hopefully someone else have a similar configuration and will find this useful.

Change the NGINX .conf file

If your server works with nginx, then you’ll have to modify the .conf file that serves your domain, or all your domains on the same server, depending on where you modify your file.

In my case I had to add the following in the wordpress.conf file that serves this domain:

       gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
gzip_disable "MSIE [1-6]\.";
gunzip on;

This artiche of tech republic, kindly explain us also the meaning of each line:

  • gzip on -> somewhat intuitively this enables gzip compression
  • gzip_vary on: -> tells proxies to cache both gzipped and regular versions of a resource
  • gzip_min_length 1024; -> informs NGINX to not compress anything smaller than N size (in this case 1024)
  • gzip_proxied -> compress data even for clients that are connecting via proxies
  • gzip_types -> enables the types of files that can be compressed
  • gzip_disable “MSIE [1-6]\.”; -> disable compression for older Internet Explorer versions
  • gunzip on; -> somewhere else I read that I have also to enable decompression, or else it won’t do that. (this is not included in this article, but I’ll leave it here as I did and I think it helped raise the rankings)

We’re not done yet: .htaccess config

Yes, the second part require configure the apache side of things, there you’ll have to ensure to specify the following:

<IfModule mod_deflate.c>
<FilesMatch "\.(html|php|txt|xml|js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Some people also include image files and some others use a totally different configuration such as:

<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>

I haven’t tried the latter configuration, as the first one worked fine for me, yet I’ll leave it here in case in the future I’ll have to work on this on other sites.

This is another performance metrics tool I used; GTmetrix
Posted in Server management, Web Development and tagged , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.