In May 2020 Google announced the introduction of a new metric that would measure and potentially improve user experience on website pages – Cumulative Layout Shift (CLS.) It will be one of the first metrics that focus on user experience by looking at more than site performance. While it is not currently a ranking factor, Google has announced that Cumulative Layout Shift will be a ranking factor in the next coming months, which is probably by the year 2021. Businesses that want to stay on top of SERPs in the future need to take the time to understand CLS and figure out ways to optimize for it.
What is Cumulative Layout Shift?
In order to grasp the idea of Cumulative Layout Shift, we must understand what layout shifts are first. A layout shift is the movement of a web page after loading. Google took notice of these unexpected shifts because they can be extremely distracting to users, which can negatively impact the overall user experience. You have probably experienced the frustration of reading an article only to have the content move around. Even more annoying is the experience of wanting to click on a button, only to have it move because a new element was introduced onto the page. These shifts can easily throw a user off, requiring them to scroll through the page to find where they left off.
Now that we have a clear idea of what layout shifts are, and how they can negatively affect user experience, let us look at CLS. Google officially defined Cumulative Layout Shift as “a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don’t occur within 500ms of user input. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.”
In simple terms, CLS is a web performance metric that measures the significance of unexpected layout shifts on a page. These unexpected shifts occur when elements, such as fonts, images, videos, contact forms, buttons, and other kinds of content, move around without user prior notification or user input.
Measuring CLS
Cumulative Layout Shift will be measured with a CLS score. Google will determine this score by calculating the impact fraction (the measurement of how much space the unexpected shift of an element takes up on screen) and distance fraction (the amount of space that an element has moved from its original position to the final location) of any unexpected layout shift. The greater the impact and distance of these fractions are, the worse the CLS core will be. When it comes to numbers, it is important to know that any score under 0.1 is good, while any score over .25 is bad.
What Causes Cumulative Layout Shifts
Google highlights five reasons why Cumulative Layout Shift happens:
- Images without dimensions
It is essential to declare the height and width of images and videos in the HTML. This ensures that the browser allocates space for the respective images. When it comes to responsive images, it is crucial to make sure that images of different sizes use the same aspect ratio regardless of what device they are opened on. An important thing to note here is that many WordPress applications already specify width and height, and will not cause layout shifts.
- Ads, embeds, and iframes without dimensions
Embeds, iframes, and embeds will also require you to specify the height and width for the browser to allocate the space to unload them. If you miss this step, your page will experience a layout shift since these elements take longer to load than the content. Essentially, you want to reserve space with CSS for any element of the page that loads slower than the actual page. As long as an element has enough room to load into, the page will not be affected by CLS.
- Dynamically injected content
Dynamically injected content is content that is injected into a web page. For example, WordPress allows users to link Youtube videos or Tweets in pages, which will then be displayed as an embedded object.
- Web Fonts causing FOIT/FOUT
Fonts can cause Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) which can negatively impact your layout shift score. This is because letters and spacing in these web fonts differ from those of the browser’s default fonts. Fonts that load slowly will cause layout shifts throughout the page. While this can be minimized, it cannot be eliminated unless you sacrifice branding and go with the default browser fonts.
The best way to handle this problem is by preloading fonts (rel=preload). This pushes them higher up in the loading order and ensures they are loaded before other elements, which greatly reduces the layout shift.
- Actions waiting for a network response before updating DOM
CLS can become an issue during the developmental stage of a site. This happens when numerous assets that are necessary to render a page are loaded onto the browser’s cache. Developers and publishers that later visit the page will not notice a layout shift because the elements are already downloaded. This is why it is vital to measure CLS in the lab or in the field.
Cumulative Layout Shift is a relatively new addition to Google’s metrics. While it does not affect you now, it will directly affect websites’ organic ranking in the coming months. Getting familiar with the upcoming demands and preparing for them will help you avoid trouble later on. If you want a more in-depth and technical look at CLS, send us a message for consultation.
