CODEWITHSUNDEEP
google-chromehttpbrowser-cachecache-control
Garrett
Garrett

Reputation: 4394

Browser loads JS files from cache, but not CSS files

When navigating my site, my browser is loading the JS files from cache, but not the CSS files. This happens both running a local server and on the live site (to me and apparently to other users, which is apparent since the logs show mostly .css files getting loaded).

I've tried the other solutions (example): I am clicking around on hyperlinks (not refreshing) and my Chrome Devtools do not have "Disable Cache" checked.

Here is the initial request (using CTRL+F5 for a hard refresh):

enter image description here

Then navigating back to that page creates another request:

enter image description here

(Note: there is no Cache-Control sent in the second request, proving that I indeed did not refresh)

As expected, the server responds with a 304 Not-Modified for the .css file, but I don't understand why it's making a trip to the server at all (notice below the .js file is retrieved without a server request).

enter image description here

I believe you can look at the issue first-hand on your own machine by going to https://up.codes. I'm using Chrome 71.0.

Why are the CSS files not being cached?

Upvotes: 4

Views: 2407

Answers (4)

Garrett
Garrett

Reputation: 4394

@Allen found the issue (Vary header included cookie and the cookie was changing between requests), but I'll show how to fix it for the case of Flask for posterity. You can use Flask's @app.after_request() hook to make sure Flask does not add cookie when it hits this line:

@app.after_request
def add_header(response):
    url = request.url
    if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or
        '.gif' in url) :
        # Flask adds to the header `Vary: cookie` meaning the client should 
        # re-download the asset if the cookie changed.  If you look at the Flask
        # source code that comes next after the below return, it will add 
        # `Vary: cookie` if and only if session.accessed is true.
        session.accessed = False
    return response

Upvotes: 4

Allen
Allen

Reputation: 6505

Your server responded with different session cookie when requesting these css files, and your header set with Vary: Cookie, which caused the browser to send request again because of the session cookie change.

Upvotes: 1

Radu Diță
Radu Diță

Reputation: 14171

Chrome uses multiple types of caches.

Blink (the rendering engine that Chrome uses) uses an in memory cache and a disk cache. It uses this cache for images, fonts and js files. As long as a file of that type is still in the memory cache or the file cache it will be loaded from there and skip the WebRequest API, this means that no call is made to the server.

I don't know exactly why css files are not being cached by Blink, but this is the reason why you see an HTTP request for css files and not for js ones.

Note, that if, for some reason, the js file is evicted from the memory cache and the disk cache you will see an HTTP request for the js files also.

Upvotes: 1

Abhishek
Abhishek

Reputation: 5

Check out for your web.config's compilation attribute, if its:

<compilation debug=”true”/>

CSS will get continually downloaded by clients on each pageview request and not cached locally within the browser.

If its set to false, the resource is only downloaded once to the client and cached there.

Check out this post: Chrome will not cache CSS files. .js files work fine

Upvotes: 1

Related Questions