Monitoring online presence and making data driven decisions in business is at the core of Search Engine Optimisation, SEO.
Stay ahead of the competition and utilise on Google’s Data driven core web vitals. Cumulative layout shift, CLS is one of the core web vitals that is coming into effect in 2021. Is your website optimised for CLS?
If you are on top of your game then you do understand the term CLS. If not, here is your chance to get a good understanding of this metric before you completely get outranked in search engine results pages and lose web traffic.
Have you ever experienced reading an online article, then suddenly an ad or a message or social icon moves on to the exact point that you were on? This unexpected or sudden movement on the page is an example of cumulative layout shift.
Most web users find it disturbing and a cause for bad user experience. Consequently it has become an element that needs to be dealt with in order to offer a positive user experience and as such a ranking factor in Google’s search rankings.
Cumulative Layout Shift (CLS)
Sudden movement usually happens when resources are loading. Elements such as fonts, images, videos, or even your contact forms lead to shifting.
This could be as a result of how your site functions or your third-party content does not work as it is assigned. Google stated that there are several reasons why this happens.
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUS
- Action waiting for a network response before updating DOM
Height and width dimensions are indicated in the HTML when using images and videos. You can use AspectRatioCalculator.com to check the ratios.
Cumulative Layout Shift scoring
Cumulative Layout Shift measures the total sum of all unique layout shifts that suddenly change throughout the website’s lifespan.
What is a good score?
CLS scoring starts from 0 to 0.25. The lower the score you get the more stable your layout is. A website needs to hit a score of 0.1 or below to provide a better user experience.
Layout shift happens any time when an element changes its position from another frame to the next. It is the result of two movements of impact fraction and distance fraction.
layout shift score = impact fraction * distance fraction
Impact Fraction measures how unstable an element is and affects the viewport space between frames. In the image below, you can see that it occupies the upper half of the viewport.
The image on the right shows the element change to 25% of the viewport height. The red rectangular trace symbolizes the combination of elements visible in a single frame.
The sum of the viewport is 75%. Its impact fraction is 0.75.
The distance fraction is the distance of the unstable elements moved either vertically or horizontally, split by the dimension (either width or height).
In this example, the unstable element moved vertically, affecting the height in the viewport. It fills 25% of the area of the frame, making the distance fraction 0.25.
Therefore, the impact fraction is 0.75, and the distance fracture is 0.25, so the layout score for the example is 0.75 * 0.25 = 0.1875.
How this affects your SEO campaign?
As mentioned, Google aims to give the best user experience for visitors. If people get annoyed and get irritated with ads and sudden screen pop ups, they will eventually leave the site.
High CLS Score will result in high bounce rates which is a clear indicator of irrelevant content and bad user experience.
Poor CLS will considerably slow the progress of your ranking if not adhered to. This problem needs to be fixed to avoid negative consequences.
In May 2020, Google launched an update regarding Page Experience indicating the addition of CLS as a contributor to SERP ranking factor.
Guide and checklist to improve your CLS
Here is what you need to implement as guidelines to improve your CLS.
- Do not forget to include pre allocated space for the late loading of your iframes, images or video elements attributes such as size and dimension. It ensures that the browser designates the right amount of space while the image is loading.
It is advisable to do a quick audit on general height or dimension for different elements, in order to cater for the unpredictable third party content
- Do not insert content above the existing content. In this way, you can avoid or lessen any unexpected layout shift.
- Select transform animation. It is to lessen the chance of layout shift upon loading. Animated transitions provide context and flow from one to another.
- Use font: display values like swap, auto, block, or optional. Also, preload your font before changing it to check if it will affect your scoring.
- Page speed. Optimize your page speed as it affects the responsiveness and scoring of your site’s CLS.
- Reassess and change the order that elements load on your page so that the main and most important content does not shift.
As Google launches updates to support their goal, we need to adapt and make changes accordingly. CLS will change website metrics eventually.
Strive to provide a great positive experience for your website users and get ranked high in SERPs.