如何为javascript / css文件加载0 ms？

Question

I noticed that some files have 0 ms load time, and chrome writes that it is from cache.

You can see in the picture (stack overflow shows it bit small, but just zoom in or open image url in another tab):

And status column is interesting - those with 304 Not modified are having some load time. But at the bottom - admin.js and some other font file - in Size/Content column we see that are are loaded from cache and takes 0 ms.

So why could other files not be loaded from cache if they are not modified?

And is there a simple solution to load all from cache? And when I will want to reload, I will change the file name as I have done to first file - by adding timestamp.

Answer 1

Every time you navigate to other pages or reload one of them*, the browser must check if the resource has been changed or not in the server. If the resource is the same, the server doesn't have to send it again and sends a 304 status code (Not Modified); but if the resource has changed, then it sends the new resource

By default, nginx doesn't send to the browser the Expires HTTP header, which tells the browser that the resource will not change over some period of time (giving him the ability to cache that resource and not asking for it over that period).

So if you know you have some resource that are unlikely to change, you can configure nginx to send the Expires header. For example, if you want the user's browser to cache all images, CSS and JS on your site for one month, you can add the following to the nginx server configuration:

location ~* \.(?:css|js|png|gif|jpe?g|ico|svg)$ {
    expires 30d;
}

If you update any of those files, browsers won't download the new version until the expires period is over. To avoid that and bypass browser's cache you can add a timestamp (or any other parameter) to your files. You can append to the URI the timestamp after a ?, so you don't have to change the internal name of that file on the server.

*Note: When you reload a page, browsers will check if the resources have changed, even if a Expires header was sent when they were downloaded.