0

my page loads jQuery from https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

On repeated loads, looking in chrome dev tool network tab I see for jquery.min.js a return status of '304 Not Modified' with time/latency sometimes up to a second.

I can also see in devtools that the response header for jquery was 'Expires:Thu, 31 Dec 2037 23:55:55 GMT' , still it returned 304

For other files my site, for example cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js , I see a return status of '200 OK' and '(from cache)' under size and they have super short latenct/time (which I guess means 100% cached result with no remote roundtrip)

How can I tell the browser that if the jquery url exist in the cache to use it without any remote traffic ? I need the fastest possible load time for my site.

Thx!

kofifus
  • 17,260
  • 17
  • 99
  • 173
  • 1
    Both of your JS URL examples are working as expected for me - F5'ing the page will get 304's from both of them, but loading the page without F5'ing (by clicking a link to the page) is pulling both files fully from cache. How exactly are you testing? – Joe Enos Mar 22 '16 at 21:52
  • interesting - it seems to the refresh which is causing the issue ! why would that be ? – kofifus Mar 23 '16 at 01:05
  • 1
    Refresh using F5 will always make requests to the web servers for all resources - even though most of them will come back as 304. This is by design and is a good thing - users generally should not generally be refreshing a page manually, and if they do, then you should give them the opportunity to get updated resources. I'd suggest testing by opening Fiddler (just to avoid the noise of viewing cached responses in the Chrome dev tools), and act like a normal user, and see how much HTTP traffic actually happens during a normal user session, to see if there's anything you really can tweak. – Joe Enos Mar 23 '16 at 03:29
  • great if you post an answer I'll mark it as accepted thx! – kofifus Mar 24 '16 at 04:11

2 Answers2

1

When Chrome puts files (like your jquery.min.js file) into the cache it keeps track of when the server said it was last modified. Whenever it sees the file again it asks the server if it has changed, and the 304 response you see is a sign that the server has confirmed that there was no change and Chrome should use the cached version.

Without such a check, your page couldn't know if the file located at the URL you provided has changed. Also see the answer here: How “304 Not Modified” works?.

However, the browser doesn't always have to make this check. The files being served also have an Expires value, which tells the browser how long to wait before checking whether there was a change. If the file you fetched before hasn't "expired", the browser will simply use the file from its cache directly.

When you see a 200 OK as well as the (from cache) indicator it means the file was used directly from the cache.

See:

What is the difference between HTTP status code 200 (cache) vs status code 304?

Yahoo's performance best practices

Community
  • 1
  • 1
harperj
  • 63
  • 5
  • I'm confused. For other files my site, for example https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js , I see '200 OK' and '(from cache)' under size and they have super short latenct/time. Why doesn't jQuery get the same effect ? – kofifus Mar 22 '16 at 02:01
  • @kofifus You bring up a good point, the 304 return code means that there is an extra communication with the CDN. I'll edit my answer to address this. – harperj Mar 22 '16 at 02:04
  • thx, I edited my question as well. My main point is - is there a way for me to serve jQuery DIRECTLY from the cache without any remote communication ? – kofifus Mar 22 '16 at 02:09
  • 1
    @kofifus The most straightforward way is for it to be served from the CDN (or wherever you might host the file) with an `Expires` header which gives a date long into the future. This is discussed in the performance best practices link I added. [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Cache) are related but aren't supported in all browsers. – harperj Mar 22 '16 at 02:51
  • ok great, so is there a CDN that will return jquery with a never expires or something equal ? or do I need to somehow ask the CDN for that ? – kofifus Mar 22 '16 at 03:00
  • I can also see that devtools that the response header for jquery was 'Expires:Thu, 31 Dec 2037 23:55:55 GMT' , still it returned 304 – kofifus Mar 22 '16 at 03:58
1

Refresh using F5 will always make requests to the web servers for all resources - even though most of them will come back as 304.

This is by design and is a good thing - users generally should not generally be refreshing a page manually, and if they do, then you should give them the opportunity to get updated resources.

I'd suggest testing by opening Fiddler (just to avoid the noise of viewing cached responses in the Chrome dev tools), and act like a normal user, and see how much HTTP traffic actually happens during a normal user session, to see if there's anything you really can tweak.

Joe Enos
  • 39,478
  • 11
  • 80
  • 136