Skip to content

Instantly share code, notes, and snippets.

@alfredwesterveld
Last active April 29, 2023 20:21
Show Gist options
  • Save alfredwesterveld/a5988246e2de72aaa6dd04662bc4b72b to your computer and use it in GitHub Desktop.
Save alfredwesterveld/a5988246e2de72aaa6dd04662bc4b72b to your computer and use it in GitHub Desktop.
report vitals on soft refresh (experimental)
URL=https://xkcd.com/
node_modules
.env

Easiest would be to install clean browser via this package because soft navigations are not enabled by default(At least Chrome <= 112) so not have to run experimental feature(forget to stop also) inside your main browser.

Soft navigations are not enabled by default in Chrome, but are available for experimentation from Chrome 110 by explicitly enabling this functionality

For developers, this can be enabled by turning on the Experimental Web Platform features flag at chrome://flags/#enable-experimental-web-platform-features or by using the --enable-experimental-web-platform-features command line argument when launching Chrome.

But to get started:

  • To install dependencies you first might have to install pnpm via npm i -g pnpm. This package manager is much lighter/faster because only instal dependencies once and use symbolic links (although not really really necessary)
  • Install dependencies via pnpm install (can also use npm install)
  • Start browser via npm start. You can also specify url via last parameter: npm start www.google.nl or even better remember your favorite url in .env file. Use .env.example as guidance
  • You can test now :). Most useful SPA metrics at least for me are FCP and INP (so by default automatically injected/enabled)

Some resources:

