Serve Static Assets w/ an Efficient Cache Policy to a Browser

Serve Static Assets w/ an Efficient Cache Policy to a Browser

The “Serve static assets with an efficient cache policy” or “Leverage browser caching” is one of the metrics used by Google PageSpeed Insights and similar website performance testing tools as a suggestion to improve page loading times. In short, leverage browser storage to speed up your website!

The warning indicates that the website doesn’t have an efficient cache policy, which means it’s not using the browser storage to cache static resources like images, CSS, JS, etc. You need to fix the warning to improve page load times on repeat visits by storing these files locally in the user’s browser.

Serve static assets with an efficient cache policy warning in Google PageSpeed Insights

By setting browser caching rules, you can specify how long web browsers should keep your website’s static assets (images, CSS, JS, etc.) stored locally. And the user’s browser will download less data while navigating through pages, which will improve the page loading speed of your website.

Browser caching will surely help your website to reduce bandwidth consumption and the number of server requests. And that’s why it’ll improve the user experience and SEO (Search Engine Optimization) rankings of your site as loading speed is one of the ranking factors for search rankings.

In this tutorial, we’ll learn to fix the browser caching warning by setting up an efficient cache policy in the Apache (through .htaccess file) and Nginx (through nginx.conf file) servers.

Fix Leverage Browser Caching Warning in Apache

You can easily fix the leverage browser caching warning in Apache servers by putting custom rules to the .htaccess file. You can find the .htaccess file in your website’s root folder.

Here are the custom rules for the .htaccess file to fix the browser caching issue for the static files or serve static assets with an efficient cache policy for your website:

## Different Content Types
<IfModule mod_mime.c>
    AddType text/css .css
    AddType application/x-javascript .js
    AddType application/json .json
    AddType text/xml .xml
    AddType image/gif .gif
    AddType image/jpeg .jpe .jpg .jpeg
    AddType image/png .png
    AddType image/svg+xml .svg
    AddType image/x-icon .ico
    AddType image/webp .webp
    AddType audio/ogg .ogg
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/webm .webm
    AddType application/pdf .pdf
    AddType application/font-woff .woff
    AddType application/font-woff2 .woff2
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
</IfModule>
## Set Browser Caching Expires Rules
<IfModule mod_expires.c>
    ExpiresActive On
    # Web files
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
    ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
    ExpiresByType application/xml "access plus 0 seconds"
    ExpiresByType application/atom+xml "access plus 1 hour"
    ExpiresByType application/rss+xml "access plus 1 hour"
    ExpiresByType text/cache-manifest "access plus 0 seconds"
    ExpiresByType text/xml "access plus 0 seconds"
    # Media files
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/svg "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType audio/ogg "access plus 1 year"
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/ogg "access plus 1 year"
    ExpiresByType video/webm "access plus 1 year"
    ExpiresByType application/pdf "access plus 6 months"
    ExpiresByType application/x-shockwave-flash "access plus 1 year"
    # Font files
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/font-woff2 "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType font/opentype "access plus 1 year"
    # Other files
    ExpiresDefault "access plus 7 days"
</IfModule>
## Set Cache Control Header
<IfModule mod_headers.c>
    <FilesMatch "\.(gif|jpeg|png|ico|css|js|swf)$">
        Header set Cache-Control "public"
    </FilesMatch>
</IfModule>

Add the lines in your .htaccess file and save the file after this. That’s it! This change will add an efficient cache policy for the static assets of your site. For example, the user’s browser will store the JavaScript files of your site for 1 year, and it’ll store PDF files for 6 months.

You can change the expiry times according to your needs. However, make sure that it’s not too long because your recurring visitors might not get the latest version of your site. You should not exceed 1 year cache expiration time period as most web browsers ignore them anyway!

If you retest the website with the Google PageSpeed Insights, GTmetrix, etc. after this, you’ll no longer see the “Serve static assets with an efficient cache policy” suggestion to fix!

Leverage Browser Caching Fixed in Google PageSpeed Insights

From now on, your website visitors will get a better speed for repeat visits to your page since the browser has stored some of the content in the web cache as your direction! As a result, your website’s search rankings will improve as page speed is one of the search ranking factors.

Your website is hosted on an Nginx server? There are custom rules for the Nginx servers as well!

Fix Leverage Browser Caching Warning in Nginx

You can add expires header or efficient cache policy for the static assets in Nginx servers by adding these rules in the nginx.conf configuration file in the “/etc/nginx/sites-enabled/default” location:

location ~* \.(html|css|js|xml|json|txt)$ {
   expires 1d;
   add_header Cache-Control "public";
}

location ~* \.(png|jpg|jpeg|gif|svg|ico|woff|woff2)$ {
   expires 365d;
   add_header Cache-Control "public";
}

You can adjust the expiry date to whatever you wish in this code. If you change the “365d” to the “30d” value, the user’s browser will store .jpeg files for 30 days instead of 365 days.

And that’s it! The Nginx hosted site will no longer be asked to fix the leverage browser caching warning. The site will be much faster after this, and this will result in better search rankings.

Final Thoughts

Using browser storage is one of the best techniques to improve the page speed of your website. It’s applied to store static content like images, CSS, JavaScript, etc. to the user’s browser.

And as a result, users enjoy faster loading times as it cuts the HTTP requests by a lot. That’s why serving static assets with an efficient cache policy improves the search rankings.

You can fix the leverage browser caching warning in the Apache servers by putting custom rules to the .htaccess file and in the Nginx servers, it can be solved through nginx.conf file.

Liked this tutorial? Please share this tutorial far and wide! Have any other tips or questions about fixing the leverage browser caching? Let us know in the comments section below!

Leave a Reply

Your email address will not be published. Your comments must follow our guidelines.