Caching control on a js script

Performance
#1

Hi, I have a website that will be accessed during a tv show. I’m expecting a peak of traffic during that time. Basically it’s a list of nominees that you can scroll through and during the gala as winners are revealed I update the page to show the nominee as a winner. The one page site is completely cached and static. It uses ajax (jQuery getScript) and calls a js file every 15 seconds. The js updates the winners in the dom if need be. This works perfect but the only problem is that since jQuery needs to use a cache breaking querystring to make sure the browser gets the latest version each time, cloudflare also request a new file each time. Since the file will only update a dozen time during the night and multiple users will load the same script over and over, what I wanted to do is to cache the js file in cloudflare and manually trigger a purge of that script cache whenever I update it.

I created a page rule for that script url with a Cache Level: Ignore Query String but l it seems that the page keeps loading the script with status 200 and ignores my page rule. I tried adding a widlcard at the end of the url where the number is but still doesnt work. The querystring jQuery creates looks like this glo-results.js?_=1615950976744 and then increments each time

I can see on the cache performance page that that the URL is served from the origin server the time. Even if it’s a tiny 721 bytes file I’m worried of the effect that thousands of simultaneous request for that file on the Godaddy server that night might crash it.

Any idea how I could make this work?

#2

Just as a test, how about adjusting your Cache Setting for a global Ignore Query String? Would that interfere with anything during that time period?

#3

Good guess but no. Even with Ignore QueryString at cache setting that page bypass cache. Maybe it’s because it’s fetched by ajax ? Cloudflare would deal with it differently than a browser request?

#4

I’ve not investigated this possibility. A cached resource would still net a 200 status, as Cloudlfare is delivering it like any other requested resource. But saving that extra step of pulling it from the server.

But as for the Ajax twist, I’d think that if the resource is showing up in a browser’s Dev Tools each time it’s called, it would behave like any other cacheable GET request with its own Request and Response headers.

#5

This post was flagged by the community and is temporarily hidden.

#6

I would have thought so too. By default Query ajax sets the max-age to 0 for scripts so that the browsers never caches the script. This can be overwritten but when I did the problem became that the browser cached it and I had no way to get it updated until I refreshed the browser. I also tried setting the header cache-control in my ajax call as well. I tried all kind of settings in the page rule and for some reason it wouldn’t work. I know the enterprise account has a few more options than the business I use but the “ignore query string” definitely did not work for me for script called though ajax. There is probably a winning combination of settings between page rules and jQuery ajax cache settings to acheive what I wanted but I could not figure it out.

Finally I think I might have found a workaround. I created a Google Apps Script that returns a json and I’m calling it from ajax on the public url deployed. Thanks to Amit for this example Now all I have to do is update an array in my Apps Script, Save & Deploy and almost instantly the ajax on the timer starts getting the updated data. It’s unclear right now as how many simultanous request can be handled by the free account. it’s seems that in public web apps the limit is set for each anonymous connection and each user is requesting it every 10 seconds so it should be fine in term of quotas. I will stress test tonight and find out but so far its looking like a good solution.

1 Like