Use Efficient Cache Policy with Static Assets

If static resources in the web page cannot perform this caching, in other words, if they are not cached, Google Lighthouse scans and flags them. Like in the image below:

In order for the Lighthouse system to accept a page as cacheable, several different conditions must be met. The following conditions must all be met at the same time:

1. The resource must be in one of the formats such as font, image, media file, script, or stylesheet.
2. The resource must have an HTTP status code of 200, 203, or 206.
3. The resource must not have a no-cache policy. Because if such a situation occurs, the necessary conditions cannot be met.

The Google Lighthouse system tells you that an audit has failed and the page in question needs to be fixed, using 3 columns:

1. URL: The URL associated with the cacheable resource search is given to the user. In this way, the user easily navigates to the area in question.
2. Cache TTL: The user gets detailed information about the cache duration on the page in question.
3. Size: Size of data saved by users is written.

How to pass the audit? – Caching static resources using HTTP caching

You need to make your server return the Cache-Control HTTP response header. Here is an example:

Cache-Control: max-age=31536000

The max-age value you see above means: How long should the browser cache the resource in question? This value is the calculated version of this time in seconds. Generally, the value 31536000 is preferred for this. This number of seconds is the number of seconds in a year (24 (hours) x 365 (days)).

If the basic properties of the resource change, mean that the user changes his or her browsing habits, you can use no-cache to cancel the previously saved cache data. In this case, although the browser continues to cache the file marked as no-cache, the control through the server cancels it.

Important Tip: Remember, high cache duration does not always provide the best result. This may prevent necessary improvements in website navigation. Therefore, determining the cache time according to your visitor profile is something you have to do.

There are different methods of caching and they also need to be customized. You can also browse our other related content.

Using Chrome DevTools to verify cached responses

If you want to check what is in the cache files, use Chrome DevTools and open the Network tab from there.

1. You can then open DevTool by pressing Control + Shift + J (or Command + Option + J on Mac).
2. Click on the Network tab.

For example, below you see a report about size in the relevant column in Chrome DevTools.

Chrome pulls the most requested results in memory cache to provide fast service. When the browser is closed, it deletes this data. To examine whether a resource has the cache-control head properly, the HTTP header data must be checked:

1. Click on the URL of the relevant page. This URL is located under the name in the Request table.
2. Then click on the tab that says Headers.