Many installed apps or plugins in a shop result in a poor Cumulative Layout Shift (CLS) score.

Many installed apps or plugins in a shop result in a poor Cumulative Layout Shift (CLS) score. CLS is a critical aspect of Core Web Vitals that impacts search engine ranking. The lower the score the better. The CLS metric evaluates the movement of elements on a webpage post-loading, with minimal movement being the ideal scenario to prevent users from experiencing disruptions while reading content or interacting with links and buttons. Most installed apps load on page load. They send requests to servers to populate their widgets with data calculate their spot on the page and run animations. In this example, the sequence of events starts with the display of associated products, causing the existing content to shift downwards. Subsequently, the subscription feature appears on the side, leading to the displacement of the payment buttons. The introduction of the discount bundle application then results in the related products section being pushed away. Finally, the same application triggers a notification banner to slide in from the bottom, prompting the application of a discount. All this movement leads to a bad CLS score of 0.374 seconds and a total of 2.4 seconds until the site finally sits still. Integrating third-party app functionalities like these directly into the page can help mitigate these issues by allowing better control over page behavior and ultimately reducing the Cumulative Layout Shift to zero. #headlesscommerce #shopifyapps #cls #ux