How To Leverage Browser Caching on Forge


Download PDF

Share


If you're managing your VPS with Forge and trying to optimize the performance you’ve probably received the ‘Leverage Browser Caching’ warning from Google Pagespeed.

how to leverage browser caching on laravel forge

Fortunately there is a quick and easy fix that only takes a five minutes to complete. We took inspiration from the settings recommended by Brian Jackson on the Kinsta.com Blog. He also covers Apache settings if your not on Nginx.

To prove that this actually works, we are going to optimize one of our own domains so you can see How To Leverage Browser Caching With Laravel Forge in action.

Testing your site performance?

Try PageSpeed Plus. Like PageSpeed, but better

Contents

Measure initial page speed

Before you make the fix you should get the current Pagespeed score by running your site through the online tool. Our domain leaderapps.xyz scores a poor 58 on mobile and one of the items that Google suggests we should fix is indeed Leverage Browser Caching.

initial pagespeed score.png

Leverage Browser Caching on Laravel Forge Explained

The only action required is make a simple edit in the nginx.conf file for your domain.

Go to sites > your site

select-site.png

Scroll to the bottom and go to Edit Files > Edit Nginx Configuration

edit-nginx-config.png

Inside the server block paste the following snippet:

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

forge-nginx-config.png

Click Save

The following screenshot is the entire server block for our site so you can see where we include the directive:

server-block.png

Restarting

On a regular VPS you would have to restart NGINX by running a terminal command but one of the many wonderful features of forge is that allows you to do this from the GUI. At the top of the page click the dropdown for:

Servers > Your Server

Scroll to the bottom of the page and select:

Restart > Restart Nginx.

Finished

Task Complete! That’s everything needed to successfully Leverage Browser Caching of the static assets on your website. You should reload the front end to check everything is ok and make sure you haven’t left a syntax error in the config file.

PageSpeed Problems? Let us solve them. Talk to the pro's and speed up your site.

Contact

Measure the improvement

The change is instant so you can immediately run your site through Pagespeed to see what difference it made to the score.

score-after.png

As you can see we have moved up two page speed points to 60 on mobile and the Leverage Browser Caching warning is no longer there.

This is still poor but we are only at the start of the Pagespeed journey for leaderapps.xyz and will follow this post up with more tutorials on how we beat the Pagespeed tool.

How It Works

These few lines of code will tell the users browser to store assets in the cache for a period of one week. For any visits during that time they get served the file from their cache. Once a week has passed and they return the browser will realize the cache has expired and request the latest version of the files.

The downside is if you release updates to your static assets, the users will not receive the new version unless they clear their browser cache or start an incognito session.Realistically that won’t happen so you can control this on your end by busting the cache which means adding a parameter to the url. This tricks the browser into thinking that it’s a new file and downloads it.

Customize For Your Use Case

Caching all assets for one week may not be suitable or necessary for all files. For example, it’s highly unlikely you will have pdfs that will be updated more than once a month and if you do, they should be hosted on CDN instead!

There is no good reason to make users download a new version every seven days so you can create a separate directive that only handles PDFs:

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

# browser caching of pdfs
location ~*  \.(pdf)$ {
    expires 30d;
}

Place this directly after the current directive and make sure that pdf is removed from the first snippet.

Everyones use case will be different so feel free to customize and play around with variations as needed.

Why is this good

Implementing this simple change will immediately boost the performance of your website and reduce the load time for users on all devices, just like putting CloudFlare in front of your site. More importantly, it demonstrates that you care about the technical quality of your website which means Google will view it in a more positive way. It’s impossible to predict what difference that will make to your ranking but PageSpeed Really Matters to Google so if you're satisfying one of their suggestions it can only be good for your domain.

Conclusion

In this post you learned How To Leverage Browser Caching With Laravel Forge using a few lines of code. This will increase your site speed and may raise your position in the SERPs. To follow our story on boosting the pagespeed score of leaderapps.xyz join our newsletter and keep an eye on our blog for weekly updates.

Bonus Content

Enter your email to download our Web Performance Checklist. It contains proven techniques for creating blazing fast sites with high PageSpeed scores.

Posted in Web Performance on Mar 29, 2017

Comments


Vlad 07.13.2017

Possibly the quickest performance win I've ever had. Literally took 60 seconds to implement!

atieh 08.20.2017

it was very useful tutorial, it worked like a charm

Frank 07.18.2018

Very useful advice, thanks for that. In my personal tests it went from: 90 - mobile 60 - desktop to 95 - mobile 60 - desktop

Maybe if you include js and css file it might improve

Leave a Comment: