diff --git a/testing/amp-performance-extension/OWNERS b/testing/amp-performance-extension/OWNERS new file mode 100644 index 0000000000000..fb5efbba758f2 --- /dev/null +++ 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 index d1f5ca366a5af..9f2a6409d9c2e 100644 --- a/testing/amp-performance-extension/manifest.json +++ b/testing/amp-performance-extension/manifest.json @@ -23,7 +23,7 @@ }, "content_scripts": [ { - "matches": ["*://*/*"], + "matches": [""], "run_at": "document_start", "js": ["measure.js"] } diff --git a/testing/amp-performance-extension/measure.js b/testing/amp-performance-extension/measure.js index acc5664efafb1..65302326c6ae7 100644 --- 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'))