How to Improve User Experience by Eliminating Layout Shift

Layout shift is a significant issue that can result in a poor user experience on websites. Users may accidentally click on unintended buttons or have their reading workflow interrupted due to text shifts. In a previous article, I discussed Cumulative Layout Shift (CLS), a Google Web Core Vital used to measure the degree of layout shift.

In this article, I will highlight the culprits responsible for these rapid, unexpected, and unwarranted layout shifts and outline steps that can be taken to reduce them. By addressing these culprits, we can improve the user experience on our websites and ensure that users can interact with our content in a smooth and seamless manner.

CULPRIT 1 — IMAGES WITHOUT DIMENSION: Always include image size in the code sent to the browser for rendering. This ensures that the browser allocates space for the image being rendered from the server. To ensure responsive design and fluidity, use media queries to specify image dimensions for different viewports. By doing this, you achieve two objectives: responsive design and reduced layout shift.

CULPRIT 2 — AD, EMBEDS, AND IFRAMES WITHOUT DIMENSION: Omitting dimension size is a significant contributor to layout shift. Incorporating ads into a website generates revenue and increases traffic, but these ads may cause layout shifts if the dimensions are unknown. To avoid this, place ads in a container with a specified size and add a CSS property, overflow hidden, to ensure that any extension beyond the stated size of the container is hidden.

CULPRIT 3 — EMBEDDED FRAMES: Embedded widgets such as Google Maps and YouTube frames are often placed in web pages and can cause massive layout shifts if space is not allocated for them after being fetched. To avoid this, provide an adequate amount of space for the div container that will house the embedment.

CULPRIT 4 — DYNAMIC CONTENT: Avoid inserting new content above existing content, unless it is in response to user interaction. This ensures that any layout shifts that occur are expected. Examples of such content include sign-up forms and cookie permission requests. Proper loading indicators should also be used when loading dynamic content to prevent sudden layout shifts.