How to fix a Google CLS issue on a custom theme mobile website?

[mjcvn]

My website, gopandapack.com, that is running a custom theme, is getting this error:

CLS issue: more than 0.25 (mobile)

Does anyone know what's causing it and how to fix it?

[desmondfrancis]

Here are 5 possible fixes for your CLS issue: 

1. Disable sticky headers that cause the content to shift up and down.
2. Disable the logo shrinking effect – logo zoom in or zoom out when scrolling the page. Also include size attributes on your logo image. Lack of image size attributes for the logo is the second most popular cause of CLS issues from my experience.
3. Always include size attributes on your images and video elements. If you’re using WordPress as soon as you upload an image WordPress automatically adjusts the size of the image. If not this is an example of a good image code with declared width and height:

<img src=”thelink” width=”400px” height=”300px”>

1. Never insert content that can appear above existing content, except in response to user interaction. This ensures any layout shifts that occur are expected. A good example of this is the popups like the annoying “subscribe now” or newsletter popups.
2. Disable animations. Or prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state. Or better stay away from animations.

[Andres1]

Hi, if the problem is with the logo in the debut theme, what change do you recommend? this is what PageSpeed Insights shows me. thank you for your assistance

[mactac]

This is also the problem I have.  I asked about this about a year ago, and nobody seems to have a solution.  I'm getting close to dumping the debut theme because of this.  Seems like an incredibly simple fix to add image size attributes based on the size logo (which resizes automatically) , but what do I know?

[ClearP]

I'm having the same issue with this on the Debut Theme.

Come on Shopify! Give us an answer!