How do I find my CLS score in Chrome?

To find the Cumulative Layout Shift (CLS) score for your website in Google Chrome, you can use the following steps:

  1. Open the website in Google Chrome.
  2. Press F12 to open the Chrome DevTools.
  3. Click on the “Performance” tab.
  4. Click the “Record” button to begin recording the performance of the page.
  5. Interact with the page to trigger any layout shifts that may occur.
  6. 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:

  1. Open the Lighthouse tool in Chrome by going to the URL “chrome://lighthouse”.
  2. Enter the URL of the website that you want to test in the “URL” field.
  3. Click the “Generate report” button.
  4. Wait for the report to generate.
  5. When the report is complete, click on the “Opportunities” tab.
  6. 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.

Related Questions