How to make APO work

Website, Application, Performance Automatic Platform Optimization
1

What is the name of the domain?

a-hr.pro

What is the error number?

n/a

What is the error message?

cf-edge-cache is cache,platform=wordpress but cf-cache-status is BYPASS and cf-apo-via is origin,miss (not tcache)

What is the issue you’re encountering

increased page loading time, failed to Verify APO works (only 1 of 3 shows expected value)

What steps have you taken to resolve the issue?

purged cache (both in APO plugin and dashboard)
applied recommended settings in APO plugin
restarted server
tried adding a function described in Wordpress APO cf-edge-cache response header is missing!

What are the steps to reproduce the issue?

open HTTP response header check | Uptrends and test www.a-hr.pro

Screenshot of the error

Screenshot_1.png
Screenshot_1.png1301×821 71.7 KB

2

Would anyone be so kind as to point me in the right direction to identify the cause of this issue?

3

It seems that the routing worker could be the reason for the issue - the moment I disable it all works as expected. That’s a bit strange as the worker should trigger redirect only for users in Ukraine

Could someone please point me in the right direction on how redirects (URL re-build/re-write) could impact caching?

the code of the worker is as follows (for the reference):

addEventListener("fetch", (event) => {
    event.respondWith(
        handleRequest(event.request).catch(
            (err) => new Response(err.stack, {status: 500})
        )
    );
});

const supportedCountries = ["ua"];
const force_bypass = [".js", ".css", ".jpeg", ".jpg", ".png", ".webp", ".avif", ".svg", ".woff2", "wp-content", "wp-admin", "wp-json", "zaraz", "/ua/", "_ua/"];
const COOKIE_NAME = 'pll_language';
const bot_header = "cf-ipcountry";

async function handleRequest(request) {
    const {url} = request;

    if (shouldBypass(request, url)) {
        return fetch(request);
    }

    const requestCountry = request.cf.country;
    if (requestCountry != null && supportedCountries.includes(requestCountry.toLowerCase())) {
        console.log("redirect");
        return Response.redirect(buildRedirectUrl(url));
    }

    console.log("default");
    return fetch(request);
}

function shouldBypass(request, url) {
    let flag = false;

    if (request.headers.get(bot_header) === "XX") {
        console.log("bypass:bot");
        flag = true;
    }

    let cookies = request.headers.get('Cookie') || "";
    if (cookies.includes(COOKIE_NAME)) {
        console.log("bypass:cookie");
        flag = true;
    }

    force_bypass.forEach(suffix => {
        if (url.includes(suffix)) {
            console.log("bypass:force");
            flag = true;
        }
    });

    supportedCountries.forEach(country => {
        let searchElement = "/".concat(country).concat("/");
        if (url.includes(searchElement)) {
            console.log("bypass:country");
            flag = true;
        }
    });

    console.log("bypass:no");
    return flag;
}

function buildRedirectUrl(url) {
    let trimmed = url.replace(/\/$/, '');
    if (trimmed.endsWith("a-hr.pro")) return "https://www.a-hr.pro/ua/home_ua/";
    let parts = trimmed.split('/');

    if (parts.length === 4) {
        return parts[0].concat("/")
            .concat(parts[1].concat("/"))
            .concat(parts[2].concat("/"))
            .concat("ua/")
            .concat(parts[3]).concat("_ua/"); // page
    }

    if (parts.length === 5) {
        let baseTargetUrl = parts[0].concat("/")
            .concat(parts[1].concat("/"))
            .concat(parts[2].concat("/"))
            .concat("ua/");

        if (parts[parts.length - 1].startsWith("#")) {
            return baseTargetUrl
                .concat(parts[3]).concat("_ua/")
                .concat(parts[4]);
        } else {
            return baseTargetUrl
                .concat(parts[3]).concat("/")
                .concat(parts[4]).concat("_ua/");
        }
    }

    let baseTargetUrl = parts[0].concat("/")
        .concat(parts[1].concat("/"))
        .concat(parts[2].concat("/"))
        .concat("ua/");
    for (let i = 3; i < parts.length - 2; i++) {
        baseTargetUrl += parts[i].concat("/");
    }
    if (parts[parts.length - 1].startsWith("#")) {
        return baseTargetUrl
            .concat(parts[parts.length - 2]).concat("_ua/")
            .concat(parts[parts.length - 1]);
    } else {
        return baseTargetUrl
            .concat(parts[parts.length - 2]).concat("/")
            .concat(parts[parts.length - 1]).concat("_ua/");
    }

}
4

I have checked with my hosting provider and switched to a default theme + turned off most of the plugins and the only caching-related difference was MISS instead of BYPASS

This leads me to believe that some changes on Cloudflare side provoked the problem, not the site or host

I would appreciate if someone could assist with the matter

5

It would be great to hear some suggestions from the community and/or Zaraz support team

6

As a result of our own troubleshooting, we came to the conclusion that Cloudflare APO is being bypassed (cf-cache-status: BYPASS) when traffic routed via a worker with extremely minimal code (that should simply pass the request to the origin)

Steps to reproduce:

  1. Create a worker with the minimal code as follows:
addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  return fetch(request);
}

  1. Create a route through the worker

  2. Perform a HTTP response header check for a test page using HTTP response header check | Uptrends

Result:
cf-cache-status BYPASS
cf-apo-via origin,miss
cf-edge-cache cache,platform=wordpress