[Support request] CLS Issue: Font and Grid Container

Home Forums Support CLS Issue: Font and Grid Container

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #1722898
    Monkeys and Mountains Adventure Travel

    Thank you for your advise. I did that and it worked as you said and Montserrate font was set so I changed it to Inherit, but afterwards, it was still showing up. I did further investigation and saw that Montserrate was also applied to button H4-H6 headings, and widgets so I’ve changed all those to “Inherit” as well, but the problem still persists.

    I disabled WP Rocket and by inspecting it still found this code:

    <link rel=”stylesheet” id=”generate-fonts-css” href=”//fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic” media=”all”>

    Please advise how I can change this to “inherit”. I don’t know css very well.

    Thank you

    Also, is there a document to CLS on GP? I know that you’ve enabled a lot of great features but I’ve only found out about them through Facebook forums and couldn’t find any documentation or guide on GP that I could use as a checklist.

    #1722928
    Monkeys and Mountains Adventure Travel

    Regarding the CLS issue caused by ads, I sent them your report and this was their response:
    And we were able to see the feedback from the screenshot, but we’ve been unable to replicate based on how it looks like they were testing (using the network performance tab to detect CLS).

    “I had one of our engineers take a look as well, and neither of us were seeing the adhesion ad jump from the top to bottom on page load.

    If GeneratePress could send over step by step how they’re able to replicate this behavior and let you know if they’re seeing it happen every time they test a post or if it’s intermittent, then we would be happy to keep looking into this for you! We just need to be able to see the behavior on our end first in order to diagnose the issue.”

    I also disabled the sticky footer ad in Mediavine, cleared the cache and tested again and the CLS issues remained the same in Google Speed Test.

    Please advise.

    Thanks for all your help.

    #1723015
    David
    Staff
    Customer Support

    So the font request only occurs if an element has the font selected in the customizer… one area may be the Top Bar. Can you temporarily add a widget to Customizer > Widgets > Top Bar… then you will see Customizer > Typography > Top Bar – check there to make sure that is set to inherit.

    For mediavine – the way to check for the CLS is as follows:

    1. Open the developers tools and switch to the Performance tab.
    2. Hit the record button.
    3. Now you may require to scroll the page for adverts to load, and wait a period for any rotating adverts to change.
    4. Once you seen a few adverts load and change – stop the recording and wait for it to generate the profile.

    See this image which i provided to another user on how to select the CLS element and view its movement:

    2021-04-06_03-00-52

    #1723057
    Monkeys and Mountains Adventure Travel

    Re: font, I did as you instructed and it worked, the Montserrat font is finally gone. Yeah!

    Re: ads, thanks for this. I’ve passed it on to MediaVine.

    Really appreciate all your help.

    #1723074
    David
    Staff
    Customer Support

    Awesome – glad to be of help πŸ™‚

    #1725820
    Monkeys and Mountains Adventure Travel

    I’m still having the CLS issue even on pages that don’t have ads, like https://monkeysandmountains.com/cinque-terre-walking-tour/ for example.

    MediaVine ads said that the footer ad at the bottom of pages like monkeysandmountains.com is causing a bit of CLS and they’re working on it, but isn’t the main issue.

    Given that in Google Speed Test the CLS is showing on mobile as .23 and .53 on desktop (but 0 under Lab Data) on pages both with and without ads, there’s something else additionally causing it but Google Speed Test isn’t showing what’s causing it.

    I thought it might be the way the hero image is formated under elements but posts like https://monkeysandmountains.com/yoga-retreats-in-costa-rica/ that don’t have hero images are showing the exact same numbers as above.

    Please advise what else could be causing the CLS.

    Thank you

    #1726000
    David
    Staff
    Customer Support

    OK so to clarify:

    Lab Data only collects data for that individual test and only measures the page loading. IF CLS is 0 then that means there is no CLS when the page first loads. So thats good.

    Origin Summary collects data from every page visit across the site. It measures each of the metrics and aggregates them. So the metrics you see there are a ‘total’ from all page visits made in the last 28 days – they are not page specific.

    When you have lots of tiny little CLS events occurring those values stack up – so in a single instance they are ok – but over many vistis and many CLS events that number can grow quickly.

    I done some tests across the site to see if i could see any other issues. The only issues i can see are related to the adverts ( note: i cannot say if there are other posts/pages that have other CLS related issues as i cannot test every part of the site ).
    The worst instance is when i visited a single post ie. /treehouse-rentals-in-georgia/ – see video:

    The sidebar_btf_placeholder is continually increasing in height. Until a new advert loads when it resets ( when you see the Comments form reappear on screen ) and then it starts increasing in height again. Without other info – the adverts are the Main issue.

    #1726129
    Monkeys and Mountains Adventure Travel

    This is very helpful, thank you. I’ll contact MediaVine again and let them know about the sidebar ads as that could definitely be causing the overall issue since I have ads on over 300 posts.

    Thank you again!

    #1726154
    David
    Staff
    Customer Support

    I hope they can find a solution to it!
    Glad to be of help

    #1728382
    Monkeys and Mountains Adventure Travel

    I added the following code on all my posts (sample: https://monkeysandmountains.com/tour-du-mont-blanc-trek/) to get rid of the affiliate disclosure plugin I was using under functions.php

    /* Add Affiliate Disclosure To All Posts */
    function disclosure_the_content( $content ) {
    if (is_singular(‘post’)) {
    $custom_content = ‘<p class=”disclosure”><font size=”1″>This post may include affiliate links, including Amazon Associate links. I may earn money if you click on one at no extra cost to you.</font></p>’;
    $custom_content .= $content;
    return $custom_content;
    } else {
    return $content;
    }
    }
    add_filter( ‘the_content’, ‘disclosure_the_content’ );

    but it’s now causing the following issue in Google Speed Report under Excessive DOM Size

    Maximum Child Elements
    This post may include affiliate links, including Amazon Associate links. I may …

    Value 156

    How do I fix this?

    Thank you

    #1728499
    David
    Staff
    Customer Support

    Hi there,

    could you raise a new topic so we can start this one afresh πŸ™‚

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