Confliction with Cloudflare APO

Hi,

after talking with the cloudflare team for a long time, we came to a conclusion that LSCache plugin and Cloudflare APO are conflicting and causing website to be cached as mobile version instead of a desktop one.

Here is my ticket to CF:

Cloudflare caches the mobile version of our wordpress website instead of the desktop version. This is a problem for a long time but I was not able to collect the correct data until today.

I've attached two SSs. The first one is CF cached mobile version which is worng and the second one is what is supposed to be, a desktop version.

CF Cache with mobile view:

Cache Headers
cf-cache-status: hit

All Headers
status: 200
date: Mon, 22 Mar 2021 11:42:26 GMT
content-type: text/html; charset=UTF-8
cf-ray: 633f28156a3e0f82-MXP
age: 9378
link: ; rel="https://api.w.org/", ; rel="alternate"; type="application/json", ; rel=shortlink
vary: Accept-Encoding
cf-cache-status: HIT
cf-apo-via: tcache
cf-edge-cache: cache,platform=wordpress
cf-request-id: 08fb57616000000f825e937000000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
x-litespeed-cache: miss
x-litespeed-cache-control: public,max-age=604800
x-litespeed-tag: 31d_HTTP.200,31d_front,31d_URL.6666cd76f96956469e7be39d750cc7d9,31d_F,31d_Po.111330,31d_PGS,31d_
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=kxcNxY1WSmY5hC0i%2FJJTbwVnL96nGklV8yGNFNg4RBHA%2BwNccccqHMsngK%2FnJ3GOQut7yWL%2BLQMrXv4VTVdoarJAcnYkf%2F0qhIG7HAUF7IDmnw%3D%3D"}],"max_age":604800,"group":"cf-nel"}
nel: {"max_age":604800,"report_to":"cf-nel"}
server: cloudflare
content-encoding: br
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400

Litespeed cache with desktop view:

Cache Headers
cf-cache-status: pass

All Headers
status: 200
date: Mon, 22 Mar 2021 11:43:15 GMT
content-type: text/html; charset=UTF-8
cf-ray: 633f2948986c0f82-MXP
link: ; rel="https://api.w.org/", ; rel="alternate"; type="application/json", ; rel=shortlink
vary: Accept-Encoding
cf-cache-status: BYPASS
cf-apo-via: origin,no-cache
cf-edge-cache: cache,platform=wordpress
cf-request-id: 08fb58215a00000f8262a6b000000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
x-litespeed-cache: hit
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=YJ9T8CoOzhHWGtEB2a9jmtvGwFuNKyyaumv6JsReU4CPdRoWB7YKJGEAgcDUjTPhauYoFHiqtz39n%2FE4kYxtE9rXiSg8fm0LDiz2%2B3rpNO62iw%3D%3D"}],"max_age":604800,"group":"cf-nel"}
nel: {"max_age":604800,"report_to":"cf-nel"}
server: cloudflare
content-encoding: br
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400

Their response:

Hi,

I took a look at the file and they both have cache hits on APO, but unfortunately it is a cache hit on LiteSpeed as well

I've taken a look at the previous ticket and seen that Rui's already advised that LiteSpeed interferes with the APO ( here is a list of plugins APO is compatible with: https://support.cloudflare.com/hc/en-us/articles/360049822312-Understanding-Automatic-Platform-Optimization-APO-with-WordPress)

I would advise to disable the LiteSpeed plugin, purge the cache and see if the issue persist.

And yes, after disabling LSCache, the problem is solved.

Now as we have Cloudlfare APO, we do not need LScache anymore but if you would like to solve the issue, I can reconsider it as I’m a LS Enterprise License holder.

The page I need help with: [log in to see the link]