Cloudflare cache
Hey! How exactly should I set up my cache rules so it caches "more" and better?
89 Replies
It really depends on your setup. It's saying there you have some static assets that could be cached longer. You could just have your origin return Cache-Control headers with longer ttls, or you can use Cache Rules to override that.
If your website fully static? Do you have dynamic parts of it? Can your dynamic parts be cached for any amount of time at all? etc
Oh, so it's only about the caching length?
I set that, is it bad or good or what's up?
That warning is just about length yea
Can I optimize it any further?
It really depends on your web application. That is pretty excessively long though, I would recommend a shorter browser cache ttl (day or two max) and longer Edge Cache TTLs
longer Edge Cache TTLs ?
Yea, how long Cloudflare will keep it on edge on their edge
And why is it a bad idea to have that long browser cache ttl?
If you change an asset and a client has a super long browser cache ttl, client won't see that change, for up to a year
ohh
But I have it set to 1 year and
When I make a change and refresh, I can see it
This is sometimes ok if you are versioning assets by name, like if your css is {sha1}.css, so on any change it'd be a new cache key anyway, but if you are using static file names then less ok
It's an online store, made using sellix.io
that is really vague. What change did you do? Is it from the website doing a fetch request? Is it from a site update on a versioned resource, etc
I'm not a dev, i have no idea
then I wouldn't play with it. If it's an online store you want to be really careful with what you're caching
Yea, but I'd like to speed up my website
Efficient cache policies will only really help on repeat visitors, and only by a marginal amount. If you're using a platform already, trust the cache headers they are returning, and change browser cache ttl to Respect Existing headers
So... no cache?
How about the 1 or 2 day browser cache ttl?
It's way too hard to tell without knowing more about the website itself.
There is already some browser cache for you go have got that warning. The platform you are using is returning Cache-Control headers with an age they think is appropriate. If you override it, and they do a change to a specific js file or something to fix a critical issue, you may not see it for longer then they would expect on your website.
I can send you a website link if it helps
All that warning is Cloudflare saying "hey you have some static assets that could have a longer cache, we think"
Sure
So in this specific case, what should I do about the cache?
Cloudflare speed test under the hood is just using Google's pagespeed test, so we can get more info there: https://pagespeed.web.dev/analysis/https-gamingchairservices-com/a7nwp3ezni?form_factor=mobile
I see, but I'd like to set up the cache thing first
it looks like all of the assets it cares about having efficient cache policies are ones you do not have control over
Oh, okay
So what do I do on my end?
all the ones under your site are under challenge platform, zaraz, or rocket loader
mhm
Did you set back the Browser Cache TTL to Respect Existing headers? Could rerun with that, it looks most of the assets are coming from sellex's domain
Right now browser cache ttl is set to 2 days
eh those are minor anyway though, the big issue with your site is main thread work/javascript execution time
So do I change it back to Respect Existing headers?
Or what do I do?
I'd prefer to take care of one thing first before proceeding to the other
I would yea, just to make sure it won't mess with anything in the future.
But it means that it won't cache as much and be slower, right?
"Determine the length of time Cloudflare instructs a visitor’s browser to cache files. During this period, the browser loads the files from its local cache, speeding up page loads."
Right now, all of the static assets are coming from sellx's domain and not yours
I would just set that back so you don't mess up something in the future and confuse yourself
Oh okay
So it doesn't slow anything down 😂
Respect Existing Header does not mean no cache, it just means use the existing ones
👌
What's the next thing I should work on within cloudflare?
Your biggest issue is just sellx itself
Lots of Javascript, slow response time for root page at times
Mobile Analysis by Pagespeed just says the same basically
Is there anything I can do about it in cloudflare?
There are some things but I wouldn't expect too much magic, CF can only do so much when the site is serving a ton of javascript that is just slow
Alright, let's do what we can do 😉
Under Speed -> Optimization -> Content Optimization, make sure Auto Minify is on. You could also try turning Rocket Loader off, under that same section, it tries to help but sometimes can do more hurting them helping/makes it harder to see what exactly is slow
Rocket Loader is off, as with it on, my site is getting broken
yea that's rocket loader for you. Is it off though? I still see it
looks off to me
when I enable it, the site is broken
and auto minify is enabled
oh sellx is using Cloudflare, it's from their configuration
odd
but probably
Looks like you are using both Google Tag Manager and CF Web Analytics, not sure if purposeful or forced from them. GTM is kind of slow
Hmm
Is it the thing where I put the tracking ID?
Yea, GTM does need a tracking id
I have the option to use that thing in sellix
AND in cloudflare there's a similar thing
I think I have both enabled 😂
Which one do I disable?
You do have both Web Analytics & GTM
Some people want both, it's up to you. CF Web Analytics is lighter and more privacy respecting. Google Tag Manager/Analytics is less privacy respecting but way more analytics
I'd stick to CF then
So to get rid of google's what do I do?
disable it in sellix?
Yea disable it there
done
can you see if it got disabled in the speed thing?
Sure. Under Speed -> Optimization, do you have everything that isn't Upgrade required on? Focused mostly on HTTP/3, 0-Rtt Connection Resumption, and Early Hints can be nice as well
Yes, everything but rocket loader
yea GTM is gone. Your score went from 36 on mobile -> 46, 91 -> 94 on desktop. That's something
That's pretty good
Other then that though, your options are kind of limited. You could try CF Argo Smart Routing for better origin connection/improves inbound connection routing as well, but it's $5/month + $0.10 per gigabyte used, and might not help too much depending on sellx.
You have a few unoptimized images, but they're from sellx's domain so you can't touch them.
Does sellx have any options to use other themes/optimize assets? It is pretty high, ~5.56mb of assets uncompressed and 172 requests, some ~59 JS files and ~66 css files
Can I limit agro to like $10 a month, so no matter what happens I don't pay more?
Sadly no, you can add billing alerts though.
I don't want to wake up one day with a $1000 bill
Argo gives you Enterprise like inbound routing, which can help a lot in Asia-Pacific region if you've got a lot of visitors from there, and help reduce origin connection. But if your origin is just slow at generating the page, which it seems to be, it can only help so much.
I see
What do you mean by unoptimized images?
I can upload my own to sellix, that's why they're showing up as theirs
looks like just two:
https://cdn-theme.mysellix.io/shops/360225/themes/115895/728c7f31b2790d8654191a123734794365fd648171078.png is slightly unoptimized/could be made smaller. It's sized pretty big for what it a tiny image is in the top left.
https://cdn-theme.mysellix.io/shops/360225/themes/115895/20acfcc60dc2a53b1eba4f568044e18e65fd69b242cf7.jpg is in an unoptimized format. They've got Cloudflare Polish on to optimize images on their own site but looks like not converting them to webp
Oh, these are mine
Your bigger issue is the theme thuogh
Does sellx have any options to use other themes/optimize assets? It is pretty high, ~5.56mb of assets uncompressed and 172 requests, some ~59 JS files and ~66 css filesIt looks like you can make custom themes. Any way to have them be more optimized/clean them up?
Probably yes
I'll take care of the images first
I can only upload these file formats
Which one should I use?
jpeg is compressable and generally smaller. png is loseless/preserves image quality
Which one should I go for the logo?
can just use png, I would just run it through some compression tool/resize it a bit smaller. It doesn't need to be 1000x100x if it's only shown in 30x30 in the header
So Like 64x64 would be good?
or 128x?
Sure, either of those are reasonable. You are forcing the size to 30 height max always, won't get much bigger
on a 4k screen it would be 4x that, right?
nah, you're forcing it to a max of 30 pixels heigh everywhere
Oh
So 30x is okay?
It looks much worse now
What's wrong?
I made it 30x30
I just made it 90x90, looks better
well, still bad
I don't get it
It's not going to be bigger on a bigger screen, but removing too many pixels will still make it grainy, plus I assume you're running it through a compresser/optimizer of some sort
Alright, I used a different resizing tool and made it 180x180, looks better now. Can you check it on your end?
And also performance wise if it's optimized now
Compressed the 2nd image as well
@Chaika?
@Chaika 👀