Increase Website Speed Using Nginx and Gzip Module

Posted on July 10th, 2020

The website speed is one of the essential factors that affect the user experience, so it is a concern for all the website owners. In today’s market, there are different ways to improve and optimize your website speed.  In this tutorial, we are going to learn how to optimize or speed up your website using Nginx and Gzip module.

The Gzip is a build-in module filter that helps to compress the website responses using the Gzip compression method. You can compress the plain text files such as CSS, HTML, and JavaScript very easily. In contrast, the compression of other files, such as .iso, images, and tarballs, is difficult to compress because it is already in a compressed format. So, the combination of Nginx and Gzip module can increase the transfer speed of your website. If you enable the Gzip module on your server, the HTML files get always compressed, but it won’t compress the other standard website and application files, such as CSS and JavaScript.

This module also helps to compress the size of the transmitted data. In this tutorial, we are using the CentOS 7 server.

Install Nginx Server

Nginx is a high-performance, open-source, and free web server software. It can act as a TCP/UDP proxy server, load balancer, reverse proxy, and IMAP/POP3 proxy server. When compared to Apache, Nginx does not come with many modules, which makes it perform better than Apache, and also it is a more flexible and lightweight program.

To install the Nginx server on your server, run the following process.

Log in to the server as a root user.

Update the yum packages using the following command.

# yum update

Next, install the Nginx server by running the following yum command.

# yum install nginx

After the installation, start and enable Nginx to make sure that the installation was successful, and Nginx can access server files.

# systemctl start nginx
# systemctl enable nginx

Run the following command to stop the Nginx web server.

# systemctl stop nginx

To verify the installation, open any browser and hit your server IP or hostname as the URL, and this should open an Nginx welcome page in the browser.

http://<IP_address>
or
http://<server_hostname>

 

Test Nginx Website Speed Without Enabling the Gzip Module

To test the website speed without enabling the Gzip module, follow the below steps.

First, download the Bootstrap template from the Github under the ‘/var/www/html’ folder by using the following command. The Bootstrap template is a combination of CSS, HTML, and JavaScript files. So, this template helps to test the website speed more efficiently.

# cd /var/www/html
# wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip

Next, unzip the downloaded BootStrap file.

# unzip -a gh-pages.zip

After that, move the unzipped file to your domain name directory. For example, if your domain name is test123, then move the unzipped file to the ‘/var/www/html/test123’ directory.

# mv startbootstrap-creative-gh-pages test123

Now, you can see files in all formats under the test123 directory. To view the same, run the following command.

# ls -l /var/www/html/test123

Now, check if the page is loading correctly by hitting the following URL in any browser.

# http://<IP_address>/test123
or
# http://<server_hostname>/test123

In the browser, you should open the web developer’s tool to examine the transfer speed. In Firefox, to analyze the transfer speed, follow the below steps.

  • Go to the hamburger menu (three-line) at the top of the browser.
  • Then, select the web Developer option.
  • Next, select the Network option (Ctrl + Shift + E) from the list.
  • This page displays the transfer speed of all the file format of your website. You can take a screenshot of this page for further comparison.

In Chrome, you can open the web developers’ tool via three dots at the top of the browser > More tools > Developers tool (Ctrl + Shift + I) > Networks.

Enable and Configure Gzip Module in Nginx Server

To enable and configure the Gzip module in the Nginx server, follow the below steps.

Open the Nginx configuration file.

# vim /etc/nginx/nginx.conf

Then, Locate the main server block in the file and then add or modify the below three lines.

root                  /var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

You can enable/disable the Gzip module from the Nginx configuration file by changing the value of gzip in the file to ‘on’ or ‘off’. The gzip_types value in the above configuration file determines all the MIME types that the Gzip module should handle.

Test Nginx Website Speed After Enabling Gzip Compression Module

After enabling the Gzip compression module, run the following command to restart the nginx server.

# systemctl restart nginx

Next, we need to open the unzipped BootStrap file in the browser to analyze the transfer speed. If the page is already open on your browser, refresh the page (Ctrl + F5) to reflect the changes.

http://<IP_address>/test123
or
http://<server_hostname>/test123

Then, open the ‘Network Requests’ tab in the web developer’s tool from the browser. This page should show a significant improvement in the transfer speed after enabling the Gzip module. You can compare the current timings with the timings on the screenshot, which we took earlier before enabling the Gzip module to see a significant improvement. The times mentioned in the Network Requests tab in the web developers’ tool are in milliseconds.

 

Final Word

The speed of a website is the essential factors that affect user experience. The Nginx Gzip module on your server can help you improve and optimize the file transfer speed of your website.

Please comment below for any questions or queries. If you are an InterServer customer, please reach out to our support team for further help.

Leave a Reply