Nous mesurons les changements de vitesse de chargement du site Web dans diverses conditions de réseau (et pas seulement). Plus pratique maintenant

Bonjour. Je voudrais partager mon projet que j'ai réalisé ces derniers mois. Il s'agit d'un outil de ligne de commande open source conçu pour collecter facilement des mesures de performance de site Web dans divers environnements de réseau (et pas seulement).

Émulation déjà implémentée des réseaux slow3g, fast3g et 4g, test avec ou sans mise en cache du navigateur, émulation du ralentissement du processeur. Les événements du premier et du plus grand rendu, le temps passé à créer la mise en page et à recalculer les styles, la taille des ressources chargées avant FCP et d'autres métriques utiles sont collectés.

Si vous êtes intéressé par les détails, un peu de code et un peu de la nouvelle règle CSS qui apparaîtra dans Chrome 85, suivez-moi!

Pourquoi?

Lorsqu'un nouvel instrument apparaît, la question numéro un est "Pourquoi?" Quel problème essayez-vous de résoudre (autre que «parce que je peux»)?

Commençons donc par le problème. C'était en mai, j'essayais d'optimiser le chargement d'une application dans React.JS et, pour être honnête, j'étais un peu fatigué. Pourquoi êtes-vous fatigué? Parce que pour chaque éternuement dont j'avais besoin:

• Sélectionnez les paramètres réseau (par exemple fast-3g)
• Commencer le profilage
• ,

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