Cache Everything for IMAGES only in Wordpress

While Cache Everything with Edge Cache TTL is very fast it will almost certainly break the functionality of your Wordpress site without the Bypass on Cookie option offered by the Business Level of Cloudflare.
But the good news is that you can get very close to the same performance with a very few other tweaks for a lot less money.
Enable Argo. For a small site we are talking $5 to $10 a month and it will reduce latency by about a third. Don’t worry about Argo Tunnel, just sign up and turn the button to on.
Enable RocketLoader and test. This will speed up the loading of Javascript, always a good idea. You will just need to check that it doesn’t cause any plugins you are using to malfunction.
Use a Caching Plugin. I like WPRocket but Wp3 will work too.
You definitely should also use an Optimization plugin like Imagify.
When using Imagify make sure to enable WebP images and to also enable WebP caching in WPRocket. WebP is image optimization developed by Google. This should improve your GT metrix scores.
Now.
Ok you can’t Cache Everything for your entire site. So what. Most of the load on a typical site is in your images.
So create the Following page rule:
www.mysite.com/wp-contents/uploads*
Browser Cache (1 day) Caching (Cache Everything) Edge TTL (1 month).

There are no cookies to worry about with this Page Rule. Everything should work just a lot faster.

If you had a well optimized site to start with and good scores in GtMetrix your html loading should average around 350ms. Image loading and javascript should be extremely fast. Probably the largest part of your loading time will be Custom Fonts if you are using them.

I’d argue that is not entirely accurate :slight_smile:. Images are just plain HTTP requests backed by the file system, load typically comes from dynamically generated content.

Also, images are cached by default, so you won’t need a page rule for that.

Thank You for writing.

Images are loaded by default, you are correct.

Although, since Cloudflare is a pull rather than a push service, the proportion of hits, misses, and expires may vary depending upon how Cloudflare applies its caching rules.

You can check your own results in GtMetrix under the Waterfall tab.

However, the purpose of any Cache Everything rule plus Edge TTL Page Rule is to cache assets at the Edge for faster deployment.

Cloudflare will position cache at the edge for only a very short time. I believe their documentation states 10 minutes.

If you have a high volume of traffic this may not be an issue, but for a smaller site performance can be impacted.

HTML is indeed dynamic. Even if you think you are not changing anything, many modern themes and plugins send different responses to desktop versus mobile based on device queries.

This is why caching HTML can be problematic, but it depends on your individual configuration and goals.

But you can try the setup and page rule and see what happens.

In general, you should not have any issues and you can check the results on GtMetrix.

If you decide to use Cloudflare RocketLoader for your js you will just need to make sure it doesn’t affect any of your plugins.

Personally, I had no problems, but I am very conservative in my use of plugins.

I also have two families of Typekit fonts in use.

My one other suggestion is if you are using Typekit and WpRocket you should prefetch Typekit from WpRocket.

Just paste in these addresses into the prefetch section of WpRocket. It really helps to give the browser these hints.

//use.typekit.net
//p.typekit.net

My typical page is 13 to 14 requests and around 350kb compressed, and my average onload time is 1.3 seconds, although sometimes it is under 1 second.

My largest page has 73 requests is 1.14mb compressed and the average onload is a little under 2 seconds.

Page Speed score is 98%. YSlow score is 94%. Images are optimized by Imagify. WebP is enabled in Imagify and WpRocket.

Average load time for html is around 350ms.

Actually loading typekit fonts is what takes the most time. Usually 400 to 600ms even with every optimization possible.

I have the Pro Plan for Cloudflare and Argo is enabled.

Would love to know how it works for you if you decide to try.

Thanks,

Peter

I am not quite sure what you are trying to say I am afraid.

You do not need any page rules for images, as these are cached by default.

Read the Cloudflare documentation on caching and also on page rules.

If you are happy with the default setting that is fine.

The whole reason Page Rules exist is to give the user more control beyond the default settings.

If you try the suggestions and the page rule I believe you will see an improvement in your page loading times.

Really the only way to find out is to try it. You have nothing to lose.

Many Thanks,
Peter

I am rather familiar with it :wink:

What’s your point? Again, for images you do not need a page rule.

1 Like

And that is actually rather discouraged as you’d run into caching issues when you serve this format to browsers which do not support it. If you want to support it and convert images on the fly you’d need to use Polish instead.

1 Like

Yes. I forgot to mention Polish. Definitely should be turned on. Thank You for the suggestion.

But I do think you should review again the Cloudflare documentation regarding Caching.

Cloudflare is a Pull Cache. This means that you are not guaranteed that all requests will be fulfilled from Cloudflare cache.

If you go to your Analytics Tab you will see how many requests are being fulfilled from Cloudflare Cache and how many are not.

This is why you also need a Caching Plugin for the origin server.

I do not know why you are concerned about browser support for WebP.

If there is browser support they will be served WebP images.

If there is not they will still be served images, just not in WebP format.

For example, Safari at this time does not support WebP.

Yet there is no problem on Safari when you use WebP because WebP is a separate cache that is only served when requested.

Thanks.

Why?

How is that related to that page rule not being necessary?

That is not correct. If you serve that format and it gets cached it will always be served even to browsers which do not support it.

But the main issue is the page rule you mentioned simply is not necessary.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.