[Resolved] CLS – caused by id=”nav-below”

Home Forums Support [Resolved] CLS – caused by id=”nav-below”

Home Forums Support CLS – caused by id=”nav-below”

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1542193
    Bernhard

    Hi, according to GTMetrics the biggest CLS factor on 3 of my GP powered pages is the following:

    <nav id=”nav-below” class=”paging-navigation masonry-brick” style=”opacity: 1;”>

    Do you have a recommendation on how to avoid this?

    Cheers, thanks for your help
    Best
    Bernhard

    #1542538
    David
    Staff
    Customer Support

    Hi there,

    it looks like your Cache plugin is deferring the loading of scripts, including the script that is used for the masonry display, which is causing the layout shift of all the elements below your posts.

    If you open the site in Chrome, Right > Click Inspect, go to the Network tab and change Online to Slow 3G, keep the dev tools open and refresh the site. You will see the header and footer is loaded then the deferred masonry posts is loaded after.

    #1563115
    Bernhard

    Hi, I have deactived my caching (WP Rocket) but it’s still showing up. Any more ideas? Thank you for your help πŸ™‚ You guys are doing an awesome job πŸ™‚

    #1564325
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Out of curiosity, does this improve things?:

    .generate-columns-container.masonry-container {
        min-height: 1000px;
    }
    #1565266
    Bernhard

    yesss! πŸ™‚ What does it do? ^^

    #1565497
    David
    Staff
    Customer Support

    Hi there,

    the issue is related to the Masonry option, on initial load there are no posts so the Footer is displayed above the fold. Then the Posts load and the footer is shifted to where it belongs. By setting the min height on the parent container stops the shift from happening.

    I think Tom may have an idea on disabling the masonry on mobile to stop this from happening.

    I did provide a PHP snippet here to disable masonry on mobile:

    https://generatepress.com/forums/topic/masonry-grid-overlapping/#post-1290416

    But the wp_is_mobile function may not work if your server has Page Caching enabled and no separate page cache for mobile.

    #1565504
    Bernhard

    Thank you i’ll stick with the CSS Solution for the time being πŸ™‚

    #1565643
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.