core-web-vitalscumulative-layout-shiftweb-vitals

Will a pointer-event:none save "CLS" score in Core Web Vitals?


I have a page with high CLS scores, due to some dynamically loaded content.

The UI/UX is good and no users ever complained about it, but the lower part of the page contains consumes a lot of room.

Will a pointer-event:none on the lower DOM elements save "CLS" score in Core Web Vitals?


Solution

  • The UI/UX is good and no users ever complained about it, but the lower part of the page contains consumes a lot of room.

    You'd be surprised how many people don't complain, but still find layout shifts annoying and bad UX.

    Will a pointer-event:none on the lower DOM elements save "CLS" score in Core Web Vitals?

    In the comments you added to this saying "IMO, Google should punish the content shift that actually interfere user's actions, like click, tap, mousemove, etc.".

    CLS measures all items moving - whether it interferes with interactions or not. For example, one of the most annoying instances of CLS is when an article loads and you start reading, and then other content (an image, an ad...etc.) loads above it and the text shifts and you lose your place. There are no interactions there but the shifts are a bad experience. Hence are included in CLS.

    In fact, CLS actually gives you some leeway for interactions by excluding shifts after certain interactions, as some interactions are expected to cause shifts. For example, clicking a summary/details element will show more content and shift it down - but that's an expected shift that will not annoy the user.

    So in answer to your question, not using pointer-event:none will not "save 'CLS' scores".