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

[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

[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;
}
}

[David]

Hi there,

did Fernandos suggestion work for you ?

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

[David]

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

[Eugene]

Hi There David

Hope you are well

I realised now that the CLS score on desktop is also being affected and I did some digging.

I realised that no matter what I try, the sidebar is still being loaded after the content and then re-ordered with CSS. As a result, it seems like the void in which the sidebar can’t be fixed no matter what CSS I add. I’ve disabled all my own CSS apart from the shadow to demonstrate the shift in my gif.

This is avoidable on Mobile, but not really on Desktop i found.

Is this a known issue?

See screenshots and recording:
Screenshot: https://prnt.sc/eSy81U3dbgZM
Recording: https://drive.google.com/drive/folders/14l8A6wql58wHkVjind1dyroJEiY_Npdp

[David]

Can you share a link to that page ?

[Eugene]

Hi David

Posted in the private information

[David]

Try adding this to your CSS:

@media(min-width: 769px) {
    #primary {
        margin-left: auto;
    }    
}

As long as your optimizations don’t mess with the CSS loading order, that should keep the main content content pushed to the right.

[Author]

Posts