Site logo

Archived topic

Woocommerce Archive pages shifting sidebar issue

9 replies · Started by Cam on June 15, 2021

Viewing posts 1–10 of 10

Hi this issue is connected with my previous topic.

The sidebar on product categories pages was shifting to right as the page reload. It's position should be on the left side only.

I tried removing the css you gave me from the last topic but still the problem exists.

Also CLS score is high

Hi Cam,

I've checked your site and it doesn't seem to have any optimization plugin installed on it.

Installing and setting a caching/optimization can improve this. Can you try setting one up?

The CLS is fairly low by the way. - https://share.getcloudapp.com/8Luon65L

Hi Elvin, we already have a caching plugin on our site and it was also enabled.
The shifting position of the sidebar also appear on our /shop page and this page got high CLS - http://prntscr.com/15l6u83

Hi there,

did you resolve the issue with the sidebar layout ? As i ran a few performance tests on a throttled 3G network and the sidebar is always loaded left... Let me know.

The CLS issues are related to the Font Loading - if you throttle the network on Chrome Developrs tools and reload the page you will see the fonts are updated at least once during load. The Open Sans font request is being made after the Nitro Minified CSS loading - would be best to server the font locally and make sure its request happens before the minified CSS load.

Hello David

Not yet resolve, I can still see the sidebar shifting from right as the page reloads on the /shop page.

Hi Cam,

Could you try clear cache and disable cache plugin temporarily? So I can have a better look into the code. Thanks!

Hi Ying

Cleared cache and temporarily disable the caching plugin.

Looks like the issue is no longer there?

Hi Leo, but we need the caching plugin to work on our site because now that it is disable, our page speed score drops.

Anything that you can do to the sidebar while the caching plugin is still enable? Any CSS files that we can exclude from caching?

I'm not sure if this is a CSS file issue.

You can try excluding main.css and main.min.css first.

If not then it might be good to check with the support team of the caching plugin - perhaps it's just a setting that needs to be turned off.

This archived topic is closed to new replies.