Perf Home page in "Introduction to the Performance tool"

microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md

@@ -6,7 +6,7 @@ ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
 ms.subservice: devtools
-ms.date: 09/04/2023
+ms.date: 01/27/2025
 ---
 <!-- Copyright Kayce Basques
 
@@ -262,6 +262,118 @@ Finally, we set the new position of the icon, but this time we use `element.styl
 To learn more, see [Use transform and opacity changes for animations](https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/#use-transform-and-opacity-changes-for-animations).
 
 
+<!-- ====================================================================== -->
+## Recommendations in live metrics
+<!-- from https://developer.chrome.com/blog/new-in-devtools-130#live-metrics-recommendations -->
+
+Live metrics provide metric-specific recommendations that help you configure your development environment as close as possible to what your users experience.  For information about live metrics, see [Observe Core Web Vitals live](#observe-core-web-vitals-live), below.
+
+To get recommendations, first set up field data fetching from Chrome UX Report (CrUX).  To set up field data fetching, see [Compare your experience to the experience of your users](#compare-your-experience-to-the-experience-of-your-users), below.  For information about Chrome UX Report (CrUX), see [Overview of CrUX](https://developer.chrome.com/docs/crux)<!-- todo: make present repo match linked content, update link -->.
+
+Then expand the **Consider your local test conditions** section in each metric card (if any) and **Consider real user environments** in the **Environment settings**.
+
+The expanded sections with recommendations:
+
+![Performance tool home page](./index-images/perf-home-page.png)
+
+The above screenshot of the **Performance** tool's **Local metrics** home page contains the sections:
+* **Largest Contentful Paint (LCP)**
+* **Cumulative Layout Shift (CLS)**
+* **Interaction to Next Paint (INP)**
+
+To approximate the experience of your users, follow the recommendations in [Configure your environment to better match that of your users](#configure-your-environment-to-better-match-that-of-your-users), below.
+
+`
+<!-- ====================================================================== -->
+## Observe Core Web Vitals live
+<!-- from https://developer.chrome.com/docs/devtools/performance/overview#live-metrics -->
+
+When you open the **Performance** tool, it immediately captures and shows you your local [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) and [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) metrics tells you their score (good, needs improvement, or bad).
+
+If you interact with your page, the **Performance** tool also captures your local [Interaction to Next Paint (INP)](https://web.dev/articles/inp) and its score, which, in addition to LCP and CLS, gives you a complete overview of [Core Web Vitals](https://web.dev/articles/vitals) of your page using your network connection and device.
+
+![Observing the metrics](./index-images/observe-metrics.png)
+<!-- /static/docs/devtools/performance/overview/video/observe-metrics.mp4 -->
+
+Under the three metric cards in the **Interactions** and **Layout shifts** tabs, you can find tables with information on captured interactions and layout shifts, including elements, timings, phases (for interactions), and scores (for layout shifts).  To clear both lists, click **Clear** (block-icon<!-- ![]() -->).
+
+To get a breakdown of a metric score, hover over the metric value to see a tooltip.
+
+
+<!-- ------------------------------ -->
+#### Compare your experience to the experience of your users
+
+You can also fetch field data from the [Chrome UX Report](https://developer.chrome.com/docs/crux) and compare the experience of your site's users to your local metrics.
+
+To add field data:
+
+1. In **Performance** > **Next steps** > **Field data**, click **Set up**.
+
+   ![The 'Set up' button in the Next steps section](./index-images/field-data-setup.png)
+
+1. In the **Configure field data fetching** dialog, note the **Privacy disclosure**, and click **Ok**.
+
+   <!-- expander section -->
+   Advanced: Set up a mapping between development and production environments:
+
+      Optionally, to automatically get the most relevant field data, you can set up (multiple) mappings between your development and production origins:
+
+      1. In the dialog window, expand the **Advanced** section and click **+ New**.
+
+      1. In the mapping table, enter your development and production URLs and click **+**.
+
+      ![The mapping between a development and production origins in the advanced section](./index-images/field-data-advanced-mapping.png)
+
+      For example, a mapping of `http://localhost:8080` to `https://example.com` will bring up field data for `example.com/page1` when you navigate to `localhost:8080/page1`.
+
+      Additionally, if for some reason you can't get the field data automatically, you can turn on (check_box icon) **Always show field data for the below URL** and provide a URL.  The **Performance** panel will attempt to fetch field data for this URL first and then show you this field data no matter what page you navigate to.
+
+      To change your field data fetch settings after setup, click **Field data** > **Configure**.
+
+   <!-- end expander section -->
+
+   With the field data fetch set up, the **Performance** panel now shows you a comparison between your local metric scores and those that your users experience.  You can see the collection period in the **Field data** section on the right.
+
+   ![The collection peried of field data after it has fetched](./index-images/field-data-fetched.png)
+
+   To get a breakdown of a metric score, hover over the metric value to see a tooltip.
+
+
+<!-- ------------------------------ -->
+#### Configure your environment to better match that of your users
+
+With the field data fetch set up as described in the previous section, the **Performance** panel provides you with recommendations on how to configure your environment to better match the experience of your users.
+
+
+To configure your environment:
+
+1. In each metric card, expand the **Consider your local test conditions** section, if any, and read the recommendations.
+
+   ![The 'Consider your local test conditions' sections expanded in each metric card](./index-images/env-recs.png)
+
+   Looks like in this example, to better match the experience of your users, you might want to use a common desktop screen size and throttle down the CPU and network.
+
+1. To match the environment configuration for this example:
+
+   1. Set your viewport to one of the common screen sizes (for example, 720p or 1080p). To emulate specific devices and screen sizes, you can use the [Device mode](https://developer.chrome.com/docs/devtools/device-mode) in the **Elements** tool.  See [Emulate mobile devices (Device Emulation)](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/).<!-- todo: ok to change link 1 to link 2? -->
+
+   1. 82% users of the website in this example use desktops to browse. To make sure that you compare your local metric scores to the correct field data, you can select **Desktop** from the **Field data** > **Device** drop-down list.
+
+   1. In the **Environment settings** section, set the **Network** drop-down list to, for example, **Fast 4G**, and **CPU** to, for example, **20x slowdown**.  You may also make sure to select the **Disable network cache** checkbox in the same section.
+
+1. With your environment configured, reload the page, interact with it to capture your local INP, and compare the metric scores again.
+
+   ![The environment is configured to match the real-world user experience](./index-images/env-config.png)
+
+   Looks like the metric scores are now more similar to those that your users experience. Accordingly, the **Consider your local test conditions** sections disappeared from the metric cards.
+
+With that, you can now start improving the [Core Web Vitals](https://web.dev/articles/vitals) of your website:
+
+* [Optimize LCP](https://web.dev/articles/optimize-lcp)
+* [Optimize INP](https://web.dev/articles/optimize-inp)
+* [Optimize CLS](https://web.dev/articles/optimize-cls)
+
+
 <!-- ====================================================================== -->
 ## Next steps