Archived topic
CLS Identified - Can it be fixed?
5 replies · Started by Ian on March 17, 2021
I found one instance of GPSI complaining about a layout shift for desktop. This is the exact element. It's a small shift but given there are none on mobile, this is actually the only warning:
<div class="site grid-container container hfeed grid-parent">
Any ideas on a fix for this?
Hi there,
can you share a link to the site so i can see the issue?
As a note the elements it lists are not necessarily ( and most commonly not ) the element that is the cause of the CLS. In most cases it is the element that is experiencing the symptoms of CLS - generally an element above it that is causing the problem.
Sure thing David. I added 2 sites. If you run GPSI for both, then check Desktop results near the bottom for "Avoid large layout shifts", you will see GP items (either blocks or WP Show Post) references for CLS. It's not much but was wondering if there is a solution?
On the Bao - site, can you try changing the Customizer > General > Structure to Flex box.
On the Health - site the home page WPSP - thats due to the image sizes - we'll be making an update to WPSP soon to resolve that.
Thanks David. Going to Flex did indeed get rid of the CLS issue. I think I had Float due to footer bouncing up on Archive pages hen Masonry was ON for mobile views even with the functions to disbale Masonry for mobile. I have disabled Masonry for now and hopefully, there is a fix in the near future.
The WPSP image thing caused CLS on the sidebar of other sites as well. Hopefully, the next release will allow us to choose an actual size (ie. thumbnail, 300x300 etc...).
Thanks!
Glad to hear that.
We're working on both :)
