Cloudflare CDN, APO and Images don't seem to have an effect

Cloudflare is configured on caughtonline.co.za via the WP Rocket Plugin, APO is enabled, as well as Cloudflare Images.
Site performance, particularly on mobile, is consistently bad - 30 - 40 on Lighthouse test. This is the result when Cloudflare is disabled, and when enabled (it doesn’t change by much), even when APO is enabled and configured.
We implemented Cloudflare images on the site’s Home page, with no performance impact on this page.
We wanted to test this on the effect of Cloudflare images on the Home page before rolling out to the rest of the site, because the implementation method suggested by Cloudflare documentation and AI is quite time consuming - each image has to be uploaded to Cloudflare, then linked manually on the Wordpress site.

I’m confused about why Cloudflare isn’t making any difference to the site’s performance.

Hello!

If you are not seeing performance gains when using Cloudflare CDN, then most likely the test you are running is not getting a Cf-Cache-Status: HIT header in the response, meaning that Cloudflare CDN did not have your image stored in Edge Cache and thus your origin was contacted to retrieve the requested image. I would recommend using a test like https://www.webpagetest.org/ where you can see the headers being returned and the difference in performance with subsequent runs to your domain.

Consider the following Request and Response headers for one of the images on the home page:

Request:

URL: https://caughtonline.co.za/wp-content/uploads/2024/01/homepage-delivery-section-3.png
Host: caughtonline.co.za
IP: 172.66.42.213
Error/Status Code: 200
Priority: Low
Protocol: h3
Initiated By: https://caughtonline.co.za/ line 973
Request Start: 5.313 s
Time to First Byte: 598 ms
Content Download: 27 ms
Bytes In (downloaded): 29.0 KB
Uncompressed Size: 29.0 KB
Bytes Out (uploaded): 5.1 KB

Request Header:

:authority: caughtonline.co.za
:method: GET
:path: /wp-content/uploads/2024/01/homepage-delivery-section-3.png
:scheme: https
accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9

cookie: tk_or=%22%22; tk_r3d=%22%22; tk_lr=%22%22; _gcl_au=1.1.641383381.1709199237; sbjs_migrations=1418474375998%3D1; sbjs_current_add=fd%3D2024-02-29%2009%3A33%3A57%7C%7C%7Cep%3Dhttps%3A%2F%2Fcaughtonline.co.za%2F%7C%7C%7Crf%3D%28none%29; sbjs_first_add=fd%3D2024-02-29%2009%3A33%3A57%7C%7C%7Cep%3Dhttps%3A%2F%2Fcaughtonline.co.za%2F%7C%7C%7Crf%3D%28none%29; sbjs_current=typ%3Dtypein%7C%7C%7Csrc%3D%28direct%29%7C%7C%7Cmdm%3D%28none%29%7C%7C%7Ccmp%3D%28none%29%7C%7C%7Ccnt%3D%28none%29%7C%7C%7Ctrm%3D%28none%29%7C%7C%7Cid%3D%28none%29; sbjs_first=typ%3Dtypein%7C%7C%7Csrc%3D%28direct%29%7C%7C%7Cmdm%3D%28none%29%7C%7C%7Ccmp%3D%28none%29%7C%7C%7Ccnt%3D%28none%29%7C%7C%7Ctrm%3D%28none%29%7C%7C%7Cid%3D%28none%29; sbjs_udata=vst%3D1%7C%7C%7Cuip%3D%28none%29%7C%7C%7Cuag%3DMozilla%2F5.0%20%28Linux%3B%20Android%208.1.0%3B%20Moto%20G%20%284%29%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Chrome%2F122.0.0.0%20Mobile%20Safari%2F537.36%20PTST%2F240228.154206; sbjs_session=pgs%3D1%7C%7C%7Ccpg%3Dhttps%3A%2F%2Fcaughtonline.co.za%2F

referer: https://caughtonline.co.za/
sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“122”, “Google Chrome”;v=“122”
sec-ch-ua-mobile: ?1
sec-ch-ua-platform: “Android”
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Linux; Android 8.1.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36 PTST/240228.154206

Response Header:

accept-ranges: bytes
alt-svc: h3=“:443”; ma=86400
cache-control: public, max-age=10368000
cf-bgj: imgq:100,h2pri
cf-cache-status: HIT
cf-polished: origSize=32810, status=webp_bigger
cf-ray: 85cfe8a93d161757-IAD
content-length: 29707
content-type: image/png
date: Thu, 29 Feb 2024 09:33:59 GMT
expires: Fri, 28 Jun 2024 07:02:08 GMT
last-modified: Tue, 23 Jan 2024 12:16:01 GMT
nel: {“success_fraction”:0,“report_to”:“cf-nel”,“max_age”:604800}
report-to: {“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v3?s=Jl0ptdv06dhwH2EMTAzE1g5u%2BhfcDpC4ubJIekB8%2FMEcQtvpQrhYSIFsS2XSSKkZ45w%2BR6b7EyDjA%2BWuaGaSQwNdN5Ltw0YrCQfDXLXsBbnjZ8%2BT%2BIEy%2B4RioPc86xS8SqFpEg%3D%3D”}],“group”:“cf-nel”,“max_age”:604800}

server: cloudflare

vary: Accept-Encoding

cf-cache-status is indeed a hit. Furthermore, speed test are not the only thing we’ve been doing to determine the issue. We have already verified that images are being cached and served by Cloudflare. We want to know why they are not being optimised and served in newer formats . No matter the test, locally run Lighthouse, pagespeed insights, webpagetest, performance is consistently poor, with no perceivable difference whether Cloudflare or Cloudflare Images are enabled or not.

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