Increase Your Lighthouse Performance Using Gzip
Let's enable Gzip compressions in an NGINX server
In a previous article, we discussed how to increase application availability using the NGINX load balancer. In this article let’s discuss how we can improve the application performance using proper data compression techniques.
For this article, I’ve hosted a simple webpage on my NGINX server by assuming you’re already familiar with NGINX’s fundamentals. To measure the application performance we will use Google Lighthouse.😉
Before we do anything, let’s take a look into the lighthouse performance report for our default NGINX configurations.
Here you can see the Speed Index for this webpage is 2.6 seconds. Hmmm… 🤔 not bad, Right? Yaa… but what if we can make it more faster than that? Yes, that’s where the Gzip comes into place. When a client requests a web page from the server it’s better if we can compress it and reduce the file size before transmitting it over the network. It will obviously reduce network latency. 😉 To do that, we can enable Gzip compressions on our NGINX server. Gzip is one of the most widely used data compression methods and we can configure Nginx to use Gzip to compress the files it serves on the fly.
However, since the data compression happens at the runtime, the processing overhead might be increased. Therefore, we have to be careful when tuning the Gzip configurations. Actually, we have to play around a little with configuration settings to find the optimal settings for our application because there is not any fixed set of configurations.
Well, now let’s see how we can enable Gzip data compression in our NGINX server. Actually, enabling Gzip in NGINX is really straightforward. We can configure it inside NGINX http, server, or location context according to our use case.
For this example, we will configure Gzip in our server context.
server {
listen 80 default_server;
root /var/www/html/build;
index index.html; ################ Enabling Gzip ################
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_comp_level 7;
gzip_proxied any;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript text/xml application/xml application/xml+rss application/json; location / {
try_files $uri $uri/ =404;
}}
Here, we have added the basic Gzip configurations in our server block. Let’s take them one by one, 👇
gzip: To enable Gzip we can set this gzip directive to on. By default, compressions will only apply to the responses with the MIME type of text/html.
gzip_disable: When compressed data arrived at the client’s browser, the browser will decompress the data and serve it to the client. But some browsers are not compatible with Gzip. For such browsers, NGINX will serve the content without compressing it. Therefore, with the gzip_disabledirective, we can disable gzip compression for requests with User-Agent header fields matching any of the specified regex patterns. In this specific case, we have disabled Gzipping for MS Internet Explorer before version 6 SV1.
gzip_vary: This directive will allow the browser to decide whether it accepts gzip or not. If it doesn’t accept gzip, NGINX will send the uncompressed data to the browser. But almost all the modern browsers set the Vary header to Accept-Encoding to specify that they accept Gzip compressions.
gzip_comp_level: With this directive, we can specify how much do we need to compress our data. The value can be ranged from 1 to 9. Higher the value, lower the file size. Okay…Okay…, I know what you are thinking 🤗 Let’s go with the highest value. Isn’t it? Nooo… Don’t do that. Don’t blindly set it to the highest value. It’s because to compress your files, the NGINX server needs to use more processing power. Yaa, your file size will be decreased but the server will take more time to compress your file. Therefore, it’s better to play around with this value and find the optimal value for your application. 😃
gzip_proxied: With this directive, we can enable or disable gzipping for proxied requests. By setting its value to any we can enable compression for all the proxied requests. gzip_proxied directive accepts multiple parameters like off, no-cache, no-store and many more. You can refer to the official documentation to learn more about this directive from here.
gzip_types : Here you can specify what are the file formats that you need to compress. It’s always recommended to compress large texts files like HTML, CSS, and JavaScript before transmitting them over the network. File formats like JPEG, PNG are not required to compress since they are already compressed. As we discussed earlier, to compress a file, NGINX needs to allocate server resources. Therefore, re-compressing files like JPEG or PNG will be an extra overhead to the server. One thing to remember is that all the MIME types that we gonna set here should exist in the mime.types file. If the file type is not there, you can update the mime.type file accordingly. To do that you can find the MIME type of a specific file from the value of Content-Type header of response headers.
Okay, now all our Gzip configurations are in place. Let’s reload the webpage to get the Lighthouse performance report for the newly added configurations.
Woohoo!!! 🚀 It skyrocketed to 92%. Look! Now the speed index is only 1 second.
So, this is how we can enable Gzip compression in our NGINX server to get the best performance out of our applications. Remember! There is no fixed set of configurations for all the applications. Therefore, you have to play around with these configuration settings to find the optimal setup for your application. So, I hope you learned something valuable from this article. Thanks for reading it till the end.
CHEERS!!!
