Index:
- Introduction
- Prerequisites
- Before starting
- Configure Nginx
- Test the configuration file
Introduction
Nginx is an excellent web server software, the basic configuration that is found after its installation can however be optimized. There are some functions of Nginx that, when activated, allow you to maximize the speed of file transfer between server and client and minimize page loading times.
In this tutorial I show you how I configured the EVE Milano web server and, in general, the Nginx servers of my customers.
First, I’ll show you how to enable Gzip compression for specific file types. Then we’ll set up browser caching for an extra boost. These methods will improve the speed of any site running on Nginx, regardless of the software or CMS (WordPress, Joomla, Drupal,…) with which it was created.
For example, a slow and underperforming WordPress installation would see immediate gains without the webmaster having to touch a line of CMS code, or pay for expensive performance services and plugins. This approach works even if the site is running on low-power shared hosting, as long as the server is Nginx and you can edit the block configuration file (the Virtual Host).
Prerequisites
To complete this tutorial, you will need:
- An Ubuntu 16.04 server, including a non-root user sudo.
- Nginx installed on your server.
Before starting
Before starting with the Nginx web server optimizations, take a picture of the initial situation. Run a speed test with the main tools (Page Speed, Nginx, Pingdom and WebPageTest) and save the reports. Later you can compare the improvements obtained.
Configure Nginx
Instead of modifying the general configuration file of Nginx (inside / etc / nginx /) I prefer to modify the configuration file of the single site block, this allows me to manage the functions of the various sites in a more personalized way.
Open your site configuration file via SSH shell:]
or download it locally via (S) FTP.
Identify the server block into which you need to enter the new commands:
This is the complete list of commands and configurations to be entered. Below I’ll explain the function of each command.
Enable Gzip compression
CSS, JavaScript, and image files can take up a lot of space, increasing the amount of data users need to download. Gzip compression, both on Apache and Nginx, allows you to reduce the size of all these assets without compromising their quality and content.
This feature is available in most Linux distributions and you just need to activate it and configure it correctly. With Gzip enabled, browsers can download static assets faster as they weigh less and transfer from server to client in less time.
The commands, related to Gzip, inserted in the configuration file are:
- gzip on: is the first command, enable the gzip function.
- gzip_comp_level 5: defines the compression level (do you know RAR?). You can enter a value from 1 to 9. Experts say 5 is the perfect compromise between size and CPU load . At this level, Gzip offers 75% compression for most ASCII files, which is almost identical to what can be achieved with a compression level of 9.
- gzip_min_length 256: command to tell Nginx not to compress any file that is already small. The default value is 20 bytes which, according to experts, is too low. Compressing very small files often results in larger files. For this reason it is recommended to use a value of 256, which is a very good compromise.
- gzip_proxied any: command to tell Nginx to compress also for clients connected via proxy.
- gzip_vary on: command linked to the previous one: vary is used to ask proxies to cache both the compressed and the uncompressed version, in case the “Accept-Encoding” of the client changes. This function avoids the problem where a Gzip file is sent to a client unable to interpret compressed content with Gzip (which is currently very rare).
- gzip_types: this command lists in succession all the file types (MIME-types) that must be compressed on output with Gzip. In my setup I compress the most common formats. If you modify the list, be careful to respect the “;” closing.
Enable browser caching
Through browser caching , it is possible to ask the browser to cache site files when visiting it for the first time.
On subsequent visits, the browser will serve the various versions of local files instead of downloading the same files again. This method allows the browser to load the page much faster since only a small part of the files have been downloaded, those that have changed since the last visit.
As you can imagine the user experience improves a lot as the loading speed increases.
The “location” command is used to tell browsers which files to cache. The “expires” command indicates the duration of the cache. As a duration you can choose the value that best respects the changes you make to the site. When changes on the site are rare I extend the duration up to 30 days. On the other hand, when the changes are frequent, I set the duration to 23 hours. A reasonable average could be 7 days.}
Test the configuration file
After editing the Nginx block configuration file, save it and close. Before restarting the web server it is advisable to test the configuration file to verify that there are no problems and errors.
Open the SSH shell and type this command to start the test:
If you’ve done everything correctly (it never happens to me the first time) you shouldn’t get any error messages. Now you can restart the web server to enable the new configuration:
At this point you just have to repeat the speed tests and compare the results. The best and most attentive readers will comment below the initial and final PageSpeed Insights score : D