// @ts-check
import puppeteer, { KnownDevices } from "puppeteer";
import { readFileSync } from "node:fs";
import { config } from "dotenv";
config();
const vitalsSPA = readFileSync("./web-vitals.iife.js", "utf-8");
try {
const browser = await puppeteer.launch({
headless: false,
devtools: true,
args: ["--enable-experimental-web-platform-features"],
});
const [page] = await browser.pages();
await page.emulate(KnownDevices["Pixel 5"]);
page.on("framenavigated", async () => {
const vitals = await page.evaluate(() => {
return window["webVitals"];
});
if (!vitals) {
try {
await page.addScriptTag({ content: vitalsSPA });
await page.evaluate(() => {
window["webVitals"].onFCP(console.log, { reportSoftNavs: true });
window["webVitals"].onINP(console.log, { reportSoftNavs: true });
});
} catch (e) {
console.log(e);
}
}
});
if (process.env.URL) {
await page.goto(process.env.URL);
} else if (process.argv[2]) {
await page.goto(process.argv[2]);
}
} catch (e) {
console.log(e);
}
// @ts-check
import puppeteer, { KnownDevices } from "puppeteer";
import { config } from "dotenv";
config();
try {
const browser = await puppeteer.launch({
headless: false,
devtools: true,
});
const [page] = await browser.pages();
const pageSession = await page.target().createCDPSession();
await pageSession.send("Emulation.setCPUThrottlingRate", { rate: 4 });
await page.emulate(KnownDevices["Pixel 5"]);
// look up how to slow down later
if (process.env.URL) {
await page.goto(process.env.URL);
} else if (process.argv[2]) {
await page.goto(process.argv[2]);
}
} catch (e) {
console.log(e);
}
{
"name": "soft-report",
"version": "1.0.0",
"description": "Soft navigations are not enabled by default in Chrome, but are available for experimentation from Chrome 110 by explicitly #[enabling this functionality](https://developer.chrome.com/blog/soft-navigations-experiment/#how-do-i-enable-soft-navigations-in-chrome).",
"main": "devtools.js",
"engines": {
"npm": ">=8",
"node": ">=16"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.mjs"
},
"repository": {
"type": "git",
"url": "git+https://gist.github.com/a5988246e2de72aaa6dd04662bc4b72b.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://gist.github.com/a5988246e2de72aaa6dd04662bc4b72b"
},
"homepage": "https://gist.github.com/a5988246e2de72aaa6dd04662bc4b72b",
"dependencies": {
"dotenv": "^16.0.3",
"puppeteer": "^19.9.1"
}
}
lockfileVersion: 5.4
specifiers:
dotenv: ^16.0.3
puppeteer: ^19.9.1
dependencies:
dotenv: 16.0.3
puppeteer: 19.9.1
packages:
/@babel/code-frame/7.21.4:
resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/highlight': 7.18.6
dev: false
/@babel/helper-validator-identifier/7.19.1:
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
engines: {node: '>=6.9.0'}
dev: false
/@babel/highlight/7.18.6:
resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/helper-validator-identifier': 7.19.1
chalk: 2.4.2
js-tokens: 4.0.0
dev: false
/@puppeteer/browsers/0.4.1:
resolution: {integrity: sha512-4IICvy1McAkT/HyNZHIs7sp8ngBX1dmO0TPQ+FWq9ATQMqI8p+Ulm5A3kS2wYDh5HDHHkYrrETOu6rlj64VuTw==}
engines: {node: '>=14.1.0'}
hasBin: true
peerDependencies:
typescript: '>= 4.7.4'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
debug: 4.3.4
extract-zip: 2.0.1
https-proxy-agent: 5.0.1
progress: 2.0.3
proxy-from-env: 1.1.0
tar-fs: 2.1.1
unbzip2-stream: 1.4.3
yargs: 17.7.1
transitivePeerDependencies:
- supports-color
dev: false
/@types/node/18.15.11:
resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
dev: false
optional: true
/@types/yauzl/2.10.0:
resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
requiresBuild: true
dependencies:
'@types/node': 18.15.11
dev: false
optional: true
/agent-base/6.0.2:
resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
engines: {node: '>= 6.0.0'}
dependencies:
debug: 4.3.4
transitivePeerDependencies:
- supports-color
dev: false
/ansi-regex/5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
engines: {node: '>=8'}
dev: false
/ansi-styles/3.2.1:
resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
engines: {node: '>=4'}
dependencies:
color-convert: 1.9.3
dev: false
/ansi-styles/4.3.0:
resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
engines: {node: '>=8'}
dependencies:
color-convert: 2.0.1
dev: false
/argparse/2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
dev: false
/base64-js/1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
dev: false
/bl/4.1.0:
resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
dependencies:
buffer: 5.7.1
inherits: 2.0.4
readable-stream: 3.6.2
dev: false
/buffer-crc32/0.2.13:
resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
dev: false
/buffer/5.7.1:
resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
dependencies:
base64-js: 1.5.1
ieee754: 1.2.1
dev: false
/callsites/3.1.0:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
engines: {node: '>=6'}
dev: false
/chalk/2.4.2:
resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
engines: {node: '>=4'}
dependencies:
ansi-styles: 3.2.1
escape-string-regexp: 1.0.5
supports-color: 5.5.0
dev: false
/chownr/1.1.4:
resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
dev: false
/chromium-bidi/0.4.6_7yd6ibrwer4fxzjxd6md3toxiy:
resolution: {integrity: sha512-TQOkWRaLI/IWvoP8XC+7jO4uHTIiAUiklXU1T0qszlUFEai9LgKXIBXy3pOS3EnQZ3bQtMbKUPkug0fTAEHCSw==}
peerDependencies:
devtools-protocol: '*'
dependencies:
devtools-protocol: 0.0.1107588
mitt: 3.0.0
dev: false
/cliui/8.0.1:
resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
engines: {node: '>=12'}
dependencies:
string-width: 4.2.3
strip-ansi: 6.0.1
wrap-ansi: 7.0.0
dev: false
/color-convert/1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies:
color-name: 1.1.3
dev: false
/color-convert/2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}
dependencies:
color-name: 1.1.4
dev: false
/color-name/1.1.3:
resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
dev: false
/color-name/1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
dev: false
/cosmiconfig/8.1.3:
resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==}
engines: {node: '>=14'}
dependencies:
import-fresh: 3.3.0
js-yaml: 4.1.0
parse-json: 5.2.0
path-type: 4.0.0
dev: false
/cross-fetch/3.1.5:
resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
dependencies:
node-fetch: 2.6.7
transitivePeerDependencies:
- encoding
dev: false
/debug/4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.2
dev: false
/devtools-protocol/0.0.1107588:
resolution: {integrity: sha512-yIR+pG9x65Xko7bErCUSQaDLrO/P1p3JUzEk7JCU4DowPcGHkTGUGQapcfcLc4qj0UaALwZ+cr0riFgiqpixcg==}
dev: false
/dotenv/16.0.3:
resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
engines: {node: '>=12'}
dev: false
/emoji-regex/8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
dev: false
/end-of-stream/1.4.4:
resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
dependencies:
once: 1.4.0
dev: false
/error-ex/1.3.2:
resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
dependencies:
is-arrayish: 0.2.1
dev: false
/escalade/3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
engines: {node: '>=6'}
dev: false
/escape-string-regexp/1.0.5:
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
engines: {node: '>=0.8.0'}
dev: false
/extract-zip/2.0.1:
resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
engines: {node: '>= 10.17.0'}
hasBin: true
dependencies:
debug: 4.3.4
get-stream: 5.2.0
yauzl: 2.10.0
optionalDependencies:
'@types/yauzl': 2.10.0
transitivePeerDependencies:
- supports-color
dev: false
/fd-slicer/1.1.0:
resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
dependencies:
pend: 1.2.0
dev: false
/fs-constants/1.0.0:
resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
dev: false
/get-caller-file/2.0.5:
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
engines: {node: 6.* || 8.* || >= 10.*}
dev: false
/get-stream/5.2.0:
resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
engines: {node: '>=8'}
dependencies:
pump: 3.0.0
dev: false
/has-flag/3.0.0:
resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
engines: {node: '>=4'}
dev: false
/https-proxy-agent/5.0.1:
resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
engines: {node: '>= 6'}
dependencies:
agent-base: 6.0.2
debug: 4.3.4
transitivePeerDependencies:
- supports-color
dev: false
/ieee754/1.2.1:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: false
/import-fresh/3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
dependencies:
parent-module: 1.0.1
resolve-from: 4.0.0
dev: false
/inherits/2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
dev: false
/is-arrayish/0.2.1:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
dev: false
/is-fullwidth-code-point/3.0.0:
resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
engines: {node: '>=8'}
dev: false
/js-tokens/4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
dev: false
/js-yaml/4.1.0:
resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
hasBin: true
dependencies:
argparse: 2.0.1
dev: false
/json-parse-even-better-errors/2.3.1:
resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
dev: false
/lines-and-columns/1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: false
/mitt/3.0.0:
resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
dev: false
/mkdirp-classic/0.5.3:
resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
dev: false
/ms/2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
dev: false
/node-fetch/2.6.7:
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
engines: {node: 4.x || >=6.0.0}
peerDependencies:
encoding: ^0.1.0
peerDependenciesMeta:
encoding:
optional: true
dependencies:
whatwg-url: 5.0.0
dev: false
/once/1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
dependencies:
wrappy: 1.0.2
dev: false
/parent-module/1.0.1:
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
engines: {node: '>=6'}
dependencies:
callsites: 3.1.0
dev: false
/parse-json/5.2.0:
resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
engines: {node: '>=8'}
dependencies:
'@babel/code-frame': 7.21.4
error-ex: 1.3.2
json-parse-even-better-errors: 2.3.1
lines-and-columns: 1.2.4
dev: false
/path-type/4.0.0:
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
engines: {node: '>=8'}
dev: false
/pend/1.2.0:
resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
dev: false
/progress/2.0.3:
resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
engines: {node: '>=0.4.0'}
dev: false
/proxy-from-env/1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
dev: false
/pump/3.0.0:
resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
dependencies:
end-of-stream: 1.4.4
once: 1.4.0
dev: false
/puppeteer-core/19.9.1:
resolution: {integrity: sha512-46JGqhqTgYO5DuUMRGUiMCKM/86uHMsMCK7Fw7cbY/p+eCKLIPGVyQyI/E0UcGYa0+OH3dz0ResaDdHxqCgDDw==}
engines: {node: '>=14.14.0'}
peerDependencies:
typescript: '>= 4.7.4'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@puppeteer/browsers': 0.4.1
chromium-bidi: 0.4.6_7yd6ibrwer4fxzjxd6md3toxiy
cross-fetch: 3.1.5
debug: 4.3.4
devtools-protocol: 0.0.1107588
extract-zip: 2.0.1
https-proxy-agent: 5.0.1
proxy-from-env: 1.1.0
tar-fs: 2.1.1
unbzip2-stream: 1.4.3
ws: 8.13.0
transitivePeerDependencies:
- bufferutil
- encoding
- supports-color
- utf-8-validate
dev: false
/puppeteer/19.9.1:
resolution: {integrity: sha512-Ii8yZySNdpPzeKAK6ROFQ+gAi04igoZ0cPsBE1LW9fmzkqQTqbJpEGhJ/5gBS8oVqkQ2CNFA4BskJl75zaWWgA==}
requiresBuild: true
dependencies:
'@puppeteer/browsers': 0.4.1
cosmiconfig: 8.1.3
https-proxy-agent: 5.0.1
progress: 2.0.3
proxy-from-env: 1.1.0
puppeteer-core: 19.9.1
transitivePeerDependencies:
- bufferutil
- encoding
- supports-color
- typescript
- utf-8-validate
dev: false
/readable-stream/3.6.2:
resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
engines: {node: '>= 6'}
dependencies:
inherits: 2.0.4
string_decoder: 1.3.0
util-deprecate: 1.0.2
dev: false
/require-directory/2.1.1:
resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
engines: {node: '>=0.10.0'}
dev: false
/resolve-from/4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
dev: false
/safe-buffer/5.2.1:
resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
dev: false
/string-width/4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'}
dependencies:
emoji-regex: 8.0.0
is-fullwidth-code-point: 3.0.0
strip-ansi: 6.0.1
dev: false
/string_decoder/1.3.0:
resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
dependencies:
safe-buffer: 5.2.1
dev: false
/strip-ansi/6.0.1:
resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
engines: {node: '>=8'}
dependencies:
ansi-regex: 5.0.1
dev: false
/supports-color/5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
dependencies:
has-flag: 3.0.0
dev: false
/tar-fs/2.1.1:
resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
dependencies:
chownr: 1.1.4
mkdirp-classic: 0.5.3
pump: 3.0.0
tar-stream: 2.2.0
dev: false
/tar-stream/2.2.0:
resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
engines: {node: '>=6'}
dependencies:
bl: 4.1.0
end-of-stream: 1.4.4
fs-constants: 1.0.0
inherits: 2.0.4
readable-stream: 3.6.2
dev: false
/through/2.3.8:
resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
dev: false
/tr46/0.0.3:
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
dev: false
/unbzip2-stream/1.4.3:
resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
dependencies:
buffer: 5.7.1
through: 2.3.8
dev: false
/util-deprecate/1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: false
/webidl-conversions/3.0.1:
resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
dev: false
/whatwg-url/5.0.0:
resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
dependencies:
tr46: 0.0.3
webidl-conversions: 3.0.1
dev: false
/wrap-ansi/7.0.0:
resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
engines: {node: '>=10'}
dependencies:
ansi-styles: 4.3.0
string-width: 4.2.3
strip-ansi: 6.0.1
dev: false
/wrappy/1.0.2:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
dev: false
/ws/8.13.0:
resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
engines: {node: '>=10.0.0'}
peerDependencies:
bufferutil: ^4.0.1
utf-8-validate: '>=5.0.2'
peerDependenciesMeta:
bufferutil:
optional: true
utf-8-validate:
optional: true
dev: false
/y18n/5.0.8:
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
engines: {node: '>=10'}
dev: false
/yargs-parser/21.1.1:
resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
engines: {node: '>=12'}
dev: false
/yargs/17.7.1:
resolution: {integrity: sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==}
engines: {node: '>=12'}
dependencies:
cliui: 8.0.1
escalade: 3.1.1
get-caller-file: 2.0.5
require-directory: 2.1.1
string-width: 4.2.3
y18n: 5.0.8
yargs-parser: 21.1.1
dev: false
/yauzl/2.10.0:
resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
dependencies:
buffer-crc32: 0.2.13
fd-slicer: 1.1.0
dev: false
(() => {
const script = document.createElement('script');
// https://unpkg.com/[email protected]/dist/web-vitals.iife.js
script.src = 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.iife.js';
script.onload = () => {
webVitals.onFCP(console.log, { reportSoftNavs: true });
webVitals.onINP(console.log, { reportSoftNavs: true });
// webVitals.onTTFB(console.log, { reportSoftNavs: true });
// webVitals.onLCP(console.log, { reportSoftNavs: true });
// webVitals.onCLS(console.log, { reportSoftNavs: true });
// webVitals.onFID(console.log, { reportSoftNavs: true });
};
document.head.appendChild(script);
})();
var webVitals=function(n){"use strict";var t,e,i,a,o,r=-1,c=function(n){addEventListener("pageshow",(function(t){t.persisted&&(r=t.timeStamp,n(t))}),!0)},u=function(){return window.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},f=function(){var n=u();return n&&n.activationStart||0},d=function(n,t,e,i){var a=u(),o="navigate";return e?o=e:r>=0?o="back-forward-cache":a&&(o=document.prerendering||f()>0?"prerender":document.wasDiscarded?"restore":a.type.replace(/_/g,"-")),{name:n,value:void 0===t?-1:t,rating:"good",delta:0,entries:[],id:"v3-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:o,navigationId:i||1}},s=function(n){return PerformanceObserver.supportedEntryTypes.includes("soft-navigation")&&(null==n?void 0:n.reportSoftNavs)},v=function(n){return n&&1!==n?window.performance&&performance.getEntriesByType&&performance.getEntriesByType("soft-navigation")[n-2]:window.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0]},g=function(n,t,e){var i=s(e);try{if(PerformanceObserver.supportedEntryTypes.includes(n)){var a=new PerformanceObserver((function(n){Promise.resolve().then((function(){t(n.getEntries())}))}));return a.observe(Object.assign({type:n,buffered:!0,includeSoftNavigationObservations:i},e||{})),a}}catch(n){}},l=function(n,t,e,i){var a,o;return function(r){t.value>=0&&(r||i)&&((o=t.value-(a||0))||void 0===a)&&(a=t.value,t.delta=o,t.rating=function(n,t){return n>t[1]?"poor":n>t[0]?"needs-improvement":"good"}(t.value,e),n(t))}},p=function(n){requestAnimationFrame((function(){return requestAnimationFrame((function(){return n()}))}))},h=function(n){var t=function(t){"pagehide"!==t.type&&"hidden"!==document.visibilityState||n(t)};addEventListener("visibilitychange",t,!0),addEventListener("pagehide",t,!0)},m=-1,I=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(n){"hidden"===document.visibilityState&&m>-1&&(m="visibilitychange"===n.type?n.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},C=function(){return m<0&&(m=I(),y(),c((function(){setTimeout((function(){m=I(),y()}),0)}))),{get firstHiddenTime(){return m}}},b=function(n){document.prerendering?addEventListener("prerenderingchange",(function(){return n()}),!0):n()},w=[1800,3e3],L=function(n,t){var e=s(t=t||{});b((function(){var i,a=C(),o=d("FCP"),r=g("paint",(function(c){c.forEach((function(c){if("first-contentful-paint"===c.name){e?(c.navigationId||1)>1&&(p="soft-navigation",h=c.navigationId,o=d("FCP",0,p,h),i=l(n,o,w,t.reportAllChanges)):r.disconnect();var u=0;if(c.navigationId&&1!==c.navigationId){var s=v(c.navigationId),g=(null==s?void 0:s.startTime)||0;u=Math.max(c.startTime-g,0)}else u=Math.max(c.startTime-f(),0);(c.startTime<a.firstHiddenTime||c.navigationId&&c.navigationId>1)&&(o.value=u,o.entries.push(c),o.navigationId=c.navigationId||1,i(!0))}var p,h}))}),t);r&&(i=l(n,o,w,t.reportAllChanges),c((function(e){o=d("FCP",0,"back-forward-cache",o.navigationId),i=l(n,o,w,t.reportAllChanges),p((function(){o.value=performance.now()-e.timeStamp,i(!0)}))})))}))},S=[.1,.25],P=function(n,t){var e,i,a=s(t=t||{}),o=!1;L((e=function(){var e,i=d("CLS",0),r=0,u=[],f=function(a,c){i=d("CLS",0,a,c),e=l(n,i,S,t.reportAllChanges),r=0,o=!1},s=function(n){n.forEach((function(n){if(a&&n.navigationId&&n.navigationId>i.navigationId&&(r>i.value&&(i.value=r,i.entries=u),e(!0),f("soft-navigation",n.navigationId)),!n.hadRecentInput){var t=u[0],o=u[u.length-1];r&&n.startTime-o.startTime<1e3&&n.startTime-t.startTime<5e3?(r+=n.value,u.push(n)):(r=n.value,u=[n])}})),r>i.value&&(i.value=r,i.entries=u,e())},v=g("layout-shift",s,t);v&&(e=l(n,i,S,t.reportAllChanges),h((function(){s(v.takeRecords()),e(!0),o=!0})),c((function(){f("back-forward-cache",i.navigationId),p((function(){return e()}))})),a&&g("soft-navigation",(function(a){a.forEach((function(a){a.navigationId&&a.navigationId>i.navigationId&&(o||e(!0),f("soft-navigation",a.navigationId),e=l(n,i,S,t.reportAllChanges))}))}),t),setTimeout(e,0))},i=!1,function(n){i||(e(n),i=!0)}))},A={passive:!0,capture:!0},F=new Date,k=function(n,a){t||(t=a,e=n,i=new Date,D(removeEventListener),M())},M=function(){if(e>=0&&e<i-F){var n={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+e};a.forEach((function(t){t([n])})),a=[]}},B=function(n){if(n.cancelable){var t=(n.timeStamp>1e12?new Date:performance.now())-n.timeStamp;"pointerdown"==n.type?function(n,t){var e=function(){k(n,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",e,A),removeEventListener("pointercancel",i,A)};addEventListener("pointerup",e,A),addEventListener("pointercancel",i,A)}(t,n):k(t,n)}},D=function(n){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return n(t,B,A)}))},N=[100,300],O=function(n,i){var o=s(i=i||{});b((function(){var r,u=C(),f=d("FID"),s=function(t){t.forEach((function(t){var e,a;o?(t.navigationId||1)>1&&(e="soft-navigation",a=t.navigationId,f=d("FID",0,e,a),r=l(n,f,N,i.reportAllChanges)):v.disconnect(),t.startTime<u.firstHiddenTime&&(f.value=t.processingStart-t.startTime,f.entries.push(t),f.navigationId=t.navigationId||1,r(!0))}))},v=g("first-input",s,i);r=l(n,f,N,i.reportAllChanges),v&&h((function(){s(v.takeRecords()),o||v.disconnect()})),v&&c((function(){var o;f=d("FID",0,"back-forward-cache",f.navigationId),r=l(n,f,N,i.reportAllChanges),a=[],e=-1,t=null,D(addEventListener),o=s,a.push(o),M()}))}))},x=0,R=1/0,H=0,_=1,j=!1,q=function(n){n.forEach((function(n){n.interactionId&&(j&&n.navigationId&&n.navigationId>_&&(_=n.navigationId,x=0,R=1/0,H=0),R=Math.min(R,n.interactionId),H=Math.max(H,n.interactionId),x=H?(H-R)/7+1:0)}))},V=function(){return o?x:performance.interactionCount||0},z=function(n){"interactionCount"in performance||o||(j=n||!1,o=g("event",q,{type:"event",buffered:!0,durationThreshold:0,includeSoftNavigationObservations:n}))},G=[200,500],J=0,K=function(){return V()-J},Q=[],U={},W=function(n){var t=Q[Q.length-1],e=U[n.interactionId];if(e||Q.length<10||n.duration>t.latency){if(e)e.entries.push(n),e.latency=Math.max(e.latency,n.duration);else{var i={id:n.interactionId,latency:n.duration,entries:[n]};U[i.id]=i,Q.push(i)}Q.sort((function(n,t){return t.latency-n.latency})),Q.splice(10).forEach((function(n){delete U[n.id]}))}},X=function(n,t){var e=s(t=t||{}),i=!1;b((function(){z(e);var a,o=d("INP"),r=function(e,r){Q=[],J="soft-navigation"===e?0:V(),o=d("INP",0,e,r),a=l(n,o,G,t.reportAllChanges),i=!1},u=function(){var n,e,i=(e=Math.min(Q.length-1,Math.floor(K()/50)),Q[e]);i&&(i.latency!==o.value||null!==(n=t)&&void 0!==n&&n.reportAllChanges)&&(o.value=i.latency,o.entries=i.entries)},f=function(n){n.forEach((function(n){(e&&n.navigationId&&n.navigationId>o.navigationId&&(i||(u(),o.value>0&&a(!0)),r("soft-navigation",n.navigationId)),n.interactionId&&W(n),"first-input"===n.entryType)&&(!Q.some((function(t){return t.entries.some((function(t){return n.duration===t.duration&&n.startTime===t.startTime}))}))&&W(n))})),u(),a()},s=g("event",f,{durationThreshold:t.durationThreshold||40,opts:t});if(a=l(n,o,G,t.reportAllChanges),s){s.observe({type:"first-input",buffered:!0,includeSoftNavigationObservations:e}),h((function(){f(s.takeRecords()),o.value<0&&K()>0&&(o.value=0,o.entries=[]),a(!0)})),c((function(){r("back-forward-cache",o.navigationId),p((function(){return a()}))}));e&&g("soft-navigation",(function(e){e.forEach((function(e){e.navigationId&&e.navigationId>o.navigationId&&(!i&&o.value>0&&a(!0),r("soft-navigation",e.navigationId),a=l(n,o,G,t.reportAllChanges))}))}),t)}}))},Y=[2500,4e3],Z=function(n,t){var e=!1,i=s(t=t||{});b((function(){var a,o=C(),r=d("LCP"),u=function(i,o){r=d("LCP",0,i,o),a=l(n,r,Y,t.reportAllChanges),e=!1},s=function(n){n.forEach((function(n){if(n){n.navigationId&&n.navigationId>r.navigationId&&(e||a(!0),u("soft-navigation",n.navigationId));var t,i=0;if(1!==n.navigationId&&n.navigationId)i=Math.max(n.startTime-((null===(t=v(n.navigationId))||void 0===t?void 0:t.startTime)||0),0);else i=Math.max(n.startTime-f(),0);n.startTime<o.firstHiddenTime&&(r.value=i,r.entries=[n],r.navigationId=n.navigationId||1,a())}}))},m=function(){e||(s(I.takeRecords()),i||I.disconnect(),e=!0,a(!0))},I=g("largest-contentful-paint",s,t);if(I){a=l(n,r,Y,t.reportAllChanges),["keydown","click"].forEach((function(n){addEventListener(n,m,!0)})),h(m),c((function(n){u("back-forward-cache",r.navigationId),p((function(){r.value=performance.now()-n.timeStamp,e=!0,a(!0)}))}));i&&g("soft-navigation",(function(n){n.forEach((function(n){n.navigationId&&n.navigationId>r.navigationId&&(e||a(!0),u("soft-navigation",n.navigationId))}))}),t)}}))},$=[800,1800],nn=function n(t){document.prerendering?b((function(){return n(t)})):"complete"!==document.readyState?addEventListener("load",(function(){return n(t)}),!0):setTimeout(t,0)},tn=function(n,t){var e=s(t=t||{}),i=d("TTFB"),a=l(n,i,$,t.reportAllChanges);nn((function(){var o=u();if(o){var r=o.responseStart;if(r<=0||r>performance.now())return;i.value=Math.max(r-f(),0),i.entries=[o],a(!0),c((function(){i=d("TTFB",0,"back-forward-cache",i.navigationId),(a=l(n,i,$,t.reportAllChanges))(!0)}));e&&g("soft-navigation",(function(e){e.forEach((function(e){e.navigationId&&(i=d("TTFB",0,"soft-navigation",e.navigationId),(a=l(n,i,$,t.reportAllChanges))(!0))}))}),t)}}))};return n.CLSThresholds=S,n.FCPThresholds=w,n.FIDThresholds=N,n.INPThresholds=G,n.LCPThresholds=Y,n.TTFBThresholds=$,n.getCLS=P,n.getFCP=L,n.getFID=O,n.getINP=X,n.getLCP=Z,n.getTTFB=tn,n.onCLS=P,n.onFCP=L,n.onFID=O,n.onINP=X,n.onLCP=Z,n.onTTFB=tn,Object.defineProperty(n,"__esModule",{value:!0}),n}({});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment