Local metrics are the new addition to the performance panel in Chrome DevTools. They provide real-time data on the performance of your website, enabling you to monitor and analyze the website's performance metrics as you interact with it. This feature is really useful for developers who want to understand how their website performs in real-world scenarios and identify performance bottlenecks quickly.

Local metrics also known as live metrics, include the following key performance indicators:

• LCP (Largest Contentful Paint)
• CLS (Cumulative Layout Shift)
• INP (Interaction to next paint)

What's the advantage of using local metrics?

Local metrics provide real-time data on the website's performance, allowing you to monitor the performance metrics as you interact with the website. This avoids the need to deploy the website to a staging environment or use third-party tools to analyze the performance metrics. This also helps to catch performance issues early in the development process.

Let's understand each section in the local metrics panel

LCP (Largest Contentful Paint)

The Largest Contentful Paint (LCP) metric measures the time taken for the largest content element to render on the screen. It is an important metric as it indicates when the main content of the page is visible to the user. A good LCP score is usually less than 2.5 seconds.

The LCP panel shows the following data:

• LCP value: The time taken for the largest content element to render on the screen.
• Element: The largest content element on the page. Here in the example, it is an image.

CLS (Cumulative Layout Shift)

The Cumulative Layout Shift (CLS) metric measures the visual stability of the page. It quantifies how much the elements on the page shift around during the loading process. A good CLS score is usually less than 0.1.

The CLS panel shows the following data:

• CLS value: The cumulative layout shift value.
• Worst shifts: The elements that caused the maximum layout shift.

You can click on the "Shifts" link to see the detailed information about the layout shifts on the page.
These values are "Live" and will update as you interact with the page.

INP (Interaction to next paint)

The INP is a new metric introduced in Chrome DevTools that measures the time taken for the first interaction to the next paint. It helps you understand how quickly the page responds to user interactions. A good INP score is usually less than 100 milliseconds. This helps to identify slow interactions and optimize them for better performance.

You can see in the previous images that the INP value is blank. This is because the INP value is calcualted only when there is an interaction on the page. You can interact with the page and see the INP value update in real-time.

In the above screenshot, the INP value got updated as soon as I clicked on the search field. The INP metric shows the value in milliseconds and the element that was interacted with. Here the interaction was a click event, hence the event type is "pointer".

The green color indicates that the INP score so far is good. If the score is bad, it will be highlighted in red. There is also orange color which indicates that the score is moderate.

INP value is also live and will update as you interact with the page. Here you can see that the INP tag is pointing to the largest value.

Field data

Field data is another important section in the local metrics panel. It provides real-world data on the performance of your website. Field data is collected from real users who visit your website. This data helps you understand how your website performs in the real world and identify performance bottlenecks that need to be addressed.

When this is enabled, you can see the field data for the performance metrics like LCP, CLS, and INP. This helps you compare the lab data with the field data and identify any discrepancies.

Here you can see that the field data reports the 75th percentile value for the performance metrics. In this example, the values are collected for "Desktop" users. However, you can change the device type to "Mobile" to see the field data for mobile users.

Environment Settings

Environment settings allow you to simulate different network conditions and CPU throttling. This helps you understand how your website performs under different network conditions and device capabilities. You can choose between different network profiles like "Offline", "3G", "Slow 4G", and "Fast 4G". You can also throttle the CPU to simulate different device capabilities.

Why this is important?

Most of the time, we test the website in a controlled environment with a stable network connection and high-end devices. However, in the real world, users may have different network conditions and devices. By simulating different network conditions and CPU throttling, you can understand how your website performs in the real world and optimize it for better performance.

Finding slow interactions

First use the INP to flag the interactions that are slow. This will be highlighted in either red or orange. Once you identify the slow interactions, use the record feature in the performance panel to record the interactions and analyze the performance bottlenecks.

While recording, you repeat the same interactions that were slow and reported by INP. Now, you can pin-point the exact performance bottlenecks that are causing the slow interactions. You can analyze the performance bottlenecks using the flame chart, network panel, and other performance tools in Chrome DevTools.

Let's see what the recording unfolds:

You can also click on the "INP by phase" link to see the breakdown of the INP metric. This will help you understand which phase of the interaction is slow and needs optimization. With this, you can spot if the interaction is slow due to JavaScript execution, rendering, or any other performance bottlenecks.

A Final look at the Flame chart

Here when expanding the flame chart, you can see the detailed breakdown of the performance bottlenecks. You can see the time taken for each task and identify the bottlenecks that are causing the slow interactions. This will help you optimize the performance bottlenecks and improve the overall performance of the website.

Summary

Local metrics are a powerful tool that provides real-time data on the performance of your website. It helps you monitor the performance metrics as you interact with the website and identify performance bottlenecks quickly. By using local metrics, you can optimize the performance of your website and provide a better user experience to your visitors.