Have you ever visited a website where, just as you were about to click on a button or read some text, the content suddenly shifted or disappeared from view? This can be a frustrating experience, as it disrupts the user’s reading flow and can even lead to unintentional clicks. Such unexpected layout changes are typically caused by asynchronously loaded resources that are added to a page after the DOM has already been rendered. The culprit could be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.
Often these problems are not easy to catch during development by engineers. Images most time are already cached by the engineers' browser cache, hence faster load time. API fetched locally runs very faster, so there for layout shifts are not so noticeable.
How then do we measure how many layouts shift our page has and what is an acceptable limit?
CUMULATIVE LAYOUT SHIFT
In web design, a “layout shift” occurs when elements on a webpage unexpectedly move around during page load or user interaction. These shifts can be frustrating for users, leading to accidental clicks or misinterpretation of information.
Cumulative Layout Shift (CLS) is a metric that measures the largest burst of layout shift that occurs before a user interacts with the page. A session refers to a time frame during which all layout shifts that occur no more than one second apart are considered part of the same session window. If layout shifts continue for a period of 5 seconds or less, they are included in the same session window. If the layout shifts stop for more than one second or if new shifts occur after the initial 5-second window, a new session window begins.
The 5-second limit is used to define the duration of a session window for measuring and analyzing the impact of layout shifts on user experience. It helps web designers and developers identify and fix issues that may affect user engagement and satisfaction.
WHAT IS A GOOD CLS SCORE
To ensure a positive user experience, it’s recommended to aim for a good CLS score of 0.1 or less, according to Google Core Web Vitals. A CLS score above 0.1 indicates that there is room for improvement in reducing the frequency and impact of layout shifts on your website. By addressing these issues, you can improve the overall usability and user satisfaction of your website.
HOW THEN IS CLS MEASURED?
The “Cumulative Layout Shift Score” is calculated based on two metrics: the “Impact Fraction” and the “Distance Fraction.”
layout shift score = impact fraction * distance fraction
IMPACT FRACTION
The “Impact Fraction” refers to the total area in the viewport that an unstable element, which causes a layout shift, covers before and after the shift occurs. For example, if a text block initially occupies 50% of the viewport height when the page is rendered from the server, but it shifts 25% more from its original position when some asynchronous data loads, the Impact Fraction will be 75% (50% + 25%).
To clarify, an unstable element refers to an element that causes the page layout to change unexpectedly or without user interaction.
To calculate the Impact Fraction, we add the initial percentage of the viewport area covered by the unstable element to the percentage shift at the final render.
Therefore, in the given example, the Impact Fraction is 0.75 or 75%
DISTANCE FRACTION
The “Distance Fraction” represents the distance that the unstable element, which causes a layout shift, moves from its initial position to the new position. In the previous example, the page moves 25% from its initial rendering, and the distance from the top of the screen to the new position is 25%, or 0.25.
To calculate the Distance Fraction, we divide the distance the unstable element moves by the total viewport height. Therefore, in the given example, the Distance Fraction is 0.25.
CUMULATIVE LAYOUT SHIFT SCORE
layout shift score = impact fraction * distance fraction
0.75 * 0.25 = 0.1875
From this. we observe that improvement has to be made on the web page as it exceeds the recommended Google score on 0.1
IMPACT FACTION
The “Impact Fraction” is the visible area within the user’s immediate viewport that experiences a layout shift. In the case where a text block occupies the same height as it did at the first render, the Impact Fraction remains at 0.5.
It is important to note that the Impact Fraction only considers the visible area within the user’s immediate viewport. Any content that is not visible within the viewport, and does not experience a layout shift, is not factored into the calculation of the Impact Fraction.
DISTANCE FRACTION
The distance fraction was stated to be 0.14
CUMULATIVE LAYOUT SHIFT SCORE
layout shift score = impact fraction * distance fraction
0.5 * 0.14 = 0.07
This is a good score
EXPECTED AND UNEXPECTED LAYOUT SHIFT
It is true that not all layout shifts are bad. In fact, without layout shifts, the web would not be as useful as it is today.
“User-initiated layout shifts”
are layout shifts that occur based on the user’s interaction with the web application, such as scrolling or clicking. For instance, when a user on a mobile device clicks on an input button, the onscreen keyboard pops up, and the content in the viewport moves up to accommodate the keyboard. Similarly, when a user on an e-commerce page selects a category, data is fetched from the database and mapped to the page. The layout might change as the mapping occurs to fill the page up with the data. This is a user-initiated layout shift.
To provide a better user experience, a pacifier, such as a loader, should be displayed on the screen as the mapping occurs and disappears when the data has finished mapping. This will give the user a better experience by providing feedback on the progress of the data loading and preventing unexpected layout shifts.
Animaton and transition
These are great ways to entertain the users and give them a wonderful user experience, However, this should be done in the right manner not abruptly to rattle the users
The following are CSS properties advised to be used when carrying out animation without triggering the layout shift
Instead of changing the height and width properties, use transform: scale().
To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.
TOOLS TO MEASURE CLS
There are different tools used to measure the CLS, based on two different conditions (Feild measurement and Lab measurement ).
Lab Testing
When developing features for software, it is not possible to gather information on how this feature will interact with real users. Tests are carried out in the lab, to find out how this tool will interact in the real world. The following tools can be used to carry out this test
Chrome Devtools
Lighthouse
PageSpeed insight
Webpageteest
Field Testing
On the other hand, while testing in the lab is a reasonable proxy for performance, it isn’t necessarily reflective of how all users experience your site in the wild. The performance of the website can vary drastically based on the user’s device and network. The following tools can be used to carry out this test
Chrome User experience report
Search Console (Core Web Vital report )
IN MY NEXT ARTICLE I WILL DISCUSS IN LENGTH HOW TO OPTIMIZE CLS
Top comments (0)