On client’s website (https://eux.co) APO is enabled alongside WP Rocket.
Within WP Rocket, according to their recommendations, caching for mobile devices as well as the creation of separate caching files for mobile devices, is enabled.
Within the Cloudflare plugin on Wordpress, APO is “On” and Cache By Device Type is enabled.
However, the cache-by-device header is never returned upon visiting the website. Additionally, the cf-edge missing error is “flashing” within the Cloudflare plugin. It appears and immediately disappears. A GTMetrix scan of any site returns the following headers:
cache-control max-age=31536000
cf-apo-via tcache
cf-cache-status HIT
cf-edge-cache cache,platform=wordpress
cf-ray stringofnumbers-YVR
As you can see there is no cache-by-device (cf-device-type) as mentioned within the APO documentation under Reference.
What exactly is wrong? I’d like to use Perfmatters to disable certain scripts on mobile devices. However, doing so now disable a selected script for mobile everywhere, as there is nothing requesting the device type on APO.
Let me know what other information I can provide :)!
You (and GTMetrix) won’t be able to see this header, as it’s a request header added at the edge (Cloudflare datacenter) and sent to the origin. If all is well, you origin then detects the header and responds with the appropriate content.
For testing and troubleshooting, you could echo back this request header as a response header. In an Apache server, for instance, you could add these directives to your .htaccess:
# Testing if cf-device-type is present
<If "%{QUERY_STRING} =~ /^test.*?/">
SetEnvIfNoCase CF-Device-Type (.*) CDT=$1
Header set A-Device-Type %{CDT}e
</If>
Then visit your site using a query string starting with “test” and you should see it in Dev Tools (F12) Network panel.
The cf-edge-cache is added by the Cloudflare plugin, regardless of whether APO is enabled or not. So if you have a problem here, you need to check your installation, perhaps disable and delete the plugin and reinstall from scratch.
I tried your .htaccess test and it worked - it returned the A-Device-Type header and changed for mobile, desktop and tablet.
As for the cf-edge-cache in the plugin: When I open the Cloudflare plugin page within Wordpress, as it loads, there is a yellow triangle telling that the header is missing. However, after a few seconds it disappears and judging by the Network panel in Dev Tools, the edge-cache seems to exist.
I’m glad it worked. As I said, this is only for troubleshooting and you don’t need to keep it in the .htaccess. You can either remove or comment all the lines with #.
The important thing is that APO is working, as can be seen by the headers in the GTMetrix example. The warning about the missing header is probably due to a delay of the request the plugin must make to make sure the header is being returned, I wouldn’t worry about it.
So, this means that from APO’s side everything is working properly and fine.
I wonder why then scripts that shouldn’t load on mobile also don’t load on desktop
I have mobile caching and separate file creation also enabled in WP Rocket - when I tried turning it off it even gave a notice that it should be on in order for APO to work properly.
I’m confused why Perfmatters then isn’t disabling certain scripts/css only for mobile based on the device-type header.
APO with Cache by Device Type enabled sends a signal to your origin, and that part is working as you saw:
How your origin is handling this signal is something better asked to the plugin developers. You can try purging all caches to see if that gives you a hint but any further questions about why your theme and/or plugin are not sending the right content for each device type would be better addressed by their support forums at Forums | WordPress.org.
