To find the Cumulative Layout Shift (CLS) score for your website in Google Chrome, you can use the following steps:
- Open the website in Google Chrome.
- Press F12 to open the Chrome DevTools.
- Click on the “Performance” tab.
- Click the “Record” button to begin recording the performance of the page.
- Interact with the page to trigger any layout shifts that may occur.
- When you’re done, click the “Stop” button to stop recording.
Once the recording is complete, the Performance panel will show a summary of the page’s performance, including the CLS score. The CLS score is displayed as a decimal number, with a lower score indicating better performance.
You can also use the Lighthouse tool to get a CLS score for your website. To do this, follow these steps:
- Open the Lighthouse tool in Chrome by going to the URL “chrome://lighthouse”.
- Enter the URL of the website that you want to test in the “URL” field.
- Click the “Generate report” button.
- Wait for the report to generate.
- When the report is complete, click on the “Opportunities” tab.
- Scroll down to the “Diagnostics” section and look for the “Cumulative Layout Shift” row. The CLS score will be displayed in the “Value” column.
You can also use third-party tools or services to monitor the CLS score of your website over time and get alerts when the score exceeds a certain threshold.