Other than a bad deign, there are also other factors that would affect a user’s browsing experience on any webpage and perhaps drive them away. One such factor is the cumulative layout shift (CLS).
WHAT IS GOOGLE’S CUMULATIVE LAYOUT SHIFT?
A website is made attractive and functional using a great design so that any visitor would want to browse the website for longer and with ease.
Other than a bad deign, there are also other factors that would affect a user’s browsing experience on any webpage and perhaps drive them away. One such factor is the cumulative layout shift (CLS).
Cumulative layout shift is the sudden shift of webpage layout while a user is on the webpage. Even though CLS is not caused by user interaction with the website in any way, it surely does cause the user to lose patience.
The user may really want to click one particular button but may end up clicking another button due to the element having shifted on the webpage. It takes patience to even wait for images to load in an email that you receive – you can imagine how annoying it would be if the same happens on a webpage!
Currently, CLS is only considered with respect to user experience and is a Core Web Vitals metric. Google will even consider CLS for ranking your website – in fact it will be one of the main ranking factors for Google’s algorithm – supposedly starting sometime in 2021. When you have great SEO-friendly content, you don’t want to take chances of a bad CLS score to ruin your chances of a higher search engine results page (SERP) ranking. While this does not affect any adverts that you have paid for, it definitely affects showing up in organic results. Organic results have always had played better on the front of the trust factor of users.
There are certain elements that cause cumulative layout shift:
- Web fonts (which causes delay in loading)
- Images (when dimensions are not specified)
- Adverts (again when dimensions are not specified – this is one of the major factors that causes CLS)
The main way to minimise cumulative layout shift is to first measure it. Thankfully, there are ways to measure CLS and optimize it before it becomes a bigger issue for your website. A good user experience is provided by web pages with a CLS score of less than 0.1.
Two ways to measure cumulative layout shift are:
Impact fraction
It is calculated using the impact area or impact region (includes both horizontal and vertical shifts).
Impact fraction is calculated as follows:
Area of impact/area of the page
Distance fraction
This is the distance that an element on a page has shifted (from when it is rendered first vs. its final spot on the webpage). This impacts the overall look of the webpage.
Distance fraction is calculated as follows:
Distance moved/height of the page
We hope that this blog helps you find and minimize cumulative layout shift for your webpage. GSS Webtech has an experience of many years in providing IT solutions with happy clients all over the world. Contact us for consultation!
