Graduate INP (#169)

* denote INP as CWV * Apply suggestions from code review Co-authored-by: Barry Pollard <[email protected]> * swap INP/FID in HUD * slow INP icon * Apply suggestions from code review Co-authored-by: Barry Pollard <[email protected]> * updated screenshots --------- Co-authored-by: Barry Pollard <[email protected]>
GoogleChrome · Feb 22, 2024 · 2082064 · 2082064
1 parent 0a18214
commit 2082064
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -4,20 +4,21 @@
 
 <img src="media/cwv-extension-drilldown.png">
 
-This extension measures the three [Core Web Vitals](https://web.dev/vitals) metrics in a way that matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console](https://search.google.com/search-console/about)).
+This extension measures the three [Core Web Vitals](https://web.dev/articles/vitals) metrics in a way that matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developer.chrome.com/docs/crux), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console](https://search.google.com/search-console/about)).
 
-It supports all of the [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) and leverages the [web-vitals](https://github.com/GoogleChrome/web-vitals) library under the hood to capture:
+It supports all of the [Core Web Vitals](https://web.dev/articles/vitals/#core-web-vitals) and leverages the [web-vitals](https://github.com/GoogleChrome/web-vitals) library under the hood to capture:
 
-* [Largest Contentful Paint](https://web.dev/lcp/)
-* [Cumulative Layout Shift](https://web.dev/cls/)
-* [First Input Delay](https://web.dev/fid/)
+* [Largest Contentful Paint](https://web.dev/articles/lcp)
+* [Cumulative Layout Shift](https://web.dev/articles/cls)
+* [Interaction to Next Paint](https://web.dev/articles/inp)
 
-It also supports the pending INP metric:
-* [Interaction to Next Paint](https://web.dev/inp/)
+It also supports the diagnostic metrics:
+* [Time to First Byte](https://web.dev/articles/ttfb)
+* [First Contentful Paint](https://web.dev/articles/fcp)
 
-Finally, it also supports the diagnostic metrics:
-* [Time to First Byte](https://web.dev/ttfb/)
-* [First Contentful Paint](https://web.dev/fcp/)
+And finally, it temporarily supports the following deprecated metrics:
+
+* [First Input Delay](https://web.dev/articles/fid)
 
 <h3 id="install">Installation Instructions</h3>
 
@@ -59,9 +60,9 @@ If one or more metrics are failing, the badge will animate the values of these m
 
 Clicking the Ambient badge icon will allow you to drill in to the individual metric values. In this mode, the extension will also say if a metric requires a user action.
 
-For example, Interaction to Next Paint requires a real interaction (e.g click/tap) with the page and will be in a `Waiting for input...` state until this is the case. We recommend consulting the web.dev documentation for [LCP](https://web.dev/lcp/), [CLS](https://web.dev/cls/), [FID](https://web.dev/fid/), and [INP](https://web.dev/inp/) to get an understanding of when metric values settle.
+For example, Interaction to Next Paint requires a real interaction (e.g click/tap) with the page and will be in a `Waiting for input...` state until this is the case. We recommend consulting the web.dev documentation for [LCP](https://web.dev/articles/lcp), [CLS](https://web.dev/articles/cls), [FID](https://web.dev/articles/fid), and [INP](https://web.dev/articles/inp) to get an understanding of when metric values settle.
 
-As of version 1.0.0, the popup combines your local Core Web Vitals experiences with real-user data from the field via the [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report) (CrUX) [API](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference). This integration gives you contextual insights to help you understand how similar your individual experiences are to other desktop users on the same page. We've also added a new option to "Compare local experiences to phone field data" instead, if needed. Note that CrUX data may not be available for some pages, in which case we try to load field data for the origin as a whole.
+As of version 1.0.0, the popup combines your local Core Web Vitals experiences with real-user data from the field via the [Chrome UX Report](https://developer.chrome.com/docs/crux) (CrUX) [API](https://developer.chrome.com/docs/crux/api). This integration gives you contextual insights to help you understand how similar your individual experiences are to other desktop users on the same page. We've also added a new option to "Compare local experiences to phone field data" instead, if needed. Note that CrUX data may not be available for some pages, in which case we try to load field data for the origin as a whole.
 
 <img src="media/cwv-extension-screenshot.png" width="75%">
 
@@ -92,8 +93,8 @@ Diagnostic info for each metric is logged as a console group prepended by the ex
 The kinds of diagnostic info varies per metric. For example, the LCP info includes:
 
 * A reference to the LCP element
-* A table of [LCP sub-part metrics](https://web.dev/optimize-lcp/#:~:text=each%20of%20these-,LCP%20sub%2Dparts,-in%20more%20detail)
-* An optional warning if the tab was [loaded in the background](https://web.dev/lcp/#:~:text=your%20analytics%20service.-,Caution,-Since%20users%20can)
+* A table of [LCP sub-part metrics](https://web.dev/articles/optimize-lcp#lcp_breakdown)
+* An optional warning if the tab was [loaded in the background](https://web.dev/articles/lcp#lcp-background)
 * The full attribution object from [web-vitals](https://github.com/GoogleChrome/web-vitals#attribution)
 
 
@@ -131,11 +132,11 @@ This extension reports metrics for your desktop or laptop machine. In many cases
 
 We are making available a set of guides for optimizing each of the Core Web Vitals metrics if you find your page is not passing a particular threshold:
 
-* [Optimize CLS](https://web.dev/optimize-cls/)
-* [Optimize LCP](https://web.dev/optimize-lcp/)
-* [Optimize FID](https://web.dev/optimize-fid/)
-* [Optimize INP](https://web.dev/optimize-inp/)
-* [Optimize TTFB](https://web.dev/optimize-ttfb/)
+* [Optimize CLS](https://web.dev/articles/optimize-cls)
+* [Optimize LCP](https://web.dev/articles/optimize-lcp)
+* [Optimize FID](https://web.dev/articles/optimize-fid)
+* [Optimize INP](https://web.dev/articles/optimize-inp)
+* [Optimize TTFB](https://web.dev/articles/optimize-ttfb)
 
 Lighthouse also includes additional actionability audits for these metrics.
 

diff --git a/icons/slow128w-inp.png b/icons/slow128w-inp.png
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Web Vitals",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "manifest_version": 3,
   "description": "Measure metrics for a healthy site",
   "homepage_url": "https://web.dev/vitals/",

diff --git a/media/cwv-extension-drilldown-2.png b/media/cwv-extension-drilldown-2.png
diff --git a/media/cwv-extension-drilldown.png b/media/cwv-extension-drilldown.png
diff --git a/media/cwv-extension-screenshot.png b/media/cwv-extension-screenshot.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-vitals-extension",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Instant Web Vitals metrics",
   "main": "src/browser_action/vitals.js",
   "repository": "https://github.com/googlechrome/web-vitals-extension",

diff --git a/service_worker.js b/service_worker.js
@@ -172,7 +172,7 @@ function badgeMetric(metric, value, tabid) {
     if (metric === 'lcp' && value <= LCP_THRESHOLD) {
       return;
     }
-    if (metric === 'fid' && value <= FID_THRESHOLD) {
+    if (metric === 'inp' && value <= INP_THRESHOLD) {
       return;
     }
 
@@ -205,17 +205,17 @@ function badgeMetric(metric, value, tabid) {
           tabId: currentTab,
         });
         break;
-      case 'fid':
+      case 'inp':
         chrome.action.setIcon({
-          path: '../../icons/slow128w-fid.png',
+          path: '../../icons/slow128w-inp.png',
           tabId: currentTab,
         });
         chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
         });
         chrome.action.setBadgeText({
-          text: value.toFixed(2),
+          text: value.toFixed(0),
           tabId: currentTab,
         });
         break;
@@ -299,7 +299,7 @@ async function animateBadges(request, tabId) {
 
     await wait(delay);
     if (animationsByTabId.get(tabId) !== animationId) return;
-    badgeMetric('fid', request.metrics.fid.value, tabId);
+    badgeMetric('inp', request.metrics.inp.value, tabId);
 
     await wait(delay);
     if (animationsByTabId.get(tabId) !== animationId) return;

diff --git a/src/browser_action/core.css b/src/browser_action/core.css
@@ -120,8 +120,7 @@
 .web-vitals-chrome-extension-popup .metric {
   display: grid;
   grid-template-areas: "metric-info metric-performance";
-  grid-template-columns: 1fr 2fr;
-  column-gap: 4.17rem;
+  grid-template-columns: 1fr 330px;
   align-items: center;
   border-bottom: 1px solid var(--color-dark-grey);
   height: 6.2rem;

diff --git a/src/browser_action/popup.js b/src/browser_action/popup.js
@@ -68,14 +68,14 @@ class Popup {
       local: this._metrics.cls.value,
       background: this.background
     });
-    this.metrics.fid = new FID({
-      local: this._metrics.fid.value,
-      background: this.background
-    });
     this.metrics.inp = new INP({
       local: this._metrics.inp.value,
       background: this.background
     });
+    this.metrics.fid = new FID({
+      local: this._metrics.fid.value,
+      background: this.background
+    });
     this.metrics.fcp = new FCP({
       local: this._metrics.fcp.value,
       background: this.background

diff --git a/src/browser_action/vitals.js b/src/browser_action/vitals.js
@@ -111,14 +111,14 @@
       overallScore = 'POOR';
       metrics.cls.pass = false;
     }
-    if (metrics.fid.value > FID_THRESHOLD) {
-      overallScore = 'POOR';
-      metrics.fid.pass = false;
-    }
     if (metrics.inp.value > INP_THRESHOLD) {
-      // INP does not affect overall score
+      overallScore = 'POOR';
       metrics.inp.pass = false;
     }
+    if (metrics.fid.value > FID_THRESHOLD) {
+      // FID does not affect overall score
+      metrics.fid.pass = false;
+    }
     if (metrics.fcp.value > FCP_THRESHOLD) {
       // FCP does not affect overall score
       metrics.fcp.pass = false;
@@ -524,27 +524,27 @@
             <div class="lh-metric__value">${(metrics.cls.value || 0).toFixed(3)}</div>
           </div>
         </div>
-        <div class="lh-metric lh-metric--${metrics.fid.pass ? 'pass':'fail'} lh-metric--${metrics.fid.value === null ? 'waiting' : 'ready'}">
+        <div class="lh-metric lh-metric--${metrics.inp.pass ? 'pass':'fail'} lh-metric--${metrics.inp.value === null ? 'waiting' : 'ready'}">
           <div class="lh-metric__innerwrap">
             <span class="lh-metric__title">
-              First Input Delay
-              <span class="lh-metric-state">${metrics.fid.value === null ? '(waiting for input)' : ''}</span>
+              Interaction to Next Paint
+              <span class="lh-metric-state">${metrics.inp.value === null ? '(waiting for input)' : ''}</span>
             </span>
             <div class="lh-metric__value">${
-              metrics.fid.value === null ? '' :
-              `${metrics.fid.value.toFixed(2)}&nbsp;ms`
+              metrics.inp.value === null ? '' :
+              `${metrics.inp.value.toFixed(2)}&nbsp;ms`
             }</div>
           </div>
         </div>
-        <div class="lh-metric lh-metric--${metrics.inp.pass ? 'pass':'fail'} lh-metric--${metrics.inp.value === null ? 'waiting' : 'ready'}">
+        <div class="lh-metric lh-metric--${metrics.fid.pass ? 'pass':'fail'} lh-metric--${metrics.fid.value === null ? 'waiting' : 'ready'}">
           <div class="lh-metric__innerwrap">
             <span class="lh-metric__title">
-              Interaction to Next Paint
-              <span class="lh-metric-state">${metrics.inp.value === null ? '(waiting for input)' : ''}</span>
+              First Input Delay
+              <span class="lh-metric-state">${metrics.fid.value === null ? '(waiting for input)' : ''}</span>
             </span>
             <div class="lh-metric__value">${
-              metrics.inp.value === null ? '' :
-              `${metrics.inp.value.toFixed(2)}&nbsp;ms`
+              metrics.fid.value === null ? '' :
+              `${metrics.fid.value.toFixed(2)}&nbsp;ms`
             }</div>
           </div>
         </div>