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