さまざまなネットワーク（だけでなく）の条件でのWebサイトの読み込み速度の変化を測定します。今より便利

こんにちは。過去数ヶ月間行ってきた私のプロジェクトを共有したいと思います。これは、さまざまなネットワーク（だけでなく）環境でWebサイトのパフォーマンスメトリックを便利に収集するように設計されたオープンソースのコマンドラインツールです。

すでにslow3g、fast3g、および4gネットワークのエミュレーションを実装し、ブラウザキャッシュの有無にかかわらずテストし、プロセッサの速度低下のエミュレーションを行いました。最初で最大のレンダリングのイベント、レイアウトの構築とスタイルの再計算に費やされた時間、FCPの前にロードされたリソースのサイズ、およびその他の有用なメトリックが収集されます。

Chrome 85に表示される新しいCSSルールの詳細、小さなコード、および少しに興味がある場合は、私に従ってください。

何のために？

新しい楽器が登場したときの一番の質問は「なぜ？」です。（「できるから」以外に）どのような問題を解決しようとしていますか？

それでは、問題から始めましょう。5月、React.JSで1つのアプリケーションの読み込みを最適化しようとしていたのですが、正直、少し疲れていました。なんで疲れたの？私が必要としたすべてのくしゃみのために：

• ネットワークパラメータを選択します（たとえば、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. ( ),