我们测量各种网络（不仅是网络）条件下网站加载速度的变化。现在更方便

你好。我想分享我在过去几个月中一直在做的项目。它是一种开放源代码命令行工具，旨在轻松收集各种网络（不仅是网络）环境中的网站性能指标。

已经实现了slow3g，fast3g和4g网络的仿真，在有或没有浏览器缓存的情况下进行测试，对处理器速度进行仿真。第一个和最大渲染的事件，花费在构建布局和重新计算样式上的时间，在收集FCP之前加载的资源大小以及其他有用的度量。

如果您对详细信息，一些代码以及对将在Chrome 85中显示的新CSS规则感兴趣，请关注我！

做什么的？

当出现新乐器时，第一个问题是“为什么？” 您正在尝试解决什么问题（除了“因为我可以”以外）？

因此，让我们从问题开始。是五月，我正在尝试优化React.JS中一个应用程序的加载，老实说，我有点累了。你为什么累？因为我需要每次打喷嚏：

• 选择网络参数（例如fast-3g）
• 开始分析
• ,

. , ? 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. ( ),