[Resolved] Significant CLS from “site grid-container container hfeed grid-parent”

Home Forums Support [Resolved] Significant CLS from “site grid-container container hfeed grid-parent”

Home Forums Support Significant CLS from “site grid-container container hfeed grid-parent”

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2251874
    lee

    When running my site through google PSI, I’m getting a significant CLS of 0.39 from <div class="site grid-container container hfeed grid-parent" id="page">. This seems to be GP-related, and I’ve read through a number of other topics here addressing similar issues, but I’m not sure how to fix my particular one. Is it simply a matter of disabling lazy loading of images in wp-core, or is there another issue here?

    Thanks very much for any assistance πŸ™‚

    #2251903
    David
    Staff
    Customer Support

    Hi there,

    see here, this report provides a nice filmstrip so you can see whats going on:

    https://www.webpagetest.org/video/compare.php?tests=220613_AiDcEN_7B3-r:3-c:0&highlightCLS=1

    You will notice on initial load the text is occupying more space then it does at the 1.0s cell.
    Most noticeable on the Navigation which wraps to two lines.
    Which causes a shift of all the elements below it, and the largest of those is the <div class="site grid-container container hfeed grid-parent" id="page"> which gets hit by the biggest layout shift ( its suffering the symptoms of layout shift ).

    So, this happens when Fonts or the CSS styles are loaded after initial render.
    Fonts loaded with the display=swap property and CSS optimizations are both primary causes of this.

    However, before delving into that, go to Customizer > Layout > Primary Navigation, and reduce the Menu Item Width.
    The logic here is to reduce the space the menu occupies as currently it is almost the same width as the laptop size screen that google simulates its tests on.
    Try setting it to 30px instead of 50px. And retest – let me know.

    #2262152
    lee

    I followed your suggestion and reduced the menu width to 30 and it’s made a tremendous improvement β€” I’m seeing only minimal CLS now. Thank you!!!

    Do you think I should change display=swap to a different method? I went with swap because I wanted to minimize blocking, but if it’s causing problems, I could put it to whatever you’d suggest.

    Apologies about the length of time it took me to reply. Thank you again for the excellent suggestion!

    #2262165
    David
    Staff
    Customer Support

    No need for apologies πŸ™‚

    for the display attribute i generally leave it as auto.
    Google will moan about it, but if it reduces CLS i would suffer the moaning lol

    #2262203
    lee

    I’ll make that change. Thanks again!

    #2262248
    David
    Staff
    Customer Support

    Let us know how you get on πŸ™‚

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