Ignore intentional layout shift and limit metrics

ampproject · Jan 15, 2020 · 4bbbd63 · 4bbbd63
1 parent d67ff22
commit 4bbbd63
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/testing/amp-performance-extension/OWNERS b/testing/amp-performance-extension/OWNERS
@@ -0,0 +1,10 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/master/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [{name: 'gharbiw', notify: true}],
+    },
+  ],
+}
diff --git a/testing/amp-performance-extension/manifest.json b/testing/amp-performance-extension/manifest.json
@@ -23,7 +23,7 @@
   },
   "content_scripts": [
     {
-      "matches": ["*://*/*"],
+      "matches": ["<all_urls>"],
       "run_at": "document_start",
       "js": ["measure.js"]
     }

diff --git a/testing/amp-performance-extension/measure.js b/testing/amp-performance-extension/measure.js
@@ -48,6 +48,7 @@ function measureCLS() {
   const layoutShiftObserver = new PerformanceObserver(list =>
     list
       .getEntries()
+      .filter(entry => !entry.hadRecentInput)
       .forEach(entry => (window.cumulativeLayoutShift += entry.value))
   );
   layoutShiftObserver.observe({type: 'layout-shift', buffered: true});
@@ -154,21 +155,26 @@ document.addEventListener('DOMContentLoaded', function() {
   `
   );
 
+  // TODO(wassgha): Implement an expanded view where these metrics are shown
+
   // Visible
-  const visible = getMetric('visible');
-  const vis = renderMeasurement(result, 'visible', round(visible));
+  // const visible = getMetric('visible');
+  // const vis = renderMeasurement(result, 'visible', round(visible));
 
   // First paint
-  const firstPaint = getMetric('first-paint');
-  const fp = renderMeasurement(result, 'firstPaint', round(firstPaint));
+  // const firstPaint = getMetric('first-paint');
+  // const fp = renderMeasurement(result, 'firstPaint', round(firstPaint));
 
   // First contentful paint
   const firstContentfulPaint = getMetric('first-contentful-paint');
-  const fcp = renderMeasurement(
-    result,
-    'firstContentfulPaint',
-    round(firstContentfulPaint)
-  );
+  // const fcp = renderMeasurement(
+  //   result,
+  //   'firstContentfulPaint',
+  //   round(firstContentfulPaint)
+  // );
+
+  // Time to interactive
+  // renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));
 
   // Largest contentful paint
   const lcp = renderMeasurement(
@@ -184,9 +190,6 @@ document.addEventListener('DOMContentLoaded', function() {
     round(getMaxFirstInputDelay(firstContentfulPaint))
   );
 
-  // Time to interactive
-  renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));
-
   // Load CLS
   renderMeasurement(
     result,
@@ -207,9 +210,9 @@ document.addEventListener('DOMContentLoaded', function() {
   // Instaneous measurement updates
   setInterval(() => {
     instCLS.innerText = round(window.cumulativeLayoutShift * 100);
-    vis.innerText = round(getMetric('visible'));
-    fp.innerText = round(getMetric('first-paint'));
-    fcp.innerText = round(getMetric('first-contentful-paint'));
+    // vis.innerText = round(getMetric('visible'));
+    // fp.innerText = round(getMetric('first-paint'));
+    // fcp.innerText = round(getMetric('first-contentful-paint'));
     lcp.innerText = round(window.largestContentfulPaint);
     mfid.innerText = round(
       getMaxFirstInputDelay(getMetric('first-contentful-paint'))