Optimize Web Application Performance with gzip
Intro
The first impression a website makes is crucial, determining whether users will continue to engage with it in the future. To increase performance and reduce content load times, several techniques have been developed. This article will focus on one such technique: gzip.
Understanding gzip
gzip is a powerful compression tool that enables servers to compress content before sending it across the network. This can reduce file sizes by up to 50%, resulting in faster transmission. The compressed files are then decompressed by the browser during download and are immediately available upon completion. The primary advantage of this process is the reduced time it takes to retrieve all the files necessary to render the website, thereby accelerating the loading speed.
Compatibility: Support and Adoption
gzip compression is supported by both Apache and Nginx, and most modern browsers can handle its decompression seamlessly.
Use Cases: When to Employ gzip
This technique is particularly beneficial for websites that load a significant number of heavy libraries, predominantly consisting of .js and .css files. Although gzip can compress any file type, there is no need to compress images, as servers usually handle this automatically.
An Example Project: Demonstrating Compression
To demonstrate the effectiveness of compression, we'll create a simple HTML page that loads a couple of large libraries and puts them to work. The page will showcase "Hello, world!!!" in different languages. To achieve this, we will download the Bootstrap 5 and Prism libraries and include them on the page. To make the files even larger and emphasize the impact of compression, we'll use the non-minified versions. The HTML file structure:
Page Loading without gzip: Assessing the Baseline
Let's examine the server's default behavior by loading the website multiple times in incognito mode and measuring the time it takes to load the page. To make the difference more evident, we'll enable network throttling at a Slow 3G setting:
The images show that, on average, it took 23.61 seconds to fully download 946 KB of assets and render the page.
Setting up Nginx: Enabling gzip Compression
To enable gzip compression, we must first open the main configuration file, typically located at /etc/nginx/nginx.conf (Ubuntu):
In fact, if you search for gzip and locate the appropriate section, you'll discover that it's already enabled:
However, this line has no effect unless the subsequent lines are uncommented and configured correctly. To configure gzip, we need to uncomment everything from gzip_vary to gzip_types. Since all the files our website uses are more than 25 KB, we should set gzip_min_length to 25600 (25 KB) to prevent the server from compressing files smaller than 25 KB. Finally, the main configuration file will appear as follows:
To apply the new configuration, we must restart the server:
Page Loading with gzip: Evaluating the Improvement
With gzip enabled on the server, we observe the following results:
The average load time has dropped to 10.45 seconds, which is more than twice as fast as without gzip. Additionally, the asset sizes are significantly smaller than before, with the browser downloading 274 KB instead of 946 KB. Well done, gzip!
References