Layout stability

What is layout stability ?

Layout stability is when the various elements of the page do not change position or change only a little as a result of the loading of new resources. For example, the user begins to read text on the page and at the same time, a block is dynamically added above it via JavaScript, the text then shifts to the bottom and the user loses the thread of its reading.

Google's CLS (Cumulative Layout Shift) indicator measures how often these changes occur. The higher the indicator, the more unstable the layout. When this indicator is 0, no unexpected movement of the page content has been detected. Read more about this CLS indicator and how it is calculated in the Google documentation.

Why is it important ? 

Layout stability is important because it is taken into account by Google in its ranking criteria and most importantly, because it negatively impacts the user experience when browsing the page. Faced with an unstable page, the user may be frustrated by the loss of visual cues and worse, he may think that the site does not work because of a shift during interaction on buttons that move for example.

How to avoid unexpected layout changes

In order to provide an optimal experience for your users, it is necessary to keep the CLS indicator below 0.1. 

Here you have a few tips to keep the indicator below the critical bar :

• define the size attributes of your images and videos in HTML code or reserve the necessary space in a container with a height/width ratio in CSS
• define the dimensions of containers that hold third-party content such as advertisements
• do not dynamically insert content on top of existing content
• prioritize transformation animations ("transform" in CSS) to property animations that trigger layout changes (JavaScript manipulation)
• preload web fonts