Being a business owner, developer or website owner, you understand the situation when the website is not user friendly and fast. It will cause a detrimental condition for the business. Right? Highlighting the same performance issue, we have content shifts while surfing the Internet, reading the article, placing an order or filling forms. And you’ve lost your place. These kinds of experiences are just annoying and can cause severe damage. So, to measure all such issues new matric called Cumulative Layout Shift (CLS) has been introduced.
Cumulative Layout Shift (CLS) is an important metric for gauging unexpected layout shifts during the loading of the webpage until the lifecycle —a low CLS ensures that the page is delightful.
Cause of Cumulative Layout Shift (CLS)
The unexpected layout shifts during the movement of the page can be occurred due to the image or video with unknown dimensions, a font that renders larger or smaller or a third-party ad or widget that dynamically resizes itself. Because all these resources are loaded asynchronously and dynamically added to the page above existing content.
Why CLS measure important?
The Cumulative Layout Shift (CLS) metric measure how often unexpected layout shifts occurring for real users. Thus, the developer can improve the website and prevent those users who end up clicking the wrong elements or losing their reading position.
The poor navigation or performance of the website not causing frustration, it also lower engagement rates, higher bounce rates and ultimately lost business.
So far, it is hard to measure unexpected layout shifts and how it affects the site. Now thanks to Cumulative Layout Shift (CLS)– a new matric that helps in getting the exact idea of how many times the unexpected layout shifts encountered.
Now talking about accelerated mobile pages (AMP), AMP mitigates these content shifts, and create user-friendly experiences for the user. As per the design principles of AMP and its components, it is impossible that layout shifts occur.
How to Calculate Layout Shifts in AMP Pages:
In HTML pages you can measure CLS by executing a snippet of JS code. Let’s see in AMP pages:
- CLS Calculator tool: This tool help you with exact count of unexpected layout shifts. All you need to input a URL and run “Get CLS”.
- Lighthouse (currently in beta): This is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more.
How to check the report in Lighthouse:
1. Open the command line tool.
2. Run: npm install -g lighthouse@next to install the cli tool.
3. Run: lighthouse https://abc.com (your website URL) to generate a report.
This will generate an HTML file in the current directory. Then open the file in the browser shows the CLS score.
Webpagetest: This tool is popular for checking the website speed using real browsers at consumer connection speeds and give a report of detailed optimization recommendations. Now to calculate CLS metric follow below steps:
1. Go to https://www.webpagetest.org/
2. Enter https://abc.com (your website URL) as URL.
3. Click “Start Test”.
4. Now in result, click on “View JSON result” in the top left corner: JSON file will display with the results of the test.
5. Now search “CumulativeLayoutShift”, and check the value.
For the latest tech news follow techcresendo on Twitter, Facebook, and LinkedIn
.){kind=link}