Cache miss jpg

[Arturro]

Hi,

My website serves listings with pictures.

Example: https://www.okolica.pl/mieszkanie/sprzedam/nowy-sacz/

Those pictures are kept in subfolders of catalog www.okolica.pl/media/*
For example:

In Clouflare we enabled polish pictures option and created a rule:

Hovewer, for some reason Cloudflare misses most of our JPEGs form this path:

Some of JPEGs are converted for WebP, some have status Hit, but most of them miss cache and have to be served from origin.

For example this picture, form the listing mentioned above (https://www.okolica.pl/mieszkanie/sprzedam/nowy-sacz/):

Even though I have reloaded the page several times, the picture is still missing form cache

Maybe some of you have any idea why it happens?

[fritex]

Few things come to my mind.

If the images isn’t yet been cached, it will be MISS.

Therefore, there is a difference if your file extension is JPG or JPEG.

In terms of WebP, are they served from origin as WebP, or rather using Cloudflare Pro Plan and Polish so it converts/optimizes to WebP (the selected ones)?

Otherwise, maybe you have HTTP vs HTTPS, so “double work” to cache?

By default, by using “standard” JPG and JPEG should be cached:

• https://developers.cloudflare.com/cache/about/default-cache-behavior#default-cached-file-extensions

@Arturro

and created a rule

From the screenshot above your Page Rule, kindly consider adding Edge Cache TTL - so they would keep for example at least a month at the Cloudflare Edge and therefore being served from the Edge, meaning Cloudflare will display HIT, rather than if it won’t have one, will display MISS and ask the origin again to serve/cache it:

• https://developers.cloudflare.com/cache/about/edge-browser-cache-ttl

Browser Cache TTL tells the user/visitor how long should the image be keept in users/visitor’s local Web browser cache and use it that way (not needing to ask the origin/server to serve it).

[Arturro]

@fritex

Therefore, there is a difference if your file extension is JPG or JPEG.

We use JPEG.

[fritex]

Add ​Edge Cache TTL to your current Page Rule and re-check then.

Also, disable the Cache option (checkbox) in your Web browser → Developer Console to see if it works.

[Arturro]

@fritex

In terms of WebP, are they served from origin as WebP, or rather using Cloudflare Pro Plan and Polish so it converts/optimizes to WebP (the selected ones)?

CF Pro plan - CF converts some of JPEG to WebP and serves from cache

[Arturro]

I have added long Edge Cache TTL to the rule.

I’ll leave it for a few days and let you know what happed. Thanks a lot for help!

[Arturro]

Still I have same problem.

I did accoriding to your adivice and added long Edge Cache TTL to the rule few days ago and left it for the cache to build up a bit.

it didn’t change anything, CF cache still misses 84% (exactly the same as before) of the pictures in this folder:

I did some more digging on the subject and noticed that even though the Edge Cache TTL is set for a month, CF actually keeps many pictures only about a day. Meaning one day one picture might have status HIT, the next day it is MISS:

Any new ideas what might be the reason?

[sdayman]

@Arturro

CF actually keeps many pictures only about a day.

This is normal. Low-use files get evicted from the cache early.

The Edge Cache TTL setting is a maximum amount of time it’s safe to cache a file. Sites with frequent changes would want that TTL low so as to not serve stale content.

[Arturro]

Is there a way to keep those pictures in cache for longer period of time?

It just so happens that many of those files directly influence LCP, if they are served from cache - LCP is better (lower) wich is very important to me. If they are served from origin via CF proxy it increases LCP lowering site performance…

Anyway cache missing 84% of site content is also poor cache performance…

[sdayman]

@Arturro

Is there a way to keep those pictures in cache for longer period of time?

Constant traffic is what it takes.

As a note, every Cloudflare data center has an independent cache. And it may take a few visits through that data center to start getting HITs. With that in mind, you might run a WebPageTest from Chicago a few times and start getting HITS. Run it again from Chicago and you’ll get a better score. But then run it from Frankfort (if that’s one of the locations), and that’s a different cache.

So keep that in mind when looking at cache stats. A HIT for one person isn’t necessarily a HIT for another. Since you have a local audience, that helps focus traffic through the closest data center.

If you want to warm up the cache (preload it), you’d have to write some sort of script on a local server in Poland that requests your images, and run it every 12 hours or so.