Wir messen Änderungen der Ladegeschwindigkeit von Websites unter verschiedenen Netzwerkbedingungen (und nicht nur). Bequemer jetzt

Hallo. Ich möchte mein Projekt teilen, das ich in den letzten Monaten gemacht habe. Es handelt sich um ein Open-Source-Befehlszeilentool, mit dem die Leistungsmetriken von Websites in verschiedenen Netzwerkumgebungen (und nicht nur) bequem erfasst werden können.

Bereits implementierte Emulation von Slow3G-, Fast3G- und 4G-Netzwerken, Testen mit oder ohne Browser-Caching, Emulation der Prozessorverlangsamung. Die Ereignisse des ersten und größten Renderings, die Zeit, die für die Erstellung des Layouts und die Neuberechnung der Stile aufgewendet wurde, die Größe der vor FCP geladenen Ressourcen und andere nützliche Metriken werden erfasst.

Wenn Sie an Details, ein wenig Code und ein wenig über die neue CSS-Regel interessiert sind, die in Chrome 85 angezeigt wird, folgen Sie mir bitte!

Wozu?

Wenn ein neues Instrument erscheint, lautet die Frage Nummer eins "Warum?" Welches Problem versuchen Sie zu lösen (außer "weil ich kann")?

Beginnen wir also mit dem Problem. Es war Mai, ich habe versucht, das Laden einer Anwendung in React.JS zu optimieren, und um ehrlich zu sein, war ich etwas müde. Warum bist du müde? Denn für jedes Niesen brauchte ich:

• Wählen Sie Netzwerkparameter (zum Beispiel fast-3g).
• Starten Sie die Profilerstellung
• ,

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