[Support request] CLS Issue: Font and Grid Container

Home Forums Support CLS Issue: Font and Grid Container

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1709739
    Monkeys and Mountains Adventure Travel

    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

    #1709971
    David
    Staff
    Customer Support

    Hi there,

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

    #1718920
    Monkeys and Mountains Adventure Travel

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

    #1718928
    David
    Staff
    Customer Support

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

    #1719238
    Monkeys and Mountains Adventure Travel

    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

    #1719304
    David
    Staff
    Customer Support

    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:

    2021-04-02_17-49-39

    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.

    #1719326
    Monkeys and Mountains Adventure Travel

    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.

    #1719815
    David
    Staff
    Customer Support

    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.

    #1720702
    Monkeys and Mountains Adventure Travel

    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.

    #1720786
    Monkeys and Mountains Adventure Travel

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

    #1721202
    David
    Staff
    Customer Support

    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.

    #1721228
    Monkeys and Mountains Adventure Travel

    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

    #1721743
    David
    Staff
    Customer Support

    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">

    #1721861
    Monkeys and Mountains Adventure Travel

    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.

    #1722617
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.