We recently added a nice help guide to our documentation on how to set up cache-control headers on your websites in order to boost page load speed and performance.
The help guide is here:
While it might look a bit intimidating, it just involves some copying and pasting, and changing one Cloudflare setting, so it’s not too terribly involved, and the benefits of adding proper caching are worth it.
We also made a YouTube video if you need a visual guide on how to get caching set up and working.
Have a look, and if you have any questions feel free to let us know. If you host with us, we can help you get your caching set up and customized for your sites’ specific needs, so reach out if needed!
You’re not giving up Cloudflare by implementing the caching listed in the help guide.
Basically the caching rules tell your web visitors’ browser to store the assets locally for x amount of time (depending on which caching rules you implement). Therefore on repeat visits, your web visitors’ browser doesn’t have to reach out to Cloudflare’s edge at all for those resources, it just loads them from its local cache (memory). That’s the fastest since the browser is not having to make a call to any server (Cloudflare or your origin server). It already has that content in its cache so it just says “here you go, I have it already.”
Cloudflare caching and browser caching work together; they’re just different layers of caching.
Oh - thanx - now I get it - stays on users data folder - I misunderstood - thought it was going somehow faster to one’s computer…like GZip or other….
If I understand this correctly, it is something I don’t want to happen. With 45 Gallery Pro pages that get modified regularly, I want a fresh reload every visit.
I used to have a problem with Classic photo album pages where a change to the page would mess up the thumb display and captions because of cache issues.
Doesn’t seem to be a problem now with Elements and Elements hosting.
If you are publishing images that are overwriting images of the same name, then yes you wouldn’t want to set long cache durations for image assets. For example if you publish image.jpg, then a day later you republish that same image.jpg because you touched it up or something, then you wouldn’t want to have a long cache duration for that.
However if you are just publishing new images without overwriting the old ones, for example today you publish image.jpg and tomorrow you publish image2.jpg while image.jpg stays the same, then that wouldn’t matter because the browser doesn’t have that new image2.jpg in its cache, so it’s going to pull a fresh copy of it.
If you still wanted to take advantage of browser caching but you don’t want to set long cache durations for images, you could replace the Images section of the .htaccess rules with something like:
# Images ExpiresByType image/avif "access plus 1 day" ExpiresByType image/webp "access plus 1 day" ExpiresByType image/jpeg "access plus 1 day" ExpiresByType image/png "access plus 1 day" ExpiresByType image/gif "access plus 1 day" ExpiresByType image/svg+xml "access plus 1 day" ExpiresByType image/x-icon "access plus 1 day"
That way the browser would only cache those image mime types for 1 day. You could even do something shorter like 6 hours, depending on your publishing frequency.
EDIT: Just a heads up, Cloudflare is already caching your images for 4 hours, as that’s the default for Cloudflare caching without your own cache-control headers added per our guide.
That does sound strange, not sure what was going on with Classic in that case, but as mentioned your images are already cached for 4 hours by default as that’s a Cloudflare default value.
I don’t think you’d have the same issues with setting up caching on your Elements built site, but it is easily reversible in case you noticed anything strange going on. Simply remove the rules from your .htaccess file and change the Cloudflare setting back to 4 hours as that’s the default. Then purge your Cloudflare cache and done.
will read and learn…. Thank you 