What is causing CLS on this Site?

Question

I have a CLS shift on this site, and I can't figure out what is causing it?

Typically Cumulative Layout Shifts are caused by not assigning width/height to images or lazyloading them but that is not the case for this site. Also, all of my important CSS is inlined so we don't have an issue with render blocking. I'm really at a loss. Performance insights and Lighthouse are not giving me any clues.

I've tried to take 101vh off of the body/html, and I've tried to take 80/90vh off of the hero image wrapper (the image is absolute so that is not an issue).

Does anyone have any clues for me?

Answer 1

I use the below Chrome extensions to find CLS issues.

1. Web Vitals Enable console logging for this and in the Chrome dev console, check the entries[n].LayoutShift.sources[n].LayoutShiftAttribution properties
2. Core Web Vitals Annotations