Serve Static Assets with an Efficient Cache Policy

We have talked a little bit about caching in this guide, but in terms of static assets, such as images, HTML, JavaScript, and CSS, setting a caching policy can significantly improve the delivery of these assets and improve the user experience. Without caching, each time a page is requested a browser must download all these elements and then deliver them, which causes un. With caching enabled, the browser stores these assets during the first user’s visit. However, on subsequent visits, since the assets are stored in browser they can be retrieved and delivered more quickly. Additionally, depending on the asset, you can tell the browser how long these assets should be stored. For items that are unlikely to be updated frequently, this can be set for as much as a year out. However, be careful with setting too long of an expiration date, as it may cause the browser to serve outdated content.

A Lighthouse report will identify all the assets that are not currently set up to be cached along with the TTL (Time-to-Live) duration and an estimate of the data saved for each file if it were cached. Only assets that are identified as cacheable assets will be flagged. A cacheable asset is anything that meets all the following requirements:

• It is an image, font, media file, script, or style sheet.
• An HTTP response of 200 (OK), 203 (Non-Authoritative Information), or 206 (Partial Content) was received.
• There is not an explicit no-cache policy set.

Depending on your server framework, there are different methods to set caching policies. Review your framework documentation for exact steps on how to set your cache control headers. Additionally, CMS frameworks like WordPress can provide you with plugins that will assist you with setting cache policies automatically for your site. And remember, a long cache policy is not always best. It depends on the specific needs of the business and the type of asset.