-
Hi there,
I am inquiring about a CLS issue on my website.
The left sidebar of my page has a width of 20% by default.
On top of that, I have added css for:
@media (min-width: 767px) .is-left-sidebar { width: 340px!important; min-width: 340px; }This is meant so the sidebar is wide-enough to show most of my functions that are presented in there. Current CLS is 0.55
While checking the website metrics, google is reporting CLS issues. I got a feeling it is because the default sidebar width is different from the CSS I apply. However, I’ve been unable to change the 20% width sidebar, to 340 px.
Perhaps I got it all wrong and it’s a different issue.
Do you have any suggestion on how I can solve this CLS issue?
Regards,
Rick -
Hi there,
i am not sure its the width setting, if i:
a) check the GT Metrix CLS report which identifies the elements being affected
b) use the browser developer tools to inpsect the loading of the site, i see that the Left Sidebar loads with no styles, and then the styles and scroll position get updated.The spacing for the sidebar / content / sidebar looks stable.
The sideways and vertical shift is more apparent from the sidebar styles loading later.If you have any cache / optimization plugins, disable those and retest the site.
As the most common issue is a FOUC caused from a optimization deferring the loading of above the fold styles.Let me know
-
David,
That is a good question. I cooked up a staging site, with all caching plugins turned off and I cleared the cache as well. I’m still getting a cumulative layout shift of 0.117 on the latest lighthouse check I did.
Now that CLS of 0.5+ was an outlier, I’ve usually been at 0.117. But I’m still hoping to work on that one too. With these plugins turned off, does that allow for you to see any potential cause?
Thanks,
Rick -
Hi Rick,
Have you tried using a CDN as well to improve to speed at which your site’s files are delivered to your Site Visitors? Helpful link: https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/
-
Fernando,
Thanks for asking. Yes my website makes use of Cloudflare Enterprise and delivers the content from a great selection of locations closest to the user.
Do you have any other suggestions for fixing a CLS issue?
Regards
Rick -
For testing, if you remove the CSS does it remove the CLS?
I’m testing your site and the CLS seems to point to the loading/opening of your Accordion in the left sidebar as the page loads as opposed to the width.
See these images that are being reported as causing the CLS:
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001300.jpg
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001400.jpg
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001500.jpg -
Hey Fernando,
I just removed the CSS that I thought was causing the issue. You can see it live in action at the staging site. And it doesn’t seem to impact anything. I thought that was the issue, because when I open the site, sometimes I can see the width moving slightly. The initial load of the sidebar just looked wider than the adjusted one.
The menu plugin is built so that when it opens, it scrolls to the relevant section.
Do you see any alternative way to not get the cumulative layout shift reported? I’m happy to provide additional details or temporary access if necessary 🙂
Regards,
Rick -
I see. Can all Accordion items be opened automatically on page visit?
Alternatively, I would you consider having a menu similar to the Brand Template where there isn’t an accordion?: https://gpsites.co/brand/
-
That’s a nice looking menu. However I’m not sure it would fit my purpose.
My menu scans all posts and categories on the website, and automatically adjust the menu when posts are included or excluded. It also has a custom sorting so that category pages come at the top of each category.
If we want to, all accordion items could be opened on page visit. However, since there are over 1200 posts on the site, the purpose is to:
– close everything, except that category where the current post resides
– scroll towards the active function in the menu, so people can continue their search after at the right levelWould you think it’d make a difference if we kept all the menu items open and still scroll to the active item?
-
I see.
Your current setup where menu-item automatically opens is better user-friendly-wise in my opinion.
But, can you try having all menu items open if it’s an available option and see if that helps?
-
Okay – just to confirm – the CLS issues are likely caused by the menu scrolling. And not so much by other CSS?
I would have to consult with the plugin developer, as this plugin is custom made for my site. And see if he can test in that area.
-
Upon my tests, it’s the Menu items opening that’s causing the CLS. This is the report:
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001300.jpg
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001400.jpg
https://www.webpagetest.org/results/23/09/19/AiDcPV/4XS/video_1/ms_001500.jpgAs you can see in the 3 images, only the menu items “being closed then opened” on page load are causing the CLS.
-
Thanks Fernando. Will look into it and close the topic.
Appreciate your suggestions.
– Rick
-
You’re welcome, Rick!
- You must be logged in to reply to this topic.