Community Post

How To Quickly Leverage Browser Caching on Nginx

Leader Internet

If you landed on this page you’ve just ran your site through the Google Pagespeed tool and received the error:

Leverage browser caching

It looks something like this:

Pagespeed Score

This can be a killer for your websites performance because it degrades the experience for users and gives them slower load time.

More importantly, Google takes page speed into consideration and uses it as a strong ranking signal to indicate site quality. Therefore if you have this error your pagespeed is not what it could be and google will have a lesser view of your domain.

The good news however is that if you are hosting on an Nginx server, there is a very simple and quick fix.

All you have is make a simple change in the nginx.conf file for your site.

How To Leverage browser caching

ssh onto your server and issue the following commands:

cd etc/nginx/sites-availiiable

nano YOUR_SITE.conf

Then add the following inside a server block:

#browser caching of static assets
    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 7d;
}

save and exit

See the example in the screenshot below lines 21-24:

After that is saved restart nginx by issuing the following command:

service nginx restart

That's it. You have now Leveraged Browser Caching of your static assets. Reload the front end to make sure everything is ok.

How It Works

This configuration will instruct the users browser to cache assets for seven days. If they return on day three they are served the version from cache. If they return on day eight then the browser will request the latest version.

If you push a change to your assets in the mean time users will not receive the update unless they clear their browser cache, start an incognito session or you bust the cache on production.

Customizing

The version included applies a blanket seven day cache to all assets. However you may not need to change assets as frequently or want to change more often than that. For example let’s say your css and javascript only changes once a month. There is no point forcing the user to download a new version every week. Therefore, you can create a separate directive for css and js only:

#browser caching of static assets
    location ~*  \.(jpg|jpeg|png|gif|ico)$ {
        expires 7d;
}

#browser caching of css and js 
    location ~*  \.(css|js)$ {
        expires 7d;
}

This would go underneath the existing directive. Just make sure to remove css and js from the first instance.

There are no limits to the customization options. You can cache for as little as one day all the way to a full year,

Why is this needed?

Forcing users to download new assets every time they come to your site is bad practice. It wastes bandwidth and if they are browsing on their phones it will eat their data. You need to keep them happy so provide a more pleasant and faster user expense by Leveraging Browser Caching.

What will I gain?

Once you implement this quick fix your site will instantly be faster and the benefits of this are endless. Run it through Google page speed and you will see a score increase from before. That is the real win here as it sends a strong signal to google that you care about website quality and user experience and they will reward you with better rankings as a result.

Conclusion

In this post you learned How To Leverage Browser Caching On Nginx which boost your website speed and search ranking. For more expert tutorials on Web Performance and Pagespeed visit the Leader Internet Blog and join our newsletter.

Leader Internet

Software Development Company In Ireland.

Experts on blazing fast SaaS, Apps and Websites.

PHP, Laravel and October CMS enthusiasts.

Follow the Leader Leader Internet Blog for more quality tutorials.