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'))