[Resolved] Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

Home Forums Support [Resolved] Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

Home Forums Support Mobile sidebar move to top CSS is causing CLS issues in Core Web Vitals

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2295755
    Eugene

    Hi

    I am following the steps on https://generatepress.com/forums/topic/move-sidebar-position-on-mobile/#post-2295529

    This CSS tweak is causing CLS issues in Pagespeed.dev and I’m wondering if there is perhaps a quick solution for this?

    I tried adding the CSS as high up as I could but it still flashes the main content first

    See 2 screenshots:
    https://prnt.sc/wudpuGlD3L2w
    https://prnt.sc/6r3BVtFaI3cd

    Your help would be highly appreciated

    #2297177
    Eugene

    I think Fernando posted this in the wrong section

    Hi Eugene,

    As your Filtering plugin/section loads, it extends the space it occupies. In result, putting it above your page on mobile pushes down everything as it loads.

    Aside from caching, you can probably try adding a min-height to your left side bar on mobile to reduce the CLS or the way it pushes down all other content as it loads.

    Example:


    @media
    (min-height: 768px){
    div#left-sidebar {
    min-height: 1400px;
    }
    }

    #2297187
    David
    Staff
    Customer Support

    Hi there,

    did Fernandos suggestion work for you ?

    #2297236
    Eugene

    No, it didn’t work. The reason I think is because the theme outputs the Content followed by the Sidebar, and only then the “reverse” CSS is applied. So the code doesn’t work because when the page is loaded, the left-sidebar isn’t at the top yet, causing the CLS issue.

    I found a very hacky way of getting around it though. Instead of setting the sidebar min-height, I added a massive margin-top:100vh; on #primary:

    /* Left Sidebar on top on mobile */
    @media (max-width: 768px) {
      /* Combat the CLS. See *.js line 179 */
      #primary {
        margin-top:100vh;
      }  
      .left-sidebar .site-content {
          display: flex;
          flex-direction: column-reverse;
      }
    }

    Then I am setting the initial margin-top with JS once the page has loaded:

    // Combat the CLS issue. Set CSS to offset the switch.
    // See stlye.css line XXX
    window.addEventListener('load', function () {
        const content = document.getElementById('primary');
        content.style.marginTop = 'initial';    
    })

    Please let me know if you are in agreement with this code?

    #2297290
    David
    Staff
    Customer Support

    An alternative option would be to Hook the Filters in above the main_content using a Block Element. You can then use CSS to hide them on desktop, and hide the sidebar on mobile.

    In theory, as long as those widgets are not resizing they will be the first thing to load on mobile….

    Its CSS hacky instead of JS hacky 🙂 lol

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