Have you ever happened to be reading an article online and suddenly something changes on the page without you clicking on anything? Or, be about to click on a link that moves, totally unexpectedly, and you end up clicking something else?
We're your Core Web Vitals Developers!
We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..
This has to do with the stability of the page and, for the most part, these types of experiences are just annoying. However, it is important to be aware, as these changes can cause real damage in some cases.
To monitor events like this on your website, there is the Cumulative Layout Shift (CLS). It is a user-centric metric and serves to measure the visual stability of a page. CLS also helps to quantify how often users experience unexpected layout changes.
A good CLS score helps to ensure that the page is pleasant.
Cumulative Layout Shift is metric of Core Web Vitals. Don’t know about Core Web Vitals? Read our detailed article on Core Web Vitals.
What are Core Web Vitals?
Core Web Vitals is a set of metrics related to Speed, Interactivity, and Visual Stability.
Google has defined the following as Core Web Vitals:
- Largest Content Paint (LCP). The amount of time it takes to load the main content of the page. The ideal LCP should occur within 2.4 seconds of the time the page first starts loading.
- First Input Delay (FID). The amount of time it takes for the page to become interactive. A perfect measurement is less than 100 milliseconds.
- Cumulative Layout Shift (CLS). The amount of unexpected layout shifting of visual page content. That’s the ideal Cumulative Layout Shift score is less than or equal to 0.1.
This set of metrics is designed to help us measure the user experience in terms of page load speed, interactivity, and visual stability. Site owners and SEO experts can focus on these metrics to provide a better user experience and improve SEO.
Will it Affect the Ranking?
Yes. If Google determines that a page provides a high-quality user experience based on signals of its page experience, the page will likely rank higher in search engines.
However, content relevance is still an important factor when it comes to ranking. Pages with content highly relevant to the query can rank well even if they have low page experience signals.
Ideally, this should accomplish both: provide highly relevant content and signal high page experience.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (LS) is a layout shift while the page is loading. For example, when we open a page and are engrossed in reading the text suddenly shifts or the image shifts down or up without being asked. Pretty annoying, right?
In some cases This can be very annoying, for example, we accidentally click on an ad or a link to an unwanted place.
This layout shift can be the result of images, text/fonts, videos, and other web elements that are not fully loaded. Google thinks this could break the Page Experience.
Whereas CLS is the accumulated result of LS, meaning that each element that causes a layout shift that occurs is calculated accumulatively and represented as a total number.
What would be a Good CLS Score?
The lower your score on this metric, the more stable your layout will be and the better the experience offered to the user.
To provide a satisfactory user experience, it is recommended that sites have a CLS score of less than 0.1.
Things That Can Improve Cumulative Layout Shifts:
- Dimensional images
- Dimensional ads, embeds, and iframes
- Dynamically injected content
- Web fonts cause FOIT / FOUT
- The act of waiting for a network response before updating the DOM
How Does Google Calculate CLS?
As we have already seen, the CLS is the sum of all the movements of a page layout that are not the result of user interaction.
The bots Google come to this metric by an equation that relates the ratio of the display window impacted by these layout changes, and the distance that these elements are moved.
What Could be Causing my Pages to be Visually Unstable?
The visual instability of a website is most commonly related to problems with scaling elements such as images, GIFs, and other content on the page, as well as the poor implementation of ad formats in advertising spaces.
The most common reasons of a poor CLS score are:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
Why do these Unexpected Movements Happen?
These unexpected movements of the page content usually occur because the page elements are loaded asynchronously, or are added dynamically on the pages above the content that already exists.
The causes can be from a source with strange behavior, which ends up being loaded higher than normal, or third-party ads, which dynamically resize, overlapping the other elements of the page.
So, so that this problem does not go unnoticed by the website development team, it is important to make use of the CLS metric. By measuring the frequency of this situation, it is possible to resolve it quickly, preventing this from happening to real users.
How to improve CLS?
Now it’s time to know how to improve CLS? For most sites, it is possible to improve CLS score and avoid unexpected layout changes by following some steps.
Below, we have mentioned 5 ways to improve Cumulative Layout Shift (CLS) score score significantly.
1. Add Dimensions for Image and Video Elements
In general, Layout Shift occurs due to a shift in the layout caused by the image that is not declared in height and width. When rendering the page, the browser will wait until the image is fully loaded then the browser knows the dimensions of the image.
The solution is to apply the height and width of the image from the start of the page loading, this will eliminate shifting of the content layout underneath.
An example of declaring the height and width of an image if the image on the page is 1200 pixels x 600 pixels wide:
<img src="food.png" alt="food" style="width:1200px;height:600px;">It is important to remember, the specified image size in HTML documents is pixels (px). So, even if you don’t specify the units in the Width and Height attributes, the browser will still display the image in pixels.
Always include size attributes on images and video elements, or provide the necessary space with a CSS aspect ratio box. This is to ensure that the browser can allocate the correct amount of space in the page while the image is loading.
2. Reduce Image Size
Normally, images represent the majority of bytes transferred on a website page, in addition to occupying a large visual space. Therefore, they can directly impact the load time of the site.
So, for there to be problems due to loading and the like, it is very important that the images have the correct size, according to the space they occupy on their respective pages. When inserting them, you must always treat them properly for display on the web.
3. Web fonts causing FOUT/FOIT
Web fonts can cause unexpected layout shifts. There are two types of layout shifts that can happen:
- FOUT (Flash Of Unstyled Text): is the amount of time the text is invisible before the browser downloads a font from the web.
- FOIT (Flash Of Invisible Text): is the length of time that the text is rendered in a fallback font before the browser has downloaded a web font.
Preload your font files and optimize your upload strategy for maximum speed and minimum FOUT.
Here’s how to Preload font files to Improve CLS:
To minimize the FOIT/FOUT period, we want to load our source files from the web as soon as possible. Using <link rel=”preload”> in our HTML <head>.
We can tell the browser to start searching for our sources sooner. Add the following tag at the top of your <head> (before any CSS), setting the href attribute to the URL of your source file:
<link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin>By adding this tag, we are telling the browser to start loading our font file immediately, whereas it would normally not start until a reference to the specific font was found in your CSS and found a gift element that uses it.
Browsers are often smart enough to download fonts only if they are needed on the current page. Usage preload replaces this behavior, forcing the browser to download a font, even if it is not used. For this reason, always preload a single format for each source (woff2 if you have one).
4. Dynamically Injected Content
Dynamic content or Adaptive Content refers to website content that is always changing. Therefore, this content is called ‘dynamic’. This ensures any layout shifts that occur are expected.
Content changes will always be based on the behavior, preferences, and needs of site users.
However, dynamic content is not only found on a website, you can also find examples in email marketing strategies.
This happens because of Popups and banners that shift the rest of the page’s content:
- Email Pop-ups/ Pop-ups for offers and deals
- GDPR Notice
- Text and display ads
If it’s necessary for you to use Dynamic Content, reserve enough space in advance according to the size of that Dynamic Content in the viewport. So that when it loads, it does not cause Cumulative Layout Shift.
5. Resource Preloading (Javascript, CSS, and so on)
The loading time of a page is defined by several factors, including the resources requested by browsers, such as JavaScript, CSS, and the like. They are usually ordered in a queue, almost one by one.
By performing this preload adjustment, we were able to make the browser request some resources at the same time and, thus, it will process the resource together with other elements critical to the page load.
6. Serve Next gen Images
Next-gen images usually have a smaller file size than PNG and JPG. That’s why Google recommends serving the next-gen format.
WebP is an image format that has superior quality and compression characteristics compared to its older counterparts: JPEG and PNG.
Encoding the images in the WebP format means that they will load faster and consume less mobile data, which results in satisfactory performance of the site, including on mobile.
Best Plugin to Improve CLS/Core Web Vitals
In my opinion, improving Cumulative Layout Shift (CLS) is one of the easiest tasks in optimizing your website for Core Web Vitals. But with this free Core Web Vitals plugin, make it happen in a few clicks.
Core Web Vitals & PageSpeed Booster plugin, developed by Magazine3, is the best plugin to improve your CLS score and even your overall CWV score.
Core Web Vitals & PageSpeed Booster Plugin
This plugin has decent features and options to optimize your website for CWV. Plugin developers continuously update this plugin to make it more effective and up to date with the WordPress version.
Here are some great features of this plugin:
- Webp images: Page speed insight shows us an error in the opportunity section while checking the page speed of our website, that is ” Serv next-gen images”. From the next-gen image formats, Webp is one of the low-weight formats. With the help of this feature, you can convert your website’s image formats to Webp format in clicks.
- Lazy Load: Lazy loading can make your website fast effectively and improves website performance. With this feature, you can implement lazy loading to your images and videos.
- Minification: Website loading time totally on your website or page size. With the minification feature, you can reduce website file size easily. Minification removes white spaces, lines, and unnecessary characters from the source code.
- Remove Unused CSS: Unused CSS code or files can be found in your theme and plugin database. Removing this unused CSS from any website can significantly improve website performance and page speed.
- Google Fonts Optimizations: Everyone uses Google fonts to make their website more beautiful. But using Google fonts affects your website speed and core web vitals. With this google fonts optimization feature, you can optimize and load google fonts locally.
- Delay JavaScript Execution: What if your website loads only necessary things or the user needs it? With this feature, you can delay JavaScript based on user interaction. When the user scrolls down and is about to interact with your website, it will load javascript at that time.
- Cache: We have to say that Caching is one of the important parts of optimizing your website for speed and core web vitals. So this plugin also has this cache feature that makes it more useful.
One of the best thing about this plugin is that it is free to use and have active development.
Conclusion!
We have discussed many effective ways like to improve Cumulative Layout Shift (CLS).
Cumulative Layout Shift is a factor of Core Web Vitals if you need help with this, the team here at WebVitalsDev is more than happy to help you. You can either drop us a message through the email or contact form.
We have a development team that fixes CWV (Core Web Vitals) errors for our clients. So drop us a message or see our Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you.
If you enjoyed this article, Don’t forget to share!
