Core Web Vitals: how to avoid CLS issue?

Cumulative Layout Shift (CLS) is a Core Web Vital metric used to gauge visual stability of the website. It helps to measure the frequency of unexpected layout shifts experienced by users. These sudden shifts can significantly disrupt user experience, causing users to lose track of content, misclick or interact with unintended elements.

CLS issues may arise when the CTA is dynamically loaded between significant elements, such as the product image and gallery.

Given that the Tangiblee CTA loads after all other elements on the page are prepared, selecting the appropriate placement is essential for mitigating this concern.

How can CLS issue be minimized and prevented?

1. The most preferable way is injecting Tangiblee CTA into a designated place by absolute positioning. It’s easy to notice for users and it doesn’t overlap relevant content on PDP.

2. Using a container for Tangiblee CTA provided by client, specifying container ID and classname.‍

NOTE: please make sure to set dimensions when creating a container so that it occupies a specific spot on the page.

3. Thoughtful design selection is essential. Utilizing whitespace effectively on the page offers a great opportunity to seamlessly integrate the CTA, provided there is sufficient space available for its insertion.

‍