✨ Performance Measurement Chrome Extension

testing/amp-performance-extension/OWNERS

@@ -0,0 +1,13 @@
+// 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},
+ {name: 'ampproject/wg-performance'},
+ ],
+ },
+ ],
+}

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": ["<all_urls>"],
+ "run_at": "document_start",
+ "js": ["measure.js"]
+ }
+ ],
+ "permissions": ["activeTab", "*://*/*"]
+}

testing/amp-performance-extension/measure.js

@@ -0,0 +1,209 @@
+/**
+ * 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-next-line no-unused-vars
+let cumulativeLayoutShift, largestContentfulPaint, longTasks, measureStarted;
+
+function renderMeasurement(container, label, count) {
+ container./*OK*/ innerHTML += `<div class='i-amphtml-performance-line'>
+ <div class="i-amphtml-performance-label">${label}</div>
+ <div class="i-amphtml-performance-count">${count.toFixed(4)}</div>
+ </div>`;
+ return container.lastElementChild.lastElementChild;
+}
+
+function addStyleString(root, str) {
+ const node = document.createElement('style');
+ node./*OK*/ textContent = str;
+ root.appendChild(node);
+}
+
+function measureCLS() {
+ const supported = PerformanceObserver.supportedEntryTypes;
+ if (!supported || supported.indexOf('layout-shift') === -1) {
+ return;
+ }
+ cumulativeLayoutShift = 0;
+ const layoutShiftObserver = new PerformanceObserver(list =>
+ list
+ .getEntries()
+ .filter(entry => !entry.hadRecentInput)
+ .forEach(entry => (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;
+ }
+ largestContentfulPaint = 0;
+ const largestContentfulPaintObserver = new PerformanceObserver(list => {
+ const entries = list.getEntries();
+ const entry = entries[entries.length - 1];
+ 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;
+ }
+ longTasks = [];
+ const longTaskObserver = new PerformanceObserver(list =>
+ list.getEntries().forEach(entry => longTasks.push(entry))
+ );
+ longTaskObserver.observe({entryTypes: ['longtask']});
+}
+
+function measureTimeToInteractive() {
+ measureStarted = Date.now();
+}
+
+function getMaxFirstInputDelay(firstContentfulPaint) {
+ let longest = 0;
+
+ 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() - 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;
+ }
+ `
+ );
+
+ // TODO(wassgha): Implement an expanded view where these metrics are shown
+
+ // Visible
+ // const visible = getMetric('visible');
+ // const vis = renderMeasurement(result, 'visible', visible);
+
+ // First paint
+ // const firstPaint = getMetric('first-paint');
+ // const fp = renderMeasurement(result, 'firstPaint', firstPaint);
+
+ // First contentful paint
+ const firstContentfulPaint = getMetric('first-contentful-paint');
+ // const fcp = renderMeasurement(
+ // result,
+ // 'firstContentfulPaint',
+ // firstContentfulPaint
+ // );
+
+ // Time to interactive
+ // renderMeasurement(result, 'timeToInteractive', getTimeToInteractive());
+
+ // Largest contentful paint
+ const lcp = renderMeasurement(
+ result,
+ 'largestContentfulPaint',
+ largestContentfulPaint
+ );
+
+ // Max first input delay
+ const mfid = renderMeasurement(
+ result,
+ 'maxFirstInputDelay',
+ getMaxFirstInputDelay(firstContentfulPaint)
+ );
+
+ // Load CLS
+ renderMeasurement(result, 'loadCLS', cumulativeLayoutShift * 100);
+
+ // Instantaneous CLS
+ const instCLS = renderMeasurement(
+ result,
+ 'instantaneousCLS',
+ cumulativeLayoutShift * 100
+ );
+
+ // Insert result
+ document.body.insertBefore(resultContainer, document.body.firstChild);
+
+ // Instaneous measurement updates
+ setInterval(() => {
+ instCLS./*OK*/ innerText = (cumulativeLayoutShift * 100).toFixed(4);
+ // vis.innerText = getMetric('visible').toFixed(4);
+ // fp.innerText = getMetric('first-paint').toFixed(4);
+ // fcp.innerText = getMetric('first-contentful-paint').toFixed(4);
+ lcp./*OK*/ innerText = largestContentfulPaint.toFixed(4);
+ mfid./*OK*/ innerText = getMaxFirstInputDelay(
+ getMetric('first-contentful-paint')
+ ).toFixed(4);
+ }, 250);
+});