Cloudflare Images - Performance Tips for Wordpress

Hi guys,

I’m hopping that you guys could give me a couple of advices on tips on the best practices on how to take advantage of the new ‘Cloudflare Images’.

I’ve recently signed up for Cloudflare Images, and I’m trying to implement it on my Wordpress website. I’m uploading the images on my website by using the ‘Image Delivery URL’ which looks something like this: https://imagedelivery.net/ZWd9g1K7eljCn_KDTu_OWA/:image_id/:variant_name

However, the loading times are affected when I used my CloudFlare Images, specially when I use them as the Hero Image, in this cases they affect the load time of the Largest Contentful Paint by a lot, even if I preload them.

Mostly, I’ve made tests in my staging environment, I’m using some images now on my homepage though: https://mayangateway.com/
When I see the waterfall audit in GtMetrix, I can see that the photos are taking a lot of time to load (and I am also getting notices from the performance audits which say that I need to cache these image files):

That doesn’t happen when I use photos locally saved directly in Wordpress. So, perhaps this is happening because they are not being cached? so I decided to create this DNS record:

I’m not an expert, so would someone please let me know if creating this DNS record would be the way to go? or should I create a page rule to cache all these static images including this url: https://imagedelivery.net/ZWd9g1K7eljCn_KDTu_OWA/ if so, how would that page rule be like?

I would love to take advance of Cloudflare Images, so I hope someone here can advice me on this.
Thank you in advance.

You will get Error 1014 because you are not allowed to CNAME to their domain.

Page rule should not apply since you are not the owner of imagedelivery.net. You can’t modify imagedelivery.net configurations.

Everything uploaded to Cloudflare Images are considered “cached”.

Thank you for your answers. I’ve erased the DNS record right away.

It’s exactly what I thought, everything uploaded to CloudFlare Images is considered ‘cached’. But when I use the images (by the Image Delivery URL) on my website, they take time to load, specially when I used them as the Hero image even when I preload them. Do you know if there is anything else I should be doing?

For wordpress, I have heavily recommend to use any image optimization plugin with cloudflare APO. Your images will load blazing fast.

I’ve done that too, and it’s worked quite well. The images on my website load quite fast now.

However, what I am trying to do instead now is: I am trying to use the new just released service: ‘Cloudflare Images’ https://blog.cloudflare.com/announcing-cloudflare-images/
The images are optimized and you can set different sizes, which is great. However, they don’t load fast for me.

While they should be, their response headers indicate otherwise ? They’re all showing cf-cache-status: MISS

date: Fri, 24 Sep 2021 18:43:49 GMT
content-type: image/webp
content-length: 122754
cf-ray: 693e291728ad57eb-IAD
accept-ranges: bytes
cache-control: max-age=14400
etag: "cfb8UtdfJayUeP9TK7rPqquA"
vary: Accept, Accept-Encoding
cf-cache-status: MISS
cf-images: internal=ok/- q=0 n=210 c=299 v=2021.9.11
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
x-content-type-options: nosniff
server: cloudflare
:status: 200
2 Likes

That’s interesting.

interesting in fact… perhaps that’s the reason that the images I use in the Hero section are not loading fast?

Hi guys,

After a lot of testing, it seems that the issue is the connection times to the imagedelivery.net, they are not good. I tested adding one of the pictures on one my pages as the Hero background, and you may see the big connection time of imagedelivery.net here: WebPageTest Test Details - Virginia USA - E...bit-of-everything/ - 09/28/21 14:09:28

At the moment I’m using some photos on my homepage, and you may see the connections times of imagedelivery.net in the waterfall of the Gtmetrix audit: https://gtmetrix.com/reports/mayangateway.com/YuzZx6dr/ - or you may see it here:
Screen Shot 2021-09-28 at 16.42.11

I already let customer service know about this, hopefully they can check on this. I will wait what they say before I decide to implement the new Images service on my website.

1 Like

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