After doing some research into my issue I have found something called FOUC ( Flash of Unstyled Content)
The observable issue happens only when my NS is delegated to clouflare (even with it paused)
site www techbusinessnews. com .au
Current config
litespeed server server side caching - on
local site plugin - happens both when cache option is turned off or on
The visual glitch.
- Menu Bar - (The blue one)
If I clear my browser cache and do a uncached broswer load of my website you can see in my blue menu bar under , news, media releases, advertisers and about, the down arrows for the drop down menu turn into squares for about 1 second and then change into the correct arrows
This happens only on first load with an uncached browser. Once the site is cached in your broswer, You dont see the 1 second style change and looks fine.
- APO
If I turn on APO the described (squares issue) will remain permanent.
Reslotuons Found.
I found a fix for this, This is to turn off server side litespeed cache. However, if I do this while it corrects these issues, my page speed score drops down from 90 to 17. Even with APO turned on.
I have also tested with litespeed sever side cache turned on, litspeed plugin cache turned on and “Guest Mode” turned off.
The other issue with not using litespeed cache at all is that I can’t get page speed metrics to pass 20 with just Cloudflare and APO
Strange thing, Using APO makes my site load like lightening, but the page speed metric tools including pagespeed insights and GTMETRIX shows dead slow (14) (statistical vs vsual conflict) as to how fast my site loads.
I am seeing a FOUC issue? Or is this something else?
My answer is to just move my DNS away from Cloudflare, and my problems are solved. However, I cant do this due to the requirement of the WAF services
This cannot be a page rule or other Cloudflare misconfigration because it happens even with c/f paused.
Summary
To see the described issue. Load site with uncached browser. If you miss the spit second of the menu items starting as squars, please flush your browser cache and see again. As mentioned it only happens with an fresh uncached browser
Issue seen in Chrome & Edge.
I am on c/f pro plan $20 per month with argo.
P.S I have made a mention of this issue before, however, I have just found via google search something called FOUC and have provided more information