Sidebar causing a lot of CLS (Cumulative Layout Shift)

Hi there,

The biggest culprit seems to be the images. Consider using optimization plugins to convert to a better format and cut file size.

More things would be to consider not using WPSP's image height and width text field. It has a known issue that causes Google PSI to flag it with Image elements do not have explicit width and height.

This particular flag occurs on your Affiliate Toolkit plugin as well but I don't exactly know how to address that. It's best to ask its plugin support on how to deal with it.

You then play around with your optimization plug-in and see what set of configurations works best. :D

Hi Elvin,

thank you for your reply! I'm already using EWWW image optimizer to optimize the images and FlyingPress to lazy load them and add the width/height attribute to them.

I played around with the settings a bit, and now I'm lazy loading them using only EWWW image optimizer.

Regarding the WPSP image width and height fields: I have recently added them and they have improved the performance of my website a lot.
Previously, I've had a lot of warnings that those sidebar images aren't correctly sizes. After adding the width/height attribute though, those warnings disappeared and the size of my website decreased dramatically.

I'll consult with the Affiliate Toolkit author regarding their width/height problem. The Image optimization plugin doesn't seem to handle that.

However, even after some playing around, I'm still getting that Sidebar CLS layout shift.

What do you think?

Hi there,

what i notice on initial load is the Primary Content is being loaded and rendered before the rest of the HTML is loaded - so the sidebar gets loaded after first paint.

I would suggest disable your cache and optimization plugins to see if the CLS goes away - if it does then you know its something to do with the optimization of the site and a case of eliminating which option is causing that.

Hey!

That's really weird. So I ended up deactivating almost everything, and the layout shift is still occuring. Although it doesn't show up in page speed tools, I can still see it in my browser (incognito tab - caching disabled).

This is my list of plugins:

Well something you removed/changed has fixed the issue.
I used the Chrome dev tools, throttled the network and run a performance test and this is now what i see on first paint:

https://www.screencast.com/t/5gkpVVL8

The sidebar HTML is being loaded correctly now.

You may be seeing a cached version from your router / ISP on your local machine.

Oh! Interesting! So I guess I should rather trust the GTMetrix test results than my internet connection.

If I look at GTMetrix tests, having either "AntiSpam Bee" or "FlyingPress" or both enabled will cause the CLS to jump up... weird

I would assume the issue is related to Flying Pages setup. I believe that does some preloading stuff which is not including the sidebars.....

Hm yeah, although the FlyingPress cache is disabled - it uses the nginx cache. Maybe I should try enabling that cache - even though I already have one. I've contacted the FlyingPress developer for now!

The weirdest thing is that Antispam Bee causes the same CLS as well, even though it shouldn't mess with that part of the site at all.

Well i would be quite surprised that an Anti Spam plugin would cause a CLS issue especially on load. Might be worth getting the plugin developer to take a look but i cannot see how it would contribute to the original issue where the sidebar was being loaded after the first paint of the page.