Chrome's Web Vitals overlay is an experimental feature in Chrome DevTools that overlay core Web Vitals metrics in real time while browsing web pages. 1. It displays three key performance indicators, LCP, FID and CLS, reflecting page loading speed, interaction response speed and visual stability respectively; 2. The opening method is to enter the Rendering panel through DevTools and enable relevant options; 3. In terms of data interpretation, the ideal LCP value is less than 2.5 seconds, the FID is less than 100 milliseconds, and the CLS is less than 0.1; 4. In actual use, you can optimize image loading and script execution for LCP, set image size and font loading strategies for CLS, and optimize JS execution efficiency for FID; 5. After use, it is recommended to turn off overlay to avoid affecting the test results, and conduct in-depth analysis with other tools.

Chrome's Web Vitals overlay is a very practical debugging tool that helps you view key performance metrics in real time while browsing the web. If you are a developer or website optimization related person, this function can help you quickly discover problem pages. Below are some specific usage methods and suggestions.

What is Web Vitals overlay?

Web Vitals overlay is an experimental feature in Chrome DevTools. It can directly overlay core Web Vitals metrics on the page when you browse the web page: LCP (maximum content drawing), CLS (accumulative layout offset) and FID (first input delay) when you browse the web page. These metrics reflect key aspects of user experience.

Opening method:

• Open Chrome browser
• Right-click on the page and select "Check" to open DevTools
• Click the three dots in the upper right corner → More tools → Rendering
• Find the options under "Performance" in the Rendering panel, and check "Paint flashing" and "Layout shift regions"
• Return to the main page, and after refreshing, you can see the performance marks on the page

How to interpret the data displayed by Web Vitals overlay?

When enabled, a small panel will appear in the upper right corner of the page, which will continuously update the core Web Vitals data of the current page. The specific meanings are as follows:

• LCP (maximum content drawing) : represents the speed at which the main content of the page is loaded. The lower the value, the better. The ideal value is less than 2.5 seconds.
• FID (first input delay) : reflects the response speed of the user when interacting with the page for the first time. The ideal value is less than 100 milliseconds.
• CLS (accumulative layout offset) : measures the visual stability of the page. The smaller the value, the better. The ideal value is less than 0.1.

These values ??are not final values, but are constantly changing during the page operation. You can observe the changes in the numerical value while operating the page and find out specific actions or resource loading issues that cause the experience to become worse.

Actual usage scenarios and optimization suggestions

Page loading slow? See when LCP triggers

When the LCP value is too high, it means that the main content of the page is loading slowly. Common reasons include large images not compressed, slow font loading, and long JS execution time. You can try the following methods to optimize:

• Use loading="lazy" to delay loading pictures
• Reduce the volume of JS files on the first screen
• Images using WebP format

The page is beating severely? Pay attention to changes in CLS

If the CLS value keeps rising, it means that there is a problem with layout jitter on the page. Usually it is because there is no space reserved for pictures or advertisements, and the font switching causes reordering. suggestion:

• Set width and height attributes for the picture
• Use font-display: swap to control font loading behavior
• Avoid recalculation of layout after inserting DOM

User interaction is stuttering? Pay attention to the performance of FID

FID represents the response delay of the user's first click of buttons, input boxes, etc. If this value is high, it may be that the main thread is occupied by a large amount of JS. Consider:

• Split JS scripts and delay loading non-essential scripts
• Use Web Worker to handle complex operations
• Avoid long tasks blocking the main thread

Tips: Don't forget to turn off overlay

Although Web Vitals overlay is convenient, it will also have a certain impact on page performance. Therefore, it is best to confirm whether other debugging tools are turned off and re-measure in a clean environment before formal testing or sharing results.

In addition, overlay does not record complete performance data, but only provides an intuitive reference. For in-depth analysis, it is recommended to combine Lighthouse or Performance panels for a more comprehensive evaluation.

Basically that's it. This function is not complicated but is easy to ignore. It is suitable for quickly judging the health status of the page in daily development and debugging.

The above is the detailed content of How to use Chrome's 'Web Vitals' overlay. For more information, please follow other related articles on the PHP Chinese website!