I don't want a sidebar for devices <= 1024... It works but with huge CLS tax

Hi there,

The ideal solution here is to improve how your site serves the CSS.

I've checked your site and I've noticed it's not using any optimization/caching plugin.

Optimization plugins can improve on this. Plugins like Autoptimize, WP Rocket, W3 Total Cache, or any known plugin of the same category should give significant improvement by minifying and merging your CSS so it loads faster, preventing most CLS issues

I have disabled it because every time I ask a question you tell me to disable it.

Optimized or not it has the same issue.

I have disabled it because every time I ask a question you tell me to disable it.

Ah right. We need it disabled when we diagnose things. But once the issues are resolved, optimization plugins should be re-enabled for performance improvements.

But in this context, the actual question IS related to the actual use of optimization plugins so we must have it enabled to play around with it.

Optimized or not it has the same issue.

Optimization needs fine-tuning. There's no 1 exact setting to apply for all sites as each site varies depending on what plugin is installed.

For this one, you will have to play around with the optimization plugin configuration and do A/B tests for each variation of configuration and see yield the best performance.

I know this question is like the ISP guys telling you to reset your router and I understand that there's a lot of buggy integration out there. But I know what I am doing and the theme is super stable.. it is only this trick that is causing the issue.

I'll give you another URL that has the same code but is aggregated and "optimized". It has the same result.

Here's a screenshot of the CLS tracking. Only happens at that resolution :

I am sure there's a better way to have the sidebar behaves like a mobile device until 1024px that a 0.73 CLS.

Cheers

I know this question is like the ISP guys telling you to reset your router and I understand that there’s a lot of buggy integration out there. But I know what I am doing and the theme is super stable.. it is only this trick that is causing the issue.

I wouldn't put it that way. This is actually pretty advanced as there's no canned answer for this. Each site, while it can be similar, will vary depending on the other plugins added.

CLS is caused by many things. To define a few, it can be from:
- images (lazy loaded images within the viewport on page load. "above the fold images")
- images without height and width attributes.
- Animations
- FOUT or FOIT (flash of unstyled text / flash of invisible text)
- non-optimized/slow loading image (either the image is too large or the server is just too slow)
- stylesheets or scripts that style or render DOM elements that are late to load.

For the 2 sites in comparison: The 2 don't have the same result. And it's not a good comparison to make because the 2 links don't have the same content. The 2nd link had significantly more content within it.

To resolve the issue specific to your site:
On top of my previous suggestion, which is to play around with optimization plugins to get the best yield, try optimizing your images as well. It's loading pretty slow.

Note: I understand that it sounds tedious. It really is. And some flagged issues may actually be related to another flag issue (example: addressing "Reduce initial server response time" by changing to a better hosting may sometimes solve all or some of the other things flagged by Google PSI or GTMetrix).

I know it can come from many places but in this case, it's coming from exactly where I am telling you it comes from.

I played with your idea that the problem is the CSS order because I thought it was a good idea. So, I had the CSS code as the first CSS to load and yes the CLS did drop sharply but then the CSS was not doing what is what supposed to do. So, I added !important to the CSS and it was working but the CLS came back to where it is right now...

It's not visible to the naked eye so I wouldn't care but it's showing in my data in Google Search Console.

I know it can come from many places but in this case, it’s coming from exactly where I am telling you it comes from.

Yes, and what I'm basically saying is it's the right sidebar's contents or the CSS being applied to it that possibly causing the CLS issue.

When you see elements being flag by CLS testing tools, that's just half the story. You'll have to dig deeper within its descendant elements for any potential cause of CLS.

Few things:
a.) Try removing the image placed on the sidebar. This is to check if the image within the sidebar is the culprit. If it is, optimize the image being served. (This is actually being flagged by Google PSI as well. )

b.) Try caching everything else but exclude the child theme's CSS. Doing may solve 2 things in one go. "Eliminate render-blocking resources" and CLS.

c.) Try to fix Avoid chaining critical requests as it's affecting your site performance. It's causing important things like your CSS for the sidebar to load slower than it should, potentially causing the CLS. You may have to rearrange how you hook your styles/scripts. Non-critical ones should be placed on the footer.

b.) and c.) are addressed usually by optimization plugins. a.) will need you to optimize the image and pick a proper size for it when you add it on the sidebar.