Have you ever viewed a website and you were about to click a link to an article and then the layout suddenly moved? An ad appeared and somehow instead of clicking on the article you wanted to read, you clicked on the useless ad? That sudden movement on the page is called layout shift.
Google User Experience was built on the idea of eliminating this layout shift commonly found on most websites. It’s staggering that so many popular websites do nothing to stabilize their layouts, stuffing their pages with banners and intrusive ads that ruin the user experience.
For Google User Experience, it is a clear priority, and various Chrome team members have been talking about layout shifts for years now. That’s why Google made Cumulative Layout Shift one of the Page experience signals. These signals attempt to capture and quantify the technical aspect of User experience. Now that it’s an important ranking factor, means it’s important to understand what CLS is and how to optimize for it.
Why does CLS happen?
According to Google, there are five main reasons why Cumulative Layout Shift happens;
- Images without dimensions
- Ads, embeds and iFrames without dimensions
- Dynamically injected content
- Web Fonts causing FOIT(flash of invisible text)/FOUT(flash of unstyled text)
- Actions waiting for a network response before updating DOM
Images
From this, it is clear that images and videos need to have a height and width declared in the HTML.
Example:
<img src=”example.jpg” width=”800″ height=”300″ alt=”Example Image”>
With regard to responsive images, make sure that the different image sizes for different viewports use the same aspect ratio.
Google recommends using a tool called Aspect Ratio Calculator to calculate aspect ratios when building websites. If you’re dealing with responsive images, you can use srcset attribute. It allows you to set up several photo sizes and the browser to display the best possible size.
CLS caused by Ads
It is tricky to deal with CLS caused by ads, one way to deal with ads that cause CLS is to style the element where the ad is going to show.
For example, if you style the <div> to have a specific height and width then the ad will be limited to those.
If there’s a lack of inventory and the ad doesn’t show up, you can set it so that an alternative banner or ad takes up its place.
Dynamically injected content
This points to content that was injected into the webpage. Example: In WordPress, you can link to a YouTube video or a Tweet and WordPress will display the video or tweet as an embedded object.
Web-Based Fonts
If your website is using fonts that are hosted online, they might be the main cause of FOIT (Flashes Of the Invisible Text) and FOUT (Flashes Of the Unstyled Text).
When the browser downloads the fonts from the server, it often displays blank space until the custom font loads. After downloading and displaying the font, the layout usually moves quite a lot. It’s called FOIT (Flashes Of the Invisible Text).
Another scenario occurs when the browser displays one of the system fonts until the custom one is downloaded. We call that FOUT (Flashes of The Unstyled Text). Since the system font may differ from the custom one, it may take up a different amount of space. Because of that, the layout of your site might move significantly after your custom font loads.
To avoid this, you can use font:display values such as auto, swap, block, fallback, and optional. For an even better result, you can also preload font files using <link rel=preload> for key fonts – this way they will be downloaded as a priority asset.
How to avoid CLS during development?
Cumulative Layout shift can slip through during the development stage. How? Many of the assets needed to render the page are loaded onto a browser’s cache. The next time a developer or publisher visits the page under development, they won’t notice a layout shift because the page elements are already downloaded.
How is CLS calculated?
Calculating the cumulative layout shift involves two metrics/elements. The first one is called Impact Fraction
Impact fraction
Impact fraction measures how much space an unstable element takes up in the viewport – a viewport is what you see on the mobile screen.
When an element downloads and then shifts, the total space that the element occupied, from the location that is occupied in the viewport when it’s first rendered to the final location when the page loads.
Example: An element that occupies 50% of the viewport and then drops to 25%. This is then added together and the 75% value is called impact fraction, and it is expressed as a score of 0.75
Distance Fraction
This measures the amount of space that the page element has moved from the original position to the final position.
In the above-mentioned example, the page element moved 25%.
So now the Cumulative Layout score is calculated by multiplying the Impact Fraction by the Distance Fraction:
0.75 x 0.25 = 0.1875
How to measure CLS?
You can measure CLS in two ways: using the LAB or in the Field- based on real user interactions, gathered by Google and other third parties.
The lab means simulating an actual user downloading a webpage. Google uses a Simulated Moto G4 for generating CLS scores within the lab environment. Lab tools are best for understanding how a layout may perform before pushing it live to users. It gives publishers the opportunity to test a layout for issues.
Summary
CLS might be less intuitive compared to other Core Web Vitals, but it’s a very useful score. It can help you diagnose why users are unhappy with your site and improve their experience.