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/16/2025
 ---
 <!-- Copyright Kayce Basques
 
@@ -262,6 +262,20 @@ 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
+
+[Live metrics](https://developer.chrome.com/docs/devtools/performance/overview#live-metrics) provide metric-specific recommendations that help you configure your development environment as close as possible to what your users experience.
+
+To get recommendations, [set up field data fetching](https://developer.chrome.com/docs/devtools/performance/overview#compare) from [Chrome UX Report (CrUX)](https://developer.chrome.com/docs/crux) and expand the **Consider your local test conditions** section in each metric card (if any) and **Consider real user environments** in the **Environment settings**.
+
+Expanded sections with recommendations.
+
+![Performance tool home page](./index-images/perf-home-page.png)
+
+Follow the recommendations https://developer.chrome.com/docs/devtools/performance/overview#env-config to approximate the experience of your users.
+
+
 <!-- ====================================================================== -->
 ## Next steps