[Resolved] Layout shift

[Scott]

Hi

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?

[David]

Hi there,

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.

[Scott]

Thanks David

I’ve disabled WP Rocket, cleared cache, but the issue persists.

Any other ideas?

[David]

If i check the URL you provided in a Private Browser ( no caching ) and add disable WP Rocket by adding the ?nowprocket query string:

https://docs.wp-rocket.me/article/1285-bypass-wp-rockets-caching-and-optimizations

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.

[Scott]

Hi David

I’ve just ran another test with ?nowprocket in Private Browser and am still seeing the issue.

New video link in private info.

[David]

Do you have any server side caches or optimizers ?

[Scott]

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.

[Scott]

I also have Cloudflare activated

[David]

Very odd – i ran a webpage test with a throttled 3G network on the site with ?nowprocket … heres the results:

https://www.webpagetest.org/result/211001_BiDcSW_19f44b12a2774e24a327dea6e84828c9/1/details/#step1_request

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:

https://docs.generatepress.com/article/adding-local-fonts/

To see if the font load can be speeded up.

[Scott]

Thanks David.

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.

[David]

Glad to hear that!

[Author]

Posts