A web page usually seems to be working fast but the default Nginx configuration will cause Google’s PageSpeed Insights tool to state inefficiencies in your site and grade the site poorly. PageSpeed Insights are used to measure the performance of a page for a desktop and mobile devices. It fetches the URL two times, once with a mobile user-agent, and the second time with a desktop user-agent. PageSpeed Insights checks if a page has applied best common performance practices and then provides a score, that ranges from 0 to 100 points.
Therefore, in order to make your site seem more efficient we will make edits to the Nginx configuration file for our domain that instantly boost our site’s response speed and its PageSpeed metric increases to above 80/100 so that google will mark it as a fast working site. Since Google uses the speed of our site as a main factor in determining our site’s search position, hence we will work to increase it’s score.
Before getting started:
Make sure you have the following:
- Ubuntu 16.04 server set up
- Server should include a sudo non-root user
- A firewall
- Nginx installed on your server.
- Obtain PageSpeed Score
Get your site’s PageSpeed score before we get started, so that we can compare it at the end after changing the configurations.
To obtain PageSpeed score paste the site’s URL into Google’s PageSpeed Insights service and then clicking on Run Insights.
Now let’s start by configuring Nginx so that the responses are compressed.
- Gzip Compression
When a user opens a site, he has to download a large amount of data containing images and the effects we use via CSS and JavaScript. In order to reduce this time needed to download these we can compress these assets so that they are reduced in size to a more compact version which is comparatively smaller but still contains all the data required. For this compression on Nginx Gzip is one option. Using this compression static assets can be downloaded quicker.
For this, open the Nginx configuration file for your site in a text editor. We will use the default file in example:
sudo nano /etc/nginx/sites-available/default
Locate the server configuration block. First, we enable Gzip compression and set the compression level:
server {
listen 80 default_server;
listen [::]:80 default_server;
gzip on;
gzip_comp_level X;
Replace X with a number between 1 and 9.
Make sure not to compress anything that’s already small and is not needed to shrink much further. The default is 20 bytes, which is not good as it usually leads to larger files after compression. So, set it up to 256 instead:
gzip_comp_level 5;
gzip_min_length 256;
Now, compress data even for clients that are connecting to us through proxies like CloudFront:
gzip_min_length 256;
gzip_proxied any;
Now set these proxies to cache both the compressed and regular version of the resource whenever the client’s Accept-Encoding capabilities header varies
gzip_proxied any;
gzip_vary on;
At last mention the MIME-types for the output you want to compress. In the example will compress images, JSON data, fonts, javascript and other common file types:
ip_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
After specifying the MIME-types, the whole section will look like the following example:
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, save and close the file.
To ensure that the file has no errors till this point, test the Nginx configuration:
sudo nginx -t
If the changes are made correctly and you made no mistakes, you will get no error messages.
- Browser Caching Configuration
Google’s PageSpeed Insights recommends that caching is enabled because when you visit a site for the first time, few files are downloaded automatically and stored in the browser’s cache This is done so that the next time you visit the same site, these files will not be needed to be downloaded again.
Open the default Nginx configuration file in text editor:
sudo nano /etc/nginx/sites-available/default
Now we will add a small code that will tell browsers to store JavaScript, CSS, images and PDF files in their cache for 7 days period.
Insert the following snippet inside the server block directly after the previous code for Gzip compression:
# text/html is always compressed by gzip module
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 7d;
}
If the content of your site doesn’t change frequently then cache for 30 days or more as frequent download is not required.
The is how the configuration of the file will look at last :
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;
}
}
Save and close the file to exit. Ensure the configuration has no errors:
sudo nginx -t
Then restart Nginx to apply these new directives for incoming requests.
sudo systemctl restart nginx
Now it is time to check our results.
- Comparing the outcome
Run your site through the Google’s PageSpeed Insights service once more by pasting the URL and clicking Run Insights. You will see that warnings of compression and browser caching are gone:
Compare the new score against your initial score and you will find drastic changes. Our goal was to have a score above 80. If your site is still below this threshold, there are other things you will need to pay attention to. PageSpeed Insights will help identifying those things and also will provide help to deal with them.
Conclusion
We enabled Gzip compression for specific types of files. Then we configured browser caching for an extra boost. These methods improved the speed of site running on Nginx, regardless of the software it is built with.With the above changes made you will now find that your site works better and loading times has reduced to a lot of extent. This will not only make the users of the site feel satisfied but will also increase search position by Google and hence will help in increasing the ranking of the website. Changing Nginx configuration is just one of the methods of improving your Page speed. To keep things fast you will still need to write performant code, serve assets via a Content Delivery Network (CDN), cache things appropriately and cut back where ever possible.
0 Comments