[Support request] Cumulative Layout Shift (CLS) Error on all URLs

[Sonja]

Hello,

I use local fonts like decribed here: https://docs.generatepress.com/article/adding-local-fonts/

But now in the google search console, all my URLs (Desktop) have the CLS Error, which is described here: https://web.dev/cls/

So something seems to be wrong with this local fonts, i think.

What can i do, to solve this problems?

[Tom]

Hi there,

Where are you seeing these console errors?

The “shift” could be coming from the font not displaying until it’s loaded. You could try to combat that by adding font-display: swap; to your @font-face {} definitions.

[Sonja]

I see this in google search console / speed report.

Where do i have to add this code exactly?

[David]

Hi there,

when you created your @font-face CSS:

https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

The code goes in there.

[Sonja]

ok, thanks, i have done this.
will see how search console reacts.

[David]

Let us know

[Sonja]

After I put font-display: swap; in the css, the google search console status for all urls changed from “bad” to “to be optimized”. But it shows 0 “good urls”.

So this solution had not the effekt, i wanted to archive.

I have also noticed, that the website sometimes shows for a short second a different font.

Any other ideas how to solve this problem?

[Tom]

It’s showing a different font because of the code you added (swap). This basically displays a font until your real font is done loading and ready to be displayed. You can remove the swap code if it’s not doing anything.

The best thing to do is run your site through this tool: https://developers.google.com/speed/pagespeed/insights/

You’ll see that your CLS score is actually close to perfect.

However, there is a lot you can do. I would start by installing a plugin like Autoptimize (https://generatepress.com/fastest-wordpress-theme/).

I would also look into using a lazy loading plugin to handle the defer off-screen images thing.

[Sonja]

Well, I have insert this SWAP code, because you told me so.

And as I said, it does something. Before this code, all urls were bad (red) in search console. With this code they changed to “to be optimized” (orange).

If i delete this code, then the urls become bad again.

I would like to have them green, so that no Cumulative Layout Shift problems are shown in google search console.

In terms of autoptimize: i have wp-rocket on this site. Is this not enough?

[Tom]

You can definitely keep the swap code if it’s helping.

WP Rocket should have an option to combine all of your styles and scripts so you don’t have so many requests happening.

If you use the tool I linked to, it points out exactly what should be done to increase your score 🙂

[Sonja]

Yes, WP-Rocket has the option to combine css. I don´t have activate this, because it says, that it is not recommendended if site uses HTTP/2 .

[Tom]

That’s true, HTTP/2 handles multiple files much better than 1. However, tools like pagespeed insights or GTMetrix/pingdom don’t take HTTP/2 into account, so your “scores” will suffer.

In the end, the speed of your page is what’s important.

[Author]

Posts