[Resolved] CLS Issue: Font and Grid Container

[Monkeys and Mountains]

Hello, I’m still having CLS issues on my site. Two issues are coming up:

1) <font color="white">
To fix this, I changed the body font to System Stack and the rest to inherit as I found in one of your other threads. Will that correct the font color issue? If not, how do I correct this?

2) <div class="inside-navigation grid-container grid-parent">. How do I fix this?

Thank you

[David]

Hi there,

can you share a link to the site so i can see what the issue is ?

[Monkeys and Mountains]

Sure, it’s https://monkeysandmountains.com/
Thanks

[David]

Are the issues being reported on any particular page or Post ?

[Monkeys and Mountains]

Yes, on the specific url above, monkeysandmountains.com.

Now I’m receiving the following two errors on the Google Page Speed Report:

<div class="page-hero"> and TREKKING & HIKING TOURS ADVENTURE TRAVEL BLOG ACCOMMODATION HIKING GEAR ABOUT (that's the menu)
<div class="inside-navigation grid-container grid-parent">

and the following issues:

…1/3bf93d5….css(monkeysandmountains.com)
/css?family=…(fonts.googleapis.com)

which I don’t understand since I changed the css under GP to “External File” from inline and the Typography to System Stack and the rest of the headings to “Inherit” as I saw in another discussion.

Please advise.

Thanks

[David]

Lets see to the CLS first 🙂
When i run a google pagespeed insights report i see no CLS in the LabData but its there in the origin summary.
As the LabData is CLS: 0 it means the CLS is happening after page load.
And that CLS is accumulated across all page loads and reported in the origin summary.
To find out whats causing it i open the chrome developers tools and start recording the pages performance and this is what i see:

The red boxes show the element that is shifting – the top box is where that element started and the bottom box is where it moved to.

Theres a lot of red boxes and all of them are the Advert Banner. So to fix the CLS you would need to remove that or report the problem to the developer.

[Monkeys and Mountains]

OK, thank you for looking into this. I’ve contacted the ad agency as I implemented their CLS-friendly measures.

Please advise on the other issues in the meantime.

Thank you for your help. I really appreciate it.

[David]

Looking next at the CSS issue ie.

…1/3bf93d5….css(monkeysandmountains.com)

Its quite common to see a CSS file with around 50% – 80% of it being unused. Which is perfectly fine when its a 10-20kb file. But that is a lot of redundant CSS.

I did a quick nose at the CSS file – theres over 45,000 lines of it.
Major culprit is Thrive – probably accounting for half if not 2 thirds of the total CSS.
Another culprit is UAGB – its generating around 10,000 lines of CSS.

I cannot see any reason why they would need to be that much CSS.
It maybe that the cache plugin has grabbed everything from the entire site, or it maybe those plugins are loading CSS where its not necessary.

If you can disable the Cache plugin temporarily we can take a look at what should be loaded.

[Monkeys and Mountains]

Thanks for looking into it. Yikes, that’s a lot of CSS. OK, I’ve disabled WP Rocket that’s the performance plugin that I use for disabling the cache, but it will have other performance implications, so please let me know as soon as possible when I can reactivate it.

Re; the UAGB plugin, I’ll delete that this week, just have to do a few hours of work on the posts that are using it first, so no need to worry about that. It’s good that that one is an easy fix.

Thrive Leads plugin I do need, however, so appreciate you looking into it.

I also don’t understand why Google fonts is still showing after I’ve changed everything to GeneratePress settings (/css?family=…(fonts.googleapis.com) 2.2 KiB 780 ms

Thank you for your help. Please advise.

[Monkeys and Mountains]

I had to reactivate WP Rocket as my site’s performance was dismal without it.

[David]

Have a chat with Thrive and ask them why theres 30k lines of CSS … definitely seems like its loading all of its styles where that is not necessary.

Fonts:

I can see Roboto loading – which is being used in the Thrive leads form on the front page.
And Montserrat is being used in the Navigation ( Customizer > Typography > Primary Navigation.

you can also change the Customizer > General –> Icon Type to SVG – its not using a google font and won’t make much difference, but its one less network request.

[Monkeys and Mountains]

Thanks for this.

Re: Montserrat in the Navigation menu, under Customizer Typography, I don’t have an option for Primary Navigation (only for Body, which I previously changed to “System Stack” and then “Inherit” for H1, H2, H3

Also, how do I fix the previously reported <div class="inside-navigation grid-container grid-parent"> issue?

Thank you

[David]

Do you have the Typography Module and the Menu Plus modules enabled ?
As removing the Montserrat font should stop the FOUT which is causing the issue with the:

<div class="inside-navigation grid-container grid-parent">

[Monkeys and Mountains]

Nope, I checked and I’ve never activated either of these options, so I tried activating both of them then running the Google speed test again, but it didn’t change anything. (I’m assuming they shouldn’t be activated?).

Re:

, I seem to be getting this error on the pages where I have a hero image element.

Please advise.

[David]

Can you enable the Typography Module – and then you should see the Customizer > Typography > Primary Navigation option – check to see if the Montserrat font is set there… if it isn’t then some other code is at work but i cannot see where whilst the WP Rocket cache is enabled.

[Author]

Posts