We measure changes in website loading speed in various network (and not only) conditions. More convenient now

Hello. I would like to share my project that I have been doing in the last few months. It is an open-source command line tool designed to easily collect website performance metrics in various network (and not only) environments.

Already implemented emulation of slow3g, fast3g, and 4g networks, testing with or without browser caching, emulation of processor slowdown. The events of the first and largest rendering, the time spent building the layout and recalculating the styles, the size of the resources loaded before FCP, and other useful metrics are collected.

If you are interested in the details, a little code and a little bit about the new CSS rule that will appear in Chrome 85, please follow me!

What for?

When a new instrument appears, the number one question is "Why?" What problem are you trying to solve (other than "because I can")?

So let's start with the problem. It was May, I was trying to optimize the loading of one application in React.JS and, to be honest, I was a little tired. Why are you tired? Because for every sneeze I needed:

• Select network parameters (for example fast-3g)
• Start profiling
• ,

. , ? 12 . … , , - , , , :

, , , . , , , . Perfrunner , ( ) .

?

( "--"), Perfrunner

• . : online/regular4g/fast3g/hspa/slow3g. , , 100% . - .
• . . . .
• . , . - React. , Angular .
• . , ( ), Perfrunner 3 . , --runs. requiredPositiveInteger, , , .

, , Perfrunner ( , ) . :

npx drag13.io --network slow-3g fast-3g hspa regular-4g online --cache true false

Perfrunner 24 , , HTML . , .

. :

• first-contentful-paint, largest-contentful-pain, dom-interactive -. - c .
• layout duration, script duration, recalculate-style-duration. ( ) .
• , FCP. .
• , .
• , .

():

jQuery . , CSS index.html SPA , preload prefetch, lazy-loading . 100 , , , slow-3g. , — - , , localhost.

, , .

?

. TypeScript, Lerna 3 – CLI, Reporters Core

CLI - command-line-args. , , slow3g:

export const Slow3g: NetworkSetup = {
  downloadThroughput: (0.4 * 1024 * 1024) / 8,
  uploadThroughput: (0.4 * 1024 * 1024) / 8,
  latency: 2000,
  name: "slow3g",
};

Reporters . HTML, JSON CSV . HTML , --reporter JSON, CSV , :

//reporer.js
module.exports = (outputFolder, data, args) =>
  console.log(outputFolder, JSON.stringify(data), args);

npx perfrunner drag13@io --reporter "./reporter.js"

HTML Parcel Mustache. , c Parcel , . TypeScript, . ( ) parcel-plugin-inline-source. ( , Parcel ` "), - . Chart.JS, , , .

Core. Puppeter , . , , ( ):

import puppeteer, { Browser, Page } from "puppeteer";

const browser = await puppeteer.launch({ headless: true, timeout: 60000 });
const page = await browser.newPage();

await page.setCacheEnabled(false);
await pageSession.send("Network.setCacheDisabled", { cacheDisabled: true });
await pageSession.send("Network.enable");
await pageSession.send("Network.emulateNetworkConditions", {
  latency: 20,
  downloadThroughput: 500000,
  uploadThroughput: 50000,
  offline: false,
});
await pageSession.send("Emulation.setCPUThrottlingRate", { rate: 4 });
await pageSession.send("Performance.enable");

await page.goto(url.href, { waitUntil: "networkidle0" });
const metrics = await page.metrics();
const entries = await page.evaluate(() =>
  JSON.stringify(performance.getEntries())
);
return { metrics, entries };

, , , .

, , largest-contentfull-paint performance.getEntries(), . . , , JavaScript- (, , ), , , . , , , . . (mimetype) ( , ).

, , . , , .

«» , . , , , , ( ). TTFB, Stalled , 1200-1500ms. Proxy, - Windows . , wtf/sec .

chai + mocha preversion prepublish husky. , hasky lint-staged, prepush prettier. CI/CD — Travis CI.

Content-Visiblity

- . , , Chrome 85 , , css — content-visibility. , , , , . , — . , .

Canary Chrome Puppeteer, , , headless . Perfrunner .

npx perfrunner "https://drag13.io" --network slow-3g fast-3g regular-4g --cache true false --executable-path" "C:\Users\ACCOUNT_NAME\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --no-headless

:

, 90ms 100ms 700 ( ) CoreI7 . .

, . . Perfrunner- Puppeter . — . , Perfrunner --chrome-args, --ignore-default-args , , --executable-path .

().

. jQuery critical CSS . , , .

, , . readme. . — perfrunner.config , , , commitizen.

, , , . .

P.S. C veri-ivanova raharrison .

P.P.S. ( ),