Serve static assets with an efficient cache policy on Laravel Forge

Posted on Jul 15, 2019

Share

If you are managing a VPS with Laravel Forge and trying to optimize the PageSpeed Insights score, you’ve probably been advised to ‘Serve static assets with an efficient cache policy’ by Google PageSpeed Insights.

serve-static-assets-efficient-cache-policy.jpg

There is a quick and easy fix for this problem that only takes a five minutes to complete and immediately removes the warning from PageSpeed Insights results. To prove this actually works, we are going to optimize one of our own domains so you can see How To Serve static assets with an efficient cache policy first hand.

Contents

Measure initial page speed

Before you make the fix you should get the current score by running your site through the PageSpeed Insights tool. Our domain leaderapps.xyz scores 99 on desktop* and one of the things that Google suggests we do is to Serve static assets with an efficient cache policy.

desktop.jpg *leaderapps.xyz is just a demo website. It doesn't have many Javascript tags or assets that can slow down page load so that is why it already scores 99.

Serve static assets with an efficient cache policy on Laravel Forge Explained

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

Go to sites > your site

select-site.jpg

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 NGINX

On a regular VPS you would have to restart NGINX by running a terminal command but forge 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 Serve static assets with an efficient cache policy 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.

Measure the improvement

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

desktop-after.jpg

As you can see we have moved up one page speed point to 100 on desktop and the Leverage Browser Caching warning is no longer there.

How It Works

These few lines of code will tell a users browser to store assets in the browser cache for a period of one week. Any visits during that time will load files from the cache. If a user returns after seven days, the browser will realize the cache has expired and request the latest version of the files.

There is downside however. If you release updates to your static assets, 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 need to control this on your end by busting the cache which means adding a parameter to the asset url. This tricks the browser into thinking that it’s a new file and downloads a fresh version.

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!

You can create a separate directive that only handles PDFs and applies a longer cache window:

# 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.

Everyone will have a different use case so feel free to customize and play around with variations as needed.

Benefits

Implementing this simple change will immediately boost the performance of your website and reduce the load time for users on all devices. 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 Serve static assets with an efficient cache policy on Laravel Forge using a few lines of code. This will increase your site speed and may raise your position in the SERPs. If you want to keep your score high, you need to monitor it. Consider using PageSpeedPlus to get daily alerts when your scores fall.

Try PageSpeedPlus Now