The following in-depth look will focus on the latter vital, Cumulative Layout Shift. As well as explaining what is Cumulative Layout Shift, we\u2019ll describe how it impacts the user experience, its role in search engine optimization, how to improve CLS, and more.<\/p>\n
What is CLS?<\/h2>\n
![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/04\/Blog-graphics-8-e1653310399902-300x185.png\")
As the name hints at, Cumulative Layout Shift accounts for website elements that unexpectedly shift around a webpage\u2019s layout. Have you ever been on a webpage, reading the article in front of you, and the text suddenly moves to a different area of the page? Or maybe you were about to click a button, but just as you do, it moves, and you click on a different link?<\/p>\n
Instances like these are where a website\u2019s CLS is faltering. Elements that can shift and dance around the page include images, videos, fonts, buttons, contact forms, and other types of content. Below is Google\u2019s description<\/a> of this Core Web Vital:<\/p>\n CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.<\/em><\/p><\/blockquote>\n If your website is suffering from a poor CLS score, it\u2019s essential you improve this aspect \u2013 otherwise your visitors are going to be left with a poor user experience.<\/p>\n As you would expect, CLS has the ability to significantly impact user experience. Simply having an element shift on a button can cause someone to click on the wrong link, sending them to the wrong webpage, and leading to a lot of unnecessary hassle on their end. It might not seem like much overall, but this frustration can seriously hamper their experience while on your site.<\/p>\n In this day and age, users don\u2019t expect to wait around for a webpage to load and for all the elements to fall into the right place. They expect instant results. As a result, if your pages fail to achieve a high-quality CLS score, with elements shifting around before settling down, this will upset your visitors \u2013 and Google.<\/p>\n No guessing is required to know what a good CLS score entails. Below is a summary of Google\u2019s guidelines for CLS score:<\/p>\n Note, you can use our\u00a0 Core Web Vitals Checker <\/a>tool to measure your website’s CLS score.<\/p>\n Below is how Google<\/a> explains the calculation behind the CLS score:<\/p>\n To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction (both defined below): <\/em>layout shift score = impact fraction * distance fraction<\/em><\/p><\/blockquote>\n A \u201cgood\u201d CLS score is the aim \u2013 with Google recommending you keep it below 0.1. It is possible to achieve a CLS score of 0 with pages that are fully static. If layout shifts are required, the score will naturally go up.<\/p>\n A \u201cneeds improvement\u201d score is a solid sign you can ultimately reach the \u201cgood\u201d grade, which is necessary for ultimately achieving Google\u2019s approval. If your score is \u201cpoor\u201d, however, and your CLS is over 0.25, you\u2019ll need to take the necessary steps to improve your page\u2019s layout shift \u2013 more on that below.<\/p>\n <\/p>\n As mentioned above, the following formula is used to measure CLS:<\/p>\n layout shift score = impact fraction * distance fraction<\/em><\/p>\n Let\u2019s take a closer look at the 2 factors which come into play for CLS.<\/p>\n For the impact fraction to be calculated, it is first necessary for the impact region to be calculated.<\/p>\n The impact region is the general area that layout shift affects. Google identifies each element that is impacted, combining the original area with its layout shifted counterpart, and ultimately distinguishing the impact region.<\/p>\n A rectangle is the typical shape of the impact region. However, the shape can be more complex if you use multiple layout shifts that are both vertical and horizontal.<\/p>\n Going back to the impact fraction, this is calculated with the following formula:<\/p>\n area of impact region \/ area of viewport = impact fraction<\/em><\/p>\n For clarification, the viewport represents the visible part of the page on the screen that doesn\u2019t require any scrolling down.<\/p>\n The first release of CLS only included the aforementioned impact fraction. Yet Google realized this single CLS calculation had a flaw: big movements are more disconcerting than small ones, and big elements may only make a slight movement as part of impact fraction.<\/p>\n The result: the creation of distance fraction.<\/p>\n For the distance fraction to be calculated, it\u2019s necessary to first work out the move distance.<\/p>\n As for what the move distance is, this measures the layout shift\u2019s distance before and after the act. Essentially, it supplies the answer to how much an element moved after it shifted.<\/p>\n The following calculation is how distance fraction is worked out:<\/p>\n max move distance \/ viewport height = distance fraction<\/em><\/p>\n You know what CLS is, what a good score is, and how this element is calculated. Now you might want an answer to the following question: How to improve my CLS Web Core Vital successfully?<\/p>\n The good news is that, if you need to fix Core Web Vitals, there are various steps you can take. This is also the case with CLS. With that in mind, here are a few important steps to improve your CLS score if required:<\/p>\n Dimensions, aka height and width elements, can help when it comes to your images and videos. While height\/width elements used to be commonplace when this media was incorporated back in the day, the introduction of responsive web design changed up how images and videos were added to a website.<\/p>\n However, this approach has caused a problem with CLS: it causes unnecessary shifts due to the media having a dynamic approach, rather than a fixed one. If you include height and width attributes to your images\/videos, this can prevent them from unnecessarily bouncing around the page.<\/p>\n It is highly recommended you avoid including content on top of any existing content on a webpage. The only reason for this to occur is if it\u2019s done as a response to a user\u2019s interactions.<\/p>\n <\/p>\n When you avoid this situation, it ensures that any layout shifts made only happen when expected.<\/p>\n Did you know that if you use downloaded web fonts, this can cause Flash of Invisible Text? For the uninitiated, FOIT can lead to blank space appearing before the downloaded font is displayed. Simply put, this isn\u2019t good for your efforts to lower the impact of CLS.<\/p>\n Fortunately, it\u2019s not too difficult to change the situation with web-based fonts. In the link used for the web font download, simply add a <link rel=preload> to preload the font files and download them as a priority asset.<\/p>\n With Google introducing the Core Web Vitals, and with user expectation in mind, it has never been more important for your website to function seamlessly. As for CLS, if you\u2019ve got elements like text and images veering across the page before settling down, this creates a poor first impression. Not only will it displease users, but also the search engine giant \u2013 particularly with these new parameters in place.<\/p>\n In our informed opinion, any SEO auditing<\/a> process should check Core Web Vitals in this day and age. However, what type of impact does CLS have on your site\u2019s SEO ranking?<\/p>\n At this formative stage for Core Web Vitals and page experience, the impact is not clear. Certain data points to it having a minimal effect, while other data suggests it can cause a significant shift in a site\u2019s search ranking.<\/p>\n What we do know, however, is you need to begin to take CLS seriously right now if you haven\u2019t done so already. The signs point to Core Web Vitals playing a greater role in the near future, which means your site needs to be prepared. It\u2019s not just about SEO, either. You want to deliver the best user experience for your site visitors and lowering layout shift is one small \u2013 yet valuable \u2013 way of accomplishing that goal.<\/p>\n CLS is already important, but this is only the start. Its importance is only going to grow from an SEO point of view \u2013 and you need to factor it into your plans as soon as possible. Are you intimidated by the technical side of CLS? If so, our managed SEO<\/a> service can remove these worries, and our marketing experts can put together a full-service plan that covers all of the Core Web Vitals.<\/p>\n For an assortment of free resources, including in-depth guides like this one about the other Core Web Vitals, make sure you use our Knowledge Hub.<\/a><\/p>\nHow does CLS impact user experience?<\/h2>\n
What is a good CLS score?<\/h2>\n
\n
![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/05\/Blog-graphics-9-300x169.png\")
<\/p>\n![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/05\/Blog-graphics-10-e1653310895706-300x89.png\")
<\/p>\nHow is CLS measured?<\/h2>\n
Impact fraction<\/h3>\n
Distance fraction<\/h3>\n
How can CLS be improved?<\/h2>\n
Add dimensions for images and videos<\/h3>\n
Avoid adding content on top of existing content<\/h3>\n
A caution with web-based fonts<\/h3>\n
How does CLS impact SEO?<\/h2>\n
In conclusion<\/h2>\n
![\"New](\"https:\/\/no-cache.hubspot.com\/cta\/default\/4203198\/9eb0ac7f-9041-40db-a6df-e7ba5b92cf53.png\")
<\/a><\/span>