Core web vitals are ranking signals that Google will use in 2021. These three factors, which measure user experience, include the largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).
Here, we'll talk about the cumulative layout shift in detail – and how it can affect your search engine rankings.
As per Google, CLS is a user-centric vital that measures visual stability. It quantifies how often clients deal with unexpected layout shifts.
In other words, the cumulative layout shift refers to the website's format changes after the browser renders it. It usually happens when dynamically injected content manifests on top of the available data.
Although such is the case, it can also be caused by several things:
Put merely, cumulative refers to increased quantity. Layout pertains to frame, while shift refers to a position change.
All in all, the cumulative layout shift is the sum of frame changes that affect the website's design.
CLS is one of Google’s core vitals initiatives. It aims to guide developers about the signals that ensure an excellent experience for every user.
Each metric embodies a unique facet of personal experience. While all are measurable in the field, each one reflects the experience that helps enhance user-centric outcomes.
Although the vitals are bound to evolve, the main foci for the coming year are:
This is measured by LCP, which denotes the speed with which your page displays the first elements. It helps you assuage the user about why he/she should continue browsing.
As the first few seconds of parsing play a role in bouncebacks, a good LCP of within 2.5 seconds once the page starts loading may improve customer dwell time.
As it is known to many, this is one of the signals Google uses for rankings.
This is determined by FID, or the time when a user first interacts with your site to the time he/she can respond to such an interaction. FID measures user frustration, as it can be annoying to click on a button and not have anything happen.
To prevent such frustration, your FID duration should be less than 100 milliseconds.
This is the crux of the cumulative layout shift. For an optimal customer experience, the score should be less than 0.1.
While good vitals are necessary for a great client experience, Google will consider these with other presently-used signals such as:
For one, many users find it annoying to click on a link and have it move. After all, this type of content instability can result in the individual clicking on something else.
Think about this: you’re shopping online. You’re planning to return to the homepage, but you end up clicking the Checkout button instead because of the layout shift.
Not only will this make for a bad user experience, but this can lead to a cascade of problems as well. The seller has to cancel the order and refund the credit card, among many other things.
Although a layout shift sounds terrible, it’s not always the case. It only leads to a poor customer experience if the client does not expect the said shift.
Layout shifts that occur due to user interaction, like clicking a button or link, are generally good. The change, however, should be close and clear enough to the user.
Yes, content is still essential for Google when it ranks websites. However, when the vitals go live, they can help influence your rankings as well.
For one, it’s important to have a good layout shift score because this will minimize the user’s annoyance with your website. That’s because it minimizes the unexpected shifts that can lead to wrong clicks or unintended purchases.
As the cumulative layout shift helps your visitors achieve a great experience, it can help boost your website’s rankings. With this, you can expect more traffic, conversions, and revenue.
Since CLS promotes a seamless experience, it's the top-ranking websites that are more likely to meet such metrics. According to research, the number one website is 10% more likely than the number nine website to pass the core web vitals assessment. This is even before the launch of the said metrics.
According to the same research, only half of the mobile sites (46%) and desktop sites (47%) meet Google's recommended CLS grades. Because of these figures, it means that more than half of the world's desktop and mobile sites could still get an SEO boost by improving their CLS scores.
The layout shift score is measured by combining all the individual layout shifts throughout your page’s lifespan. Google does this by multiplying impact fraction with distance fraction.
Impact fraction is the viewport area or space that the unstable element occupies between two frames. An element is considered unstable when it changes its start position.
In other words, the impact fraction is a union of all the areas that the unstable element has occupied in the previous and current frames.
For example, your element initially takes up half (50%) of the viewport, but it ends up moving down by 25%. The resulting impact fraction is 75% since the element takes 50% and 25% of the viewport area between frames.
On the other hand, distance fraction is the distance with which the element has changed position, whether horizontally or vertically. In the previous example, this measurement is 25%.
Given the examples above, the layout shift score is calculated by multiplying 0.75 (impact fraction) with 0.25 (distance fraction). The answer is 0.1875.
Unfortunately, this is not good as Google recommends a CLS score of 0.1 for each page of your website. Although a score below 0.25 says that your website needs improvement, going above this means your site has a low CLS score.
Since Google collates all the layout shift scores during the website's entire lifespan, it's important to have your viewport as stable as possible. That's because the more unexpected shifts you have, the worse your score will be.
You can ensure this by measuring the 75th percentile of page loads, which should be segmented across mobile devices and desktop users.
To see if you meet Google’s core web metrics, you can use three field tools and three lab tools. The former is preferred, though, as the latter's scores may not represent real-life experience.
This field tool helps you check how the actual users interact with your website. Its metrics include LCP, FID, and CLS.
Also known as PSI reports, this is another field tool that analyzes your website. It also gives recommendations that will help you improve your website’s CLS and other metrics.
A good score is represented by a green bar. A poor score is red, while a metric that needs improvement is colored orange.
Your website will pass the PSI assessment if the 75th percentiles of the three metrics are all good.
This tool provides a Core Web Vitals report according to field or real-world data. Results are classified according to the URL group, metric category, and status.
The aggregated CLS shows the lowest common CLS for 75% of URL visits.
This lab tool is directly built into the Chrome browser.
You can check for layout shifts by clicking the Summary tab, located under the Experience section of the Performance panel.
Lighthouse is an open-source lab tool that can help developers and website owners improve page quality. This can be accessed through the Chrome DevTools’ node module or command line.
To get a report, all you need to do is input your website’s URL.
WebPage Test is a lab tool that can be used to check CLS. First, you need to pick the right browser – one that supports Layout Instability API. Next, you need to set the command line flag and measure the CLS.
The results will be shown on the Custom Metrics page.
The easiest way to test CLS is through the Web-Vitals Javascript Library. You can use the Layout Instability API to measure this manually.
As a layout shift can lead to a bad client experience, it can drastically affect your search engine rankings.
You can avoid this possibility by following these tips on how to optimize CLS:
Only do this in response to user interaction so that all shifts are expected.
Should this be necessary, allot enough space in advance with the use of Skeleton UI or a placeholder. This will help minimize unnecessary shifts once the content loads.
Doing so will allow the browser to give the right space while the image or video is loading. This will also enable browsers to compute the aspect ratio, which is the image’s width-to-height ratio.
Aspect ratio helps browsers allocate enough space for such elements. It is represented by two numbers separated by a colon (x:y), where x is units wide, and y is units high.
Another option to try is the unsized-media feature policy, which can force this action in browsers that support feature policies.
You can also reserve the space needed for items such as CSS aspect ratio boxes. This will help minimize the pitfall of responsive web design.
Although CSS can resize images, it can lead to a reflow once images visualize on the screen. Text can pop up unexpectedly, triggering a bad user experience.
Flash of invisible text (FOIT) and flash of unstyled text (FOUT) actions can lead to two things:
To prevent this, you can use the Font-Display tool to modify fonts’ rendering behavior with values such as block, swap, auto, optional, and fallback. Except for the optional value, the four others can still lead to some sort of layout change.
Another option to try is Font Loading API, which can help cut the time it takes to render the necessary fonts.
For Chrome 83 users, utilizing <link rel=preload> on web fonts will boost the chances of meeting the first paint.
Combining <link rel=preload> and font-display: optional will do the trick as well.
Animate transitions in such a way that it provides continuity and context.
If you’re working with Google Publisher Tags, your ads can lead to a layout shift. That’s because they can displace non-ad content once they get loaded.
You can prevent this by fixing the width and height attributes for static ad slots.
For multi-size ad slots, you can reserve space for the largest configured size. Another option is to check the data from Google Ad Manager to determine the size of the ad that is most likely to serve.
Another problem that occurs with multi-sized ads is that they can have served, blank spaces around them. You can avoid this by limiting the size ranges (above the fold) to serve the slot. It will also help to make use of vertical and horizontal centering.
Should the content fail to fit in the slot, the ad may appear extended or cut off. This can be prevented by resizing the slot. As this can cause a shift as well, you must dedicate enough space for the content.
You can also try to fix the ad space by resizing it with CSS or JavaScript.
These don’t have a specified set of fixed sizes as they automatically resize. As such, it’s hard to reserve space for such ads.
Despite this drawback, you can minimize shifts using the fluid size for ad slots underneath the fold.
You can also opt to fetch fluid slots right away. This will reduce the chances of the user seeing the ad before it is resized.
This method is useful, especially when there are no ads to display. However, this can lead to bad layout shifts.
To prevent this, you need to check the Ad Manager's historical fill data. This will help you determine the slots which will most probably be filled, as these should be expanded.
As for those that are unlikely to fill, they should remain collapsed.
Don’t place ads near the top as they can lead to greater layout shifts. That’s because top-placed ads have more content below, so more elements move when a shift occurs.
It’s best to put ads in the middle, as the data below this area is less likely to move.
Embeddable widgets enable you to add portable web content such as social media posts and YouTube videos.
As embeds are often unaware of the size, there’s not much space for the content. This then leads to unexpected layout shifts.
To avoid this, you should pre-compute embed space with a placeholder. You can do so by inspecting the height of the final embed with the help of developer tools.
That way, when the embed loads, the iFrame will resize accordingly.
A slow-responding HTTP server can lead to layout problems as well. The same goes for CDN, as it takes some time for the intended elements to load.
As these can lead to layout changes, it's recommended that you build a space in DOM. Another option is to synchronize the load alongside the other elements.
The cumulative layout shift is a metric that measures visual stability. It is often caused by injected content, though it can be brought about by images and videos without dimensions, FOIT and FOUT, and late-loading CSS.
You can measure CLS by multiplying impact fraction with distance fraction.
Improving CLS is vital for user experience as well as SEO rankings. The less frustrated the clients are with your website, the better your signals will be.
To meet the recommended CLS score of 0.1, you should add image/video attributes, prevent FOIT/FOUT, reserve ad space, inspect embeds, and use transform animations.
