Issues with low CLS score on Google PageSpeed Insights due to fonts loading

[Grega]

Hi there,

I have many errors in Google Search Console due to the low CLS score, which can be seen when conducting PageSpeed Insight tests on the mobile version.

After my manual check, I believe the main issue is in the fonts > the site loads some old fonts by default before converting them to new ones. When this happens, the whole content moves a bit to the right, which causes the low CLS score and the errors in Search Console.

Do you have any ideas how to fix that? How to change the default fonts or whatever? And which are the default fonts? No idea where could I find that.

Thanks a lot for your support!

[David]

Hi there,

You have some fonts being loaded by the Theme and some being loaded by Elementor.
Looking at your sites page speed report the CLS value is 0 – which is fine.

Looking at the Avoid large layout shifts there are 3 elements:

2 are from Elementors markup which.
The 1 that is theme related is the Search Icon – you can elimiate that by Customizer > General and switching the Icon Type to SVG.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Grega]

Hi David, thanks for your feedback.

I changed the search icon to SVG, thanks.

Regarding the CLS > it is 0 in the section of “Lab Data”, but above that, you can see CLS value in the “field data”, which shows 0.33 for the homepage right now (and similar results for other sites), which is causing so many errors in search console.

Regarding the different fonts being loaded by Theme and others by Elementor > do you have any tips on how to optimize that?

Also, all posts have been written using your theme only (there is no Elementor on it), and they have the same CLS of 0.33 (+-) like this post for example: https://www.yourinception.com/neuriva-review/

Do you have any other solutions to avoid getting the errors from Search Console?

Thanks!

[Tom]

Hi there,

Tough one to debug as your HTML source is all minified. Any chance you can disable your caching/minifying plugin so we can take a closer look?

One thing to test is using the System Stack font over a Google font – might be worth comparing the results between the two.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Grega]

Hi Tom,

I changed all the fonts to inherit (with the body font being System Stack) and when physically reloading the site on my phone (for example on mydomain.com/best-nootropic-stack), it doesn’t move at all > so the CLS should be 0, but the score is pretty much the same.

I can totally disable caching plugin if you want, just let me know when do you plan on checking the site? So I can enable it as soon as you finish, not losing too many people in between.

Thanks

[Tom]

Perhaps a staging site would help?

I can’t promise I’ll be able to offer much insight, but it’s worth a look at your source.

Insights are saying there’s 175kb of CSS, which is a bit high. Might be worth looking into.

The actual core of the theme shouldn’t be the issue: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fspeedtest.generatepress.com%2F

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Grega]

Great idea, I just created the staging site.

I really appreciate your support with this issue!

How/where can I send you the login data?

Thanks a lot!

[David]

Hi there,

you can send the Login details via the Account Issue form:

https://generatepress.com/contact/

Please include the URL to this topic so we can track

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Grega]

Done! 🙂

[Tom]

Only thing I can see really is your CSS size and Font Awesome (from Elementor) causing issues.

If you run a single article through insights (Nootropics review), you get a 94 score.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Grega]

Thanks for checking, Tom. I’ll see how I can optimize this. I appreciate your support!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts