Core Web Vitals: A Guide to Google's Web Performance Metrics

Understanding Google's Core Web Vitals and its promotion methods

Core points:

• Core Web Vitals is a key performance metric used by Google to measure real user experience, aiming to simplify performance evaluation and help website owners and developers focus on the most important improvements. These three metrics are: Maximum Content Drawing (LCP), First Input Latency (FID), and Cumulative Layout Offset (CLS), respectively, which evaluate loading speed, interactivity, and visual stability.
• LCP Measures loading performance and reports the rendering time of the largest image or text block visible in the viewport. FID Measuring response speed, recording the time between the user interacting with the page and the browser starts processing event handlers. CLS Measuring visual stability and evaluating unexpected content movements—usually when the DOM changes after the image above the ad or the current scroll position is loaded.
• Improving core web metrics requires optimizing aspects of the website, such as optimizing images, leveraging browser caches, minimizing render blocking resources, and prioritizing critical rendering paths. Google will provide specific recommendations based on performance reports for your website. Websites that value these metrics tend to have faster load times, better interactivity and a more stable visual experience, which improves user satisfaction and possibly improves search engine rankings.

Google wants users to have a good web experience, so websites that rank higher in search results also load faster. Of course, this is a big simplification, but assuming you are comparing two sites with similar content and audiences, the faster loading websites should rank higher in the results. However, Google’s method of measuring this metric has always been somewhat elusive, so it introduces core web metrics to provide website owners and developers with some much-needed clarity. Unfortunately, "performance" is a general term covering dozens of metrics...

First byte time, start rendering, CPU usage, JavaScript heap size, first content drawing, first meaningful drawing, first time CPU idle, DOM loading, page full loading, interaction time, style recalculating per second

, and so on. Different tools return different result sets, and it is difficult to know where to start.

Google's web metrics program is designed to simplify performance evaluation and help you focus on the most important improvements. Core web metrics are key performance metrics that reflect real-world user experience. Some metrics are reported by the Lighthouse panel, PageSpeed ​​Insights, and Google Search Console in Chrome DevTools.

web-vitals JavaScript library can help measure more realistic metrics from real users visiting your website. Results can be published to Google Analytics or other endpoints for further analysis.

Google recommends using the 75th percentile, which is to record multiple results for the same metric, sort in order from best to worst, and then analyze the values ​​of three quarters. Therefore, three-quarters of website visitors will experience this level of performance.

The current core web metrics are maximum content drawing, first input delay, and cumulative layout offset, which evaluate loading, interactivity, and visual stability, respectively.

Maximum Content Drawing (LCP)

LCP measures loading performance—Speed ​​speed of content display.

Historical metrics such as page loading and DOMContentLoaded have always been problematic in this regard, because they do not always reflect the user experience. For example, the spoiler can appear almost immediately, but it may take longer to appear that it is loaded with a further Ajax request.

Maximum Content Drawing (LCP) Reports the rendering time of the largest image or text block visible in the viewport. Times less than 2.5 seconds are considered good, while times more than 4.0 seconds are considered bad.

The types of elements considered in LCP include:

• <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics"> <p>Logos and menus do not move – they are stable elements. The ad is added to the DOM and its starting position does not change, so it is also stable. However, the hero image will move: </p> <ol> <li>Hero image is 360 x 510 pixels in the 360 ​​x 720 pixel viewport. Therefore, its impact score is (360 x 510) / (360 x 720) = 0.71</li> <li>It moves vertically by 90 pixels in the viewport height of 720 pixels, so its distance fraction is 90 / 720 = 0.125</li> </ol> <p> Therefore, the CLS is 0.71 x 0.125 = 0.089</p> <p> CLS scores below 0.1 are considered good, while those above 0.25 are considered bad. In this case, the CLS is within an acceptable range because although the affected area is large, the distance to move is relatively small. However, bigger advertising needs further attention. </p> <p> The CLS algorithm does not record any layout offsets within 500 milliseconds of user interaction, which may trigger UI changes or viewport resize. Therefore, your page will not be penalized for interface updates, transitions, and animations that are necessary for operations, such as opening a full-screen menu from the hamburger icon. </p> <p>The Rendering panel (menu > More Tools > Rendering) in Chrome DevTools provides the Layout Offset Area option. Select the box and refresh the page – the layout offset is highlighted in blue. You can also modify the network speed in the Network panel to slow down loading. </p> <p>FID/TBT can be improved by: </p> <ol> <li>Reserve space for image, video and iframe elements by using <code>width and height properties, CSS aspect-ratio properties, or old fill tips (as the case may be)
• Avoid FOUT (unstyled text flashing) and FOIT (invisible text flashing) when loading network fonts. Preloading or using alternate fonts of similar size will help
• Do not insert DOM elements above existing content during initial page loading, such as newsletter registration and similar notification boxes
• Use CSS transform and opacity for less costly animations.

Performance priority

Core web metrics will develop over time, but evaluating LCP, FID, and CLS metrics can help identify the most critical issues. Solve quick and simple puzzles first – they usually have the greatest ROI:

• Enable server compression and HTTP/2 or HTTP/3
• Ensure browser cache is used by setting the HTTP expiration header
• Preload resources as early as possible
• Merge and compress CSS and JavaScript
• Delete unused resources
• Consider using CDN or better hosting
• Use the appropriate image size and format
• Optimize image and video file sizes (professional CDNs can help)

Core Web Metrics FAQ

• What are core web metrics? Core web metrics are a set of user-centric metrics introduced by Google to measure the loading performance, interactivity, and visual stability of web pages. They are essential for evaluating the overall user experience of a website.
• What are the three core web page indicators? The three core web metrics are: Maximum Content Draw (LCP), First Input Delay (FID), and Cumulative Layout Offset (CLS).
• Why are core web metrics important to website owners? Core web metrics are very important because they directly affect the user experience. Websites that value these metrics tend to have faster load times, better interactivity and a more stable visual experience, which improves user satisfaction and possibly improves search engine rankings.
• How to measure the core web page metrics of my website? There are a variety of tools that can be used to measure core web metrics, including Google's PageSpeed ​​Insights, Lighthouse, and Chrome User Experience Reports. These tools provide insight into the performance of a website based on LCP, FID, and CLS metrics.
• How to improve the core web page metrics of my website? Improving core web metrics requires optimizing aspects of the website, such as optimizing images, leveraging browser caching, minimizing render blocking resources, and prioritizing critical rendering paths. Google will provide specific recommendations based on performance reports for your website.
• Will core web metrics affect search engine rankings? Yes, core web metrics are ranking factors in Google's search algorithm. Google has stated that starting from May 2021, page experience signals (including core web metrics) will be included in the ranking of search results. Websites that reflect a better user experience in these metrics may have an advantage in search rankings.

The above is the detailed content of Core Web Vitals: A Guide to Google's Web Performance Metrics. For more information, please follow other related articles on the PHP Chinese website!