Cache images to the same value as page cache-control: max-age

cache

#1

My page has cache headers set to 12 am of the local time as this is the time that the page is updated. This value is always less than 24 hours

The header maxage is set to max-age=31293 as there under just over 20 hours until midnight in the UK

However the graphs are not following the page header cache settings and is set to expire in 30 days and based on this article (https://support.cloudflare.com/hc/en-us/articles/202775670), I thought that cloudflare respects the max-age setting of the page (I have also set cache setting to respect existing headers)

How can I get cloudflare to match the header sent by the page and get it to expire at midnight?


Images not respecting cache headers?
#2

And you have no Page Rules that have anything to do with caching?

Have you confirmed that your server is sending the proper headers?

curl -svo /dev/null --resolve www.tideschart.com:443:123.123.123.123 https://www.tideschart.com/tides/en/Slaughden-Quay-United-Kingdom-tides-chart-ft.png

(change the 123 IP address to that of your origin server)


#4

That’s not the output from your origin server. Try using the command I included, and remember to use your origin server’s IP address.


#6

That’s still Cloudflare. You need to replace 123.123.123.123 with the actual IP address of the web server machine at your web host. That should be the IP address you put as an “A” record for your domain in the Cloudflare DNS page (if you have an “A” record setup)


#8

Hint: If you can’t produce an output that does not include the word “cloudflare” in it, you have not bypassed Cloudflare by means of using curl’s --resolve as @sdayman demonstrated, and as such are making requests that other community members can do themselves to test. What we don’t have, is your origin server IP, so we can’t test against that. If you’re unwilling to share the origin server IP (your right…), you’ll have to make the requests go to it, bypassing Cloudflare, yourself.

If this is difficult with curl from reason, you can always throw your domain with and without ‘www’, in your OS “hosts” file (e.g. /etc/hosts in Linux, or c:\windows\system32\drivers\etc\hosts in Windows), prefixed by the IP of your actual server, and then try to browse directly, and you shall bypass Cloudflare (better restart the browser first though, to make sure it’s not using cached resolving data)


#10

Your Auckland page has a short expiration, but the gb.png image has a high expiration. If the tide chart png is anything like the GB image, the problem is at your origin.


#12

Login to your dashboard, navigate to ‘Caching’, search for Browser Cache Duration, select ‘Respect existing headers’.

Purge the cache afterwards.


#13

Hi Mark, I probably should have included that in my post. I already have respect existing headers.

According to this doc (https://support.cloudflare.com/hc/en-us/articles/200169266-Does-Cloudflare-honor-my-Expires-and-Cache-Control-headers-for-static-content-), cloudways should be setting the image expiry to the same time as the cache control headers?


#14

Your HTML is probably generated dynamically by some server side scripting, such as PHP/Ruby/Python/ASP.NET, right? and I assume you’ve set the max-age there, with server side scripting?

Images, usually, are not served through server side scripting, so whatever your framework is setting for HTML, does not get applied there. Images are typically served directly by the web server (Nginx), and headers for them will be determined there. Look for “add_header Cache-Control” in your Nginx configuration file. Or just for the value 2592000. It’s highly likely you’ll find it there. If not, you can always add your own add_header and set whatever value you want there.

Another approach which is maybe better, is to dynamically invalidate the cache at clients. Since you’ve already invested in creating a dynamic cache period and your expectation is that images will follow the HTML refresh patterns, you could simply append a dynamic suffix querystring to the images URLs from within your HTML. That way, every time the HTML updates (evicted from browser caches), the browser will see a new URL for the image, even though it’s the same image absolute path, and will refetch it.

Example:

<img src="/images/icons/flags/gb.png?now=1550465082" />

(1550465082 is the current unix timestamp, e.g. the output of the time() function in PHP. by the way, don’t call getting time for each URL, it’s just a waste of resources and context switches. fetch the time once from the OS into a variable, and append the value of this variable to all images in your page)


#15

Thanks Shimi, ah that makes sense. Yes currently I calculate the local time to midnight in seconds EG

  header("Cache-Control: max-age=$maxage, must-revalidate");

Is there no way to overide Nginx png max age via php? I have read articles that it can be done via htaccess but that would remove the dynamic typing of it.

I guess adding the date into the filename of the images generated is the easiest fix for this.


#16

Only if you pass all requests for all images through PHP for initial processing… which will slow them down. Then there’s a way to just do the math part in PHP and still having Nginx serve content. This is done via virtual locations and sending a X-Accel-Redirect header from PHP. Perhaps there are ways to calculate from within Nginx. Maybe with Lua?

It’s really simpler to just append a timestamp when generating the links… :slight_smile:


#17

Thanks buddy I’ll give it a shot, hopefully it doesnt hurt my image indexing from google :slight_smile:


#18

It may confuse Google :frowning:


closed #19

This topic was automatically closed after 31 days. New replies are no longer allowed.