I’ve been going in circles with support so I figure now is a good time to share with everyone. Soon after the new speed page was announced then I opted in & enabled Enhanced HTTP/2 Prioritization. Seemed fine but no obvious difference. Our issues started when we revamped our site to have critical CSS loaded inline & the rest later where our code & files were noticeably changed.
Different types of our pages have different critical CSS inline and all of our product pages are having their critical CSS rewritten by Cloudflare’s servers and in some ways I see where could be potential improvement that way but there are too many issues with how its being done. So as is you’ll see that the core 6 pages in the top navigation menu & all of our product category pages are unaffected but again all of our product pages are being affected which is a big problem since that’s over 44K of them and the bulk of our site.
So let’s compare the HTML Source from origin vs. Cloudflare-modified:
As shown above, you can see that following the 1st style tag then it starts with @font-face CSS rule for the Open Sans Google Font with src URLs pointing to /cdn-cgi/styles/fonts/ which is not on our origin server & only generated by Cloudflare but completely different styles are there when unaltered by their servers as you’ll see later.
Here is another comparison showing some of our original critical CSS code but mixed in with many Cloudflare references like #cf-wrapper for example & even has some code for possibly showing an error but with their own image hosted at /cdn-cgi/images/ error_icons.png which again is not from our origin at all. I suppose this is being added to help optimize loading speed since Open Sans is the one being used in our main navigation menu & 1st heading (h1 tag) but its not retaining enough of the original code to be optimal enough & is causing more problems than its trying to help.
So as I pointed out before that Open Sans font was being loaded from their edge servers under /cdn-cgi/styles/fonts/ but as you see here (and as I found out later) the original font-face code is still retained with references to the original files (in //www.plcsource.com/wp-content/uploads/sgf-css/) & styles but its now farther down the page & so is being ignored by the browser and there are some considerable differences that weren’t retained when it was rewritten that are causing problems (e.g. the first example):
- The attribute,
font-display:swapwas completely removed causing considerable (1.1-2.1 seconds) performance related delays since without it then the browser is waiting for the font to load before rendering that part of the page - the WOFF2 formatted files were excluded but should not be due to better compression
- the Cloudflare-hosted font files have an absurdly short Cache TTL of 2 hours when I’d rather it be a year at most or 12 hours at the lowest
Now hopefully this will help provide feedback to whichever team is responsible for this rewriting of code for optimization since according to Patrick Meegan on their blog about the HTTP/2 prioritization feature he said that “It doesn’t modify the page or execution at all and only impacts the connection for the domain it is turned on for” so I’m at a loss as to what feature/option with Cloudflare is causing this. Also until it can be fixed to work properly then I’ll need to be able to disable it.
I tried disabling Enhanced HTTP/2 Prioritization & Auto Minify earlier but didn’t seem to help revert this until going into Development mode and purging all caches. Will experiment with some other things while I’m awaiting a reasonable response.
Thanks,
Josh
