CLS due to Google Fonts

Hi there,

so the CLS is arising from a few things which are 99% related to WP Rockets optimizations:

1. The Logos are being lazy loaded. In WP Rockets settings you can exclude images from lazy loader using a CSS class. You can use is-logo-image

2. The other main issue, you're right is the Fonts, they have the display=swap attribute being applied to them. Looks again like thats coming from WP Rocket - this doc explains how to stop that:

https://docs.wp-rocket.me/article/1312-optimize-google-fonts

2.1 NOTE: if you're using the new Dynamic Typography in GP 3.0+ it too has an option to set the display property and this should be set to auto:

https://docs.generatepress.com/article/dynamic-typography-overview/#google-font-display

Thank you, David. Amazing support, as usual :)

Could you tell me what you used to identify the CLS? Just the Performance tab in the Chrome console?

The Performance tab in dev tools i do use. Slow the network and throttle the CPU, then you can watch the page load slowly. You'll see fonts swapping and elements shifting.

Glad to be of help!

Thank you a lot, David.

You're welcome!