Skip to content

Commit

Permalink
Ignore intentional layout shift and limit metrics
Browse files Browse the repository at this point in the history
  • Loading branch information
wassgha committed Jan 15, 2020
1 parent d67ff22 commit e83a196
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 21 deletions.
10 changes: 10 additions & 0 deletions testing/amp-performance-extension/OWNERS
Original file line number Diff line number Diff line change
@@ -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: 'wassgha', notify: true}],
},
],
}
2 changes: 1 addition & 1 deletion testing/amp-performance-extension/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"content_scripts": [
{
"matches": ["*://*/*"],
"matches": ["<all_urls>"],
"run_at": "document_start",
"js": ["measure.js"]
}
Expand Down
43 changes: 23 additions & 20 deletions testing/amp-performance-extension/measure.js
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand Down Expand Up @@ -107,9 +108,9 @@ function getMetric(name) {
return entry ? entry.startTime : 0;
}

function getTimeToInteractive() {
return Date.now() - window.measureStarted;
}
// function getTimeToInteractive() {
// return Date.now() - window.measureStarted;
// }

measureLongTasks();
measureCLS();
Expand Down Expand Up @@ -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(
Expand All @@ -184,9 +190,6 @@ document.addEventListener('DOMContentLoaded', function() {
round(getMaxFirstInputDelay(firstContentfulPaint))
);

// Time to interactive
renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));

// Load CLS
renderMeasurement(
result,
Expand All @@ -207,11 +210,11 @@ 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'));
lcp.innerText = round(window.largestContentfulPaint);
mfid.innerText = round(
// vis.innerText = round(getMetric('visible'));
// fp.innerText = round(getMetric('first-paint'));
// fcp.innerText = round(getMetric('first-contentful-paint'));
lcp./*REVIEW*/ innerText = round(window.largestContentfulPaint);
mfid./*REVIEW*/ innerText = round(
getMaxFirstInputDelay(getMetric('first-contentful-paint'))
);
}, 250);
Expand Down

0 comments on commit e83a196

Please sign in to comment.