✨ Performance Measurement Chrome Extension

testing/amp-performance-extension/README.md

@@ -0,0 +1,19 @@
+<!---
+Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS-IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+# Chrome Extension for Measuring AMP page performance
+
+Install this extension to test existing public AMP docs for performance.

testing/amp-performance-extension/background.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-undef */
+chrome.browserAction.setBadgeText({
+  text: 'ON',
+});
+chrome.browserAction.setBadgeBackgroundColor({
+  color: '#15a341',
+});
+/* eslint-enable no-undef */

testing/amp-performance-extension/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "AMP Performance Measurement",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "description": "Measure the performance of AMP pages.",
+  "homepage_url": "https://www.ampproject.org",
+  "icons": {
+    "16": "16x16.png",
+    "48": "48x48.png",
+    "128": "128x128.png"
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "16x16.png",
+      "48": "48x48.png",
+      "128": "128x128.png"
+    },
+    "default_title": "AMP Performance"
+  },
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "run_at": "document_start",
+      "js": ["measure.js"]
+    }
+  ],
+  "permissions": ["activeTab", "*://*/*"]
+}

testing/amp-performance-extension/measure.js

@@ -0,0 +1,218 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function renderMeasurement(container, label, count) {
+  const line = document.createElement('div');
+  line.classList.add('i-amphtml-performance-line');
+  const labelSpan = document.createElement('div');
+  labelSpan.classList.add('i-amphtml-performance-label');
+  labelSpan.innerText = label;
+  const countSpan = document.createElement('div');
+  countSpan.classList.add('i-amphtml-performance-count');
+  countSpan.innerText = count;
+  line.appendChild(labelSpan);
+  line.appendChild(countSpan);
+  container.appendChild(line);
+  return countSpan;
+}
+
+function addStyleString(root, str) {
+  const node = document.createElement('style');
+  node.innerHTML = str;
+  root.appendChild(node);
+}
+
+function round(num, dec = 4) {
+  return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
+}
+
+function measureCLS() {
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('layout-shift') === -1) {
+    return;
+  }
+  window.cumulativeLayoutShift = 0;
+  const layoutShiftObserver = new PerformanceObserver(list =>
+    list
+      .getEntries()
+      .forEach(entry => (window.cumulativeLayoutShift += entry.value))
+  );
+  layoutShiftObserver.observe({type: 'layout-shift', buffered: true});
+}
+
+function measureLargestContentfulPaint() {
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('largest-contentful-paint') === -1) {
+    return;
+  }
+  window.largestContentfulPaint = 0;
+  const largestContentfulPaintObserver = new PerformanceObserver(list => {
+    const entries = list.getEntries();
+    const entry = entries[entries.length - 1];
+    window.largestContentfulPaint = entry.renderTime || entry.loadTime;
+  });
+  largestContentfulPaintObserver.observe({
+    type: 'largest-contentful-paint',
+    buffered: true,
+  });
+}
+
+function measureLongTasks() {
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('longtask') === -1) {
+    return;
+  }
+  window.longTasks = [];
+  const longTaskObserver = new PerformanceObserver(list =>
+    list.getEntries().forEach(entry => window.longTasks.push(entry))
+  );
+  longTaskObserver.observe({entryTypes: ['longtask']});
+}
+
+function measureTimeToInteractive() {
+  window.measureStarted = Date.now();
+}
+
+function getMaxFirstInputDelay(firstContentfulPaint) {
+  let longest = 0;
+
+  window.longTasks.forEach(longTask => {
+    if (
+      longTask.startTime > firstContentfulPaint &&
+      longTask.duration > longest
+    ) {
+      longest = longTask.duration;
+    }
+  });
+
+  return longest;
+}
+
+function getMetric(name) {
+  const entries = performance.getEntries();
+  const entry = entries.find(entry => entry.name === name);
+  return entry ? entry.startTime : 0;
+}
+
+function getTimeToInteractive() {
+  return Date.now() - window.measureStarted;
+}
+
+measureLongTasks();
+measureCLS();
+measureTimeToInteractive();
+measureLargestContentfulPaint();
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Create a container for the metrics that is CSS-isolated from the host page
+  const resultContainer = document.createElement('div');
+  const shadow = resultContainer.attachShadow({mode: 'open'});
+  const result = document.createElement('div');
+  result.setAttribute('id', 'i-amphtml-performance-result');
+  shadow.appendChild(result);
+  addStyleString(
+    result,
+    `
+        #i-amphtml-performance-result {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            background-color: #000000aa;
+            padding: 10px;
+            color: white;
+            z-index: 99999;
+            pointer-events: none;
+            width: 200px;
+            overflow: hidden;
+        }
+
+        .i-amphtml-performance-line {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            font-size: 12px;
+        }
+
+        .i-amphtml-performance-count {
+            margin-left: 8px;
+            font-weight: bold;
+        }
+  `
+  );
+
+  // 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));
+
+  // First contentful paint
+  const firstContentfulPaint = getMetric('first-contentful-paint');
+  const fcp = renderMeasurement(
+    result,
+    'firstContentfulPaint',
+    round(firstContentfulPaint)
+  );
+
+  // Largest contentful paint
+  const lcp = renderMeasurement(
+    result,
+    'largestContentfulPaint',
+    round(window.largestContentfulPaint)
+  );
+
+  // Max first input delay
+  const mfid = renderMeasurement(
+    result,
+    'maxFirstInputDelay',
+    round(getMaxFirstInputDelay(firstContentfulPaint))
+  );
+
+  // Time to interactive
+  renderMeasurement(result, 'timeToInteractive', round(getTimeToInteractive()));
+
+  // Load CLS
+  renderMeasurement(
+    result,
+    'loadCLS',
+    round(window.cumulativeLayoutShift * 100)
+  );
+
+  // Instantaneous CLS
+  const instCLS = renderMeasurement(
+    result,
+    'instantaneousCLS',
+    round(window.cumulativeLayoutShift * 100)
+  );
+
+  // Insert result
+  document.body.insertBefore(resultContainer, document.body.firstChild);
+
+  // 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(
+      getMaxFirstInputDelay(getMetric('first-contentful-paint'))
+    );
+  }, 250);
+});