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

[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

[David]

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.

[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 🙂

[Tom]

Hi there,

Out of curiosity, does this improve things?:

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

[Bernhard]

yesss! 🙂 What does it do? ^^

[David]

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.

[Bernhard]

Thank you i’ll stick with the CSS Solution for the time being 🙂

[David]

Good to hear that!

[Author]

Posts