This article explores CLS or Cumulative Layout Shift.
CLS measures visual stability of your web page on a given device.
What is CLS?
A Layout Shift occurs anytime a visible element (for example top of fold on an iPhone) changes position (i.e an element’s top left corner moves) as the page is being rendered.
Cumulative Layout Shift is the total of layout shifts until viewport is fully rendered.
When you open a web page and the content moves suddenly, it causes high irritation and can result in a visitor to “bounce” from the site. Some news websites with dynamic ad inserts are notorious, but even slight movement on an eCommerce site will cause visitor frustration.
Imagine you are on a product detail page (PDP) and as the page opens, you do see an “add to cart” button. You try to hit the add to cart button, but by this time the image begins loading and you have to wait until the UI stabilises. In Magento a configurable product page often behaves like this. Another common scenario is that the page shifts as a new font is loaded as the original text was rendered in the substitute or default font.
What are the common reasons for CLS in a Magento Website?
A fundamental reason why CLS occurs is that a responsive HTML is not designed for all widths under consideration.
- A 3rd party plugin takes over the HTML design of the page.
- During HTML design, responsiveness to a mobile layout is not planned, but happens due to use of a responsive css such as bootstrap.
Let us look at specific reasons with the hope to come up with best practices.
- Use of <img> tag without width and height. Since space is not reserved and fixed, the width will be the actual width of the image – which will be known only once the image is loaded.
- Use of multiple fonts. As the fonts are loaded the text changes its flow
- Not knowing how layout shift is calculated. Chrome calculates layout shift as the page loads. It is cumulative. A small shift in the top part of a page can cause a large shift below.
- If a lazy loader is used to load images in a category page, it is common to see the placeholder image being a loading gif. Quite often the gif is not of the same size as the image being loaded. When the final image loads, a layout shift happens. This may apply to various widths designed for.
In the example below, a menu is inserted after the banner is loaded for the mobile, causing a CLS.
Stay tuned to this series on Core Web Vitals for Magento. We will be looking at specific examples and solutions.