How to leverage browser caching using Nginx

Simple trick to speed up your website

What is a browser caching? When your visitor comes to the website images, text and rest of the content is loaded. That takes time and it is natural. However, when he comes back again why should his browser repeat the whole operation? You can ask Nginx to set the expiry date for the images so they won't be loaded every single time. That is my understanding. This tutorial will guide you through the process based on the real-life example.

1. Check your website current speed

You can do it by simply using Google tools: https://developers.google.com/speed/pagespeed/insights

On this tutorial, we are speeding up www.biuro-brzezina.pl. The test indicated the speed of 70 for mobile devices and 80 for a desktop.




2. Tune the Nginx

Copy and paste those couple of lines:

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

365d might be too long, remember that user needs to be able to see some new graphics;) Now save it (ctrl+o), test it (nginx -t) and restart nginx using:

service nginx restart


3. Run speed test again

Come back to point 1:) In this particular case speed bumper on mobile to 74 and on the desktop to 82. IN some cases, like if you are using web applications(like Odoo) it will go much better but don't expect miracles. This is just one step to make your website 100/100. If you couldn't see the images after the process you might want to add "root /var/blablabla" before "expires 365". 



Speeding up Odoo

 If you are using Odoo...

This blog is mainly about Odoo(for now). If you used the code from above in your nginx for Odoo you must have realised that styling got messed up. In that case you should simply use(Source: https://www.odoo.com/documentation/11.0/setup/deploy.html):

# common gzip
 gzip_types text/css text/less text/plain text/xml application/xml application/json application/javascript;
 gzip on;