CLS issue with Page Hero

Hi there,

when you first load your site, you will notice that it loads with the system font, before the google font is displayed. And the difference in those font 'sizes' causes the header / nav and hero to shift.

This happens when you have display=swap attribute applied to your fonts, which is one of the things WP Rocket does.

Simplest fix is to NOT use display swap. But google PSI may complain about "Ensure Text remains visible...."

Thanks for the response, David.

I've tried to disable the display=swap attribute through WP Rocket using the info at the bottom of this page: https://docs.wp-rocket.me/article/1312-optimize-google-fonts but it didn't make any difference. Will locally hosting fonts make any difference to this? Or specifying a fallback font that's closer to what I'm using?

This is a big issue for the site and I'd love to get it fixed.

Please let me know when you have a second.

Thanks.

can you try disabling WP Rocket's lazy load script?

It seems to be a sizeable one that loads before the preloaded font which in turn, delays it enough to cause CLS.

I tried that and it doesn't seem to have made much of a difference.

https://i.imgur.com/sny76X4.jpg

Any other ideas?

I am still seeing the display=swap attribute on the fonts.
Setting Fallbacks is a pain in the backside, just searching for a system font that has similar foundations as the font your using.
Locally serving them may improve their load time, and if fast enough the CLS may not be counted, but you have other scripts loading in the head of your site which are going to fire before the font request is made, so their may still be a delay.
Ideally you want to get rid of display=swap and suffer the complaint of "ensure text is displayed...." diagnostic in PSI.

You can try loading them locally, before that you may want to remove any unused variants of the font:

https://docs.generatepress.com/article/google-font-variants/

Another option for Desktop may be to increase your Container Width so the Nav doesn't reflow with the larger system font, you can change just the nav container with this CSS:

.main-navigation .inside-navigation {
    max-width: 1150px;
}

Yeah, I tried getting rid of the display swap but the WP Rocket support is terrible. I can't get a response from them.

I'll try the container width to see if that works and if not, then I'll try loading the fonts locally.

Thanks for your help.

IT WORKED!!! https://i.imgur.com/NUHfMFG.jpg

David, you're a wizard. Thanks so much.

Glad to be of help