causing main CLS

Hi there,

the issue isn't theme related. Text is a plain HTML element, that is given styles by the theme ( or a plugin or custom CSS ). CLS can occur for many reasons, in your case its because the text is being displayed and then the theme styles are being loaded after.

The primary cause we see is the use WP Rockets Optimized CSS Delivery aka Critical CSS and Used CSS options. Unless correctly configured the critical styles won't be loaded correctly that in turn creates layout shift.

The other issue, which is also a part of WP Rocket ( i believe ) is setting the font-display property to swap which means on initial load the browser will display its system font, that then gets updated to the Google font when its loaded. And that can also cause CLS.

You may want to speak with WP Rocket about setting those options correctly to avoid CLS.

For the Google Fonts, there is an option to set them to "auto" instead of "swap". maybe that would be a better route. The only other options seem to be preloading these fonts, which we seem to be doing and on the surface sounds good but may also be creating a CLS issue..

Hi there,

Assuming the actual font is from the theme's customizer setting, you can try this:

add_filter( 'generate_google_font_display', function() {
    return 'auto';
} );

I added this code to the functions.php child theme, but it doesn't seem to be having any effect. I was under the impression the fonts being used were part of the generate press theme. Is there a list of fonts that the theme uses? I'm all about switching fonts if it will end this consistent CLS issue.

Not sure if I understand the question.

The theme itself doesn't use any font - it uses what you choose in the customizer.

I was mistaken that the fonts being used were on our server. Is serving our fonts locally faster than grabbing them from Google? enough to better the search console score?

I've used the google webfonts helper and have downloaded a zip of the actual fonts we are currently using. according to the page: https://docs.generatepress.com/article/adding-local-fonts/ I should be able to upload them to my child theme, subdirectory "fonts", then add the font CSS to the child theme's style.css

Fonts requested from the Google servers, requires additional DNS Lookups and Server requests.
Serving them locally removes those additional requests and in most cases will perform better.

Well we completed all the font moving and CSS mods, still we have the same 5 CLS warnings for the paragraph text.

I ran a performance test in the Chrome developers tools on a Throttled 3G network, to see what was moving. Quick video clip here:

https://www.screencast.com/t/GDcTVvFs

You will see the Font styles changes at least 2 times.
This happens when the loading of CSS gets interfered with.

And the most likely cause of that is the WP Rocket Optimized CSS delivery option.
You may want to ask WP Rocket how to set that up correctly so you the correct font styles are in the critical CSS.

It looks like what needs to happen is to list the needed fonts in the font pre loader section. The problem is that they warn not to load everything, just what is needed. So my last question is simply what is needed? It seems that each font instance has a: .eot .svg .ttf .woff and .woff2 file. Are all these needed to preload?

....and preloading seems to be making this much much worse....lol

The best solution is to NOT have the display=swap attribute added to the fonts. It means the site takes a little longer to display whilst its loading the fonts, but they won't cause any CLS when the font swaps.

But you also need to speak with WP Rocket about the styles being loaded in the wrong order, which is when you see the Font styles ( not the font ) change in the video