- This topic has 10 replies, 2 voices, and was last updated 2 weeks, 1 day ago by David.
September 25, 2021 at 4:04 pm #1942895Scott
I’m experiencing Layout Shift / “Flash Of Unstyled Content” (FOUC) with the main navigation on one of my sites.
I experienced this same problem on another site as discussed here, which was being caused by WP Rocket and is now resolved.
However, in this instance, WP Rocket doesn’t seem to be the cause (3rd link in Private info is page load with WP Rocket disabled).
Any ideas?September 25, 2021 at 5:03 pm #1942916DavidStaffCustomer Support
the first place to start is to disable WP Rocket temporarily and then recheck the site. If the issues goes away then you know its one of the WP Rocket settings.
The other user had some success with Remove Unused CSS but that can vary from one site to another.
NOTE: The WP Rocket CSS optimizations also enable font-display: swap on your fonts, which can be a major cause of CLS issues, as you can see on initial load it uses a system font before the actual font loads… so try the above to see if that is one of the problems.September 26, 2021 at 11:14 pm #1943914Scott
I’ve disabled WP Rocket, cleared cache, but the issue persists.
Any other ideas?September 27, 2021 at 3:32 am #1944157DavidStaffCustomer Support
If i check the URL you provided in a Private Browser ( no caching ) and add disable WP Rocket by adding the
I don’t see the same issues as i do with WP Rocket enabled.
So it is a WP Rocket setting thats looks to be causing the issue.September 29, 2021 at 7:22 pm #1947607Scott
I’ve just ran another test with ?nowprocket in Private Browser and am still seeing the issue.
New video link in private info.September 30, 2021 at 8:48 am #1948397DavidStaffCustomer SupportSeptember 30, 2021 at 7:59 pm #1948820Scott
In Siteground Site Tools I had activated “NGINX Direct Delivery” and “Memcached” but have now disabled both and the issue persists.
I can’t think of an other server side caches or optimizers I have.September 30, 2021 at 8:01 pm #1948821Scott
I also have Cloudflare activatedOctober 1, 2021 at 4:46 am #1949166DavidStaffCustomer Support
Very odd – i ran a webpage test with a throttled 3G network on the site with ?nowprocket … heres the results:
The fonts are loading really late.
And whilst testing in Chrome Dev tools i see this console info:
[Intervention] Slow network is detected. See <URL> for more details. Fallback font will be used while loading: <URL>
Which i have only ever seen if i throttle the hell out of the network.
So something seems to be interfering with the font load, chrome gets bored waiting and intervenes by loading the fallback font….
I would suggest looking at loading the fonts locally:
To see if the font load can be speeded up.October 3, 2021 at 5:53 pm #1951597Scott
I attempted loading fonts locally as you suggest but unfortunately couldn’t get this working correctly.
I’ve switched the menu typography to system stack which seems to fix the problem.October 4, 2021 at 1:59 am #1951812
- You must be logged in to reply to this topic.