Problem with huge CLS

Hi there,

i ran a PSI test on the URL provided and Mobile CLS was 0, and Desktop was only 0.081, which is way below the theshold.

Testing the site in the Developers Tools > Performance tab on a throttled 3G network, i can see a couple of things:

1. Fonts are being loaded after the test is displayed. Causing minor layout shifts. This generally happens if you used a plugin or code to set the font-display: swap; property. All that makes stuff load faster, it can result in CLS.

2. I notice there are 3 x posts under each article that is Transtition into place on initial load, not sure thats an issue, but it may be causing slight CLS issues.

Hi David,

thank you for the answer. Can you help me with problem number 1? How can I find and change this settings? Goole Page Speed also notes:

"Make sure the text remains visible when loading webfont"

Is it the same problem?

Thank you and have a nice day.
Regards,
Martin Steidl

Its related.
Use the Display Swap, you may get “Make sure the text remains visible when loading webfont”
Don't use it, and you may get CLS.

Ideally you want neither. But that can be difficult. The aim is to get the fonts to load quick enough that neither issue arises. You can try:

1. Remove unused variants to make smaller font requests:
https://docs.generatepress.com/article/google-font-variants/

2. Load the fonts locally to reduce network request times:
https://docs.generatepress.com/article/adding-local-fonts/

Load the fonts locally to reduce network request times.

Would you say that font-display: swap; is not necessary if the fonts are loaded locally?

If you can load the font fast enough then google won't cry “Make sure the text remains visible when loading webfont” without the display swap property.

Personally as long as the site loads fast and hits the CWV metrics, i don't care that google complains about the font visibility, as its so much nicer then having the CLS issues it can bring.