Steps to Increase the PageSpeed Score by Changing the Nginx Configuration on the Ubutntu 16.04

Nginx has excelled in the processing requests for web pages, even though the web page can seem faster but the default Nginx configuration can cause the Google PageSpeed Insight tool to flag inefficiencies in the website and then as a result grade it poorly. Google is using the speed of the website as the key factor in determining the websites search position.

Here you will be making the quick edits for the configuration file for the domain that can instantly boost the websites response speed and the pagespeed metric. Here the aim is to achieve a score above 80/100 as this could be the threshold above which google will apply a green marker to the score signaling it as a fast website.

First you will be enabling the Gzip compression for the specific type of files. Then you will configure the browser caching for an extra boost. These are the methods which will improve the speed of any website which is running on Nginx, regardless of the software of the software or the software it has been built with. A slow and underperforming Wordpress install will see instant gains without having to touch the line of the core or in paying for the expensive performing plugins. This is the approach which works even if the website is running on a low powered shared hosting server. As long as the server is Nginx you will be able to edit the configuration file.

Enabling the Compression

The JavaScript, CSS and the image files can be very large, which increases the amount of data the users have to download. Here the compression means that these assets reduced in size in a more compact version which is smaller but it will still be containing all the required data. Gzip is one of the option which is used for performing the compression on the Nginx. The availability is provided in all the major Linux distributions and it just needs to be enabled as well as configured correctly. With a Gzip compression when enabled, browsers will be able to download the static assets quicker, that is the reason why the PageSpeed tool flags as it is having something that needs to be addressed. For enabling the compression you need to open the Nginx configuration file to the website nano or to the favorite text editor.


$ sudo nano /etc/nginx/sites-available/default

Now you need to locate the server configuration block which will be looking like as follows:

/etc/nginx/sites-available/default
server {
listen 60 default_server;
listen [::]:60 default_server;
. . .
}


Now you need to add the series of snippets for configuring the compression.
The Gzip compression needs to be enabled and set the compression level:

/etc/nginx/sites-available/default
server {
listen 80 default_server;
listen [::]:80 default_server;

gzip on;
gzip_comp_level 5;

 

You will be able to choose the number between 1 to 9 for this type of value. 5 can be termed as the perfect compromise between that of the size and the CPU usage which offers a 75% reduction for most of the ASCII files, which is almost identical to level 9).

Next part is to tell the Nginx of not compressing anything thats been already small and which is unlikely to shrink more. Here the default is 20 bytes which is very bad as it will usually lead to larger files after the compression. You can set it to the 256 instead:

/etc/nginx/sites-available/default
...
gzip_comp_level 5;
gzip_min_length 256;


Next you need to tell the Nginx for compressing the data even for the clients that have been connecting to us via proxies like CloudFront:

/etc/nginx/sites-available/default
...
gzip_min_length 256;
gzip_proxied any;

 

Then one needs to tell these proxies for caching both the compressed and regular version of the resource whenever the clients Accept-Encoding capabilities header varies. This will avoid the issues where there is a non-Gzip capable client, which is extremely rare nowadays. This would display gibberish if the proxy is giving them a compressed version.

...
gzip_proxied any;
gzip_vary on;

Lastly one needs to specify the MIME-types for the output you would like to compress. We will be providing the services of compressing the images, JSON data, fonts as well as other common file types:


/etc/nginx/sites-available/default
...
gzip_vary on;

gzip_types
application/atom+xml
application/javascript
application/json
application/ld+json
application/manifest+json
application/rss+xml
application/vnd.geo+json
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/css
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;
# text/html is always compressed by gzip module

 


When it is done the entire section should be looking like as it is shown below:

/etc/nginx/sites-available/default
server {
listen 80 default_server;
listen [::]:80 default_server;

gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;

gzip_types
application/atom+xml
application/javascript
application/json
application/ld+json
application/manifest+json
application/rss+xml
application/vnd.geo+json
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/css
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;
# text/html is always compressed by gzip module
}

 

Now you can save and close the file.

As you add many lines to the configuration file there could be a chance that there can be a missing character or the semicolon which could break the things. For making it sure that the file has no errors at this point you can test the Nginx configuration:

$ sudo nginx -t

If the changes have been made exactly as it has been shown in the tutorial there will be no error messages that will be shown. This is the change that will be providing the biggest acceleration in the website speed, you will also be able to configure the Nginx for leveraging the browser caching, this will squeeze the additional performance out from the server.


Configuring the Browser Caching

For the first time when the domain name is visited, these are the files which are being downloaded and stored in the browsers cache. On other visits the browser will be able to serve the local versions instead of downloading the files again. This will enable the web page to load it faster as it will only require the data that has been changed since the last visit. It will be offering a much better experience for the users and that is the reason Google’s PageSpeed Insights recommends that it be implemented.

sudo nano /etc/nginx/sites-available/default


You will be adding a small piece of the code which will tell the browsers for storing the CSS, JavaScript, images as well as the PDF files in the cache for a time period of seven days.

You need to insert the following snippet inside the server block directly after the previous code of Gzip compression:

/etc/nginx/sites-available/default

...
# text/html is always compressed by gzip module

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 7d;
}


The final of the Nginx configuration should be looking as follows:

server {
listen 80 default_server;
listen [::]:80 default_server;

gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;

gzip_types
application/atom+xml
application/javascript
application/json
application/ld+json
application/manifest+json
application/rss+xml
application/vnd.geo+json
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/css
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;
# text/html is always compressed by gzip module

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 7d;
}
}

Now you need to save and close the file to exit. Always ensure that the configuration is having no errors.

$ sudo nginx -t
Then one can restart the Nginx for applying these new directives for the incoming requests.

$ sudo systemctl restart nginx


After this you can measure the results using Page Speed Insights