Serve static assets with an efficient cache policy on Laravel Forge
If you are managing a VPS with Laravel Forge and trying to optimize the PageSpeed Insights score, one task you will need to do is Serve static assets with an efficient cache policy.
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
- Serve files with an efficient cache policy on Laravel Forge Explained
- Restarting NGINX
- Finished
- Measure the improvement
- How It Works
- Benefits
- Third Party Scripts
- Conclusion
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.
*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
Scroll to the bottom and go to Edit Files > Edit Nginx Configuration
Inside the server block paste the following snippet:
# browser caching of static assets
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
expires 365d;
}
Click Save
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.
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 year. Any visits during that time will load files from the cache. If a user returns after one year, 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 year may not be suitable or necessary for all files. For example, CSS files might need a shorted cache lifetime than PDFs.
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 182d;
}
# browser caching of pdfs
location ~* \.(pdf)$ {
expires 365d;
}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.
Third Party Scripts
It has to be noted that this only works for assets hosted on your domain. If you are loading resources from 3rd parties, there is very little that can be done about those because they are out of your control. Google Analytics and web fonts are the most common example.
The only viable option is to host the scripts yourself. This will allow your cache control headers to apply but it also means you have to manage all aspects of the scripts from there on such as updates, deployment, minifification.
Personally, we don’t recommend inlining. Your PageSpeed score won’t be perfect as a result but these scripts do have benefits that far outweigh a positive PageSpeed score. Google Analytics is an immense powerful library that provides rich insights into user activity on a site. It is constantly updating so it’s better to leave management in the hands of Google and focus on PageSpeed improvements elsewhere.
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.