Olá. Gostaria de compartilhar meu projeto que venho realizando nos últimos meses. É uma ferramenta de linha de comando de código aberto projetada para coletar facilmente métricas de desempenho de sites em vários ambientes de rede (e não apenas).
Emulação já implementada de redes slow3g, fast3g e 4g, teste com ou sem cache de navegador, emulação de lentidão de processador. Os eventos da primeira e maior renderização, o tempo gasto construindo o layout e recalculando os estilos, o tamanho dos recursos carregados antes do FCP e outras métricas úteis serem coletadas.
Se você estiver interessado nos detalhes, um pouco de código e um pouco sobre a nova regra CSS que aparecerá no Chrome 85, siga-me!
Pelo que?
Quando um novo instrumento aparece, a pergunta número um é "Por quê?" Que problema você está tentando resolver (além de "porque eu posso")?
Então, vamos começar com o problema. Era maio, estava tentando otimizar o carregamento de um aplicativo no React.JS e, para ser sincero, estava um pouco cansado. Porque você está cansado? Porque para cada espirro eu precisava:
- Selecione os parâmetros de rede (por exemplo fast-3g)
- Comece a traçar o perfil
- ,
. , ? 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
:
Network | Cache | FMP before (ms) | FMP after (ms) | Diff (ms) |
---|---|---|---|---|
slow-3g | false | 4358 | 4267 | 91 |
slow-3g | true | 2953 | 2857 | 96 |
fast-3g | false | 421 | 329 | 92 |
fast-3g | true | 221 | 122 | 99 |
regular-4g | false | 316 | 223 | 93 |
regular-4g | true | 221 | 123 | 98 |
, 90ms 100ms 700 ( ) CoreI7 . .
, . . Perfrunner- Puppeter . — . , Perfrunner --chrome-args
, --ignore-default-args
, , --executable-path
.
().
. jQuery critical CSS . , , .
, , . readme. . — perfrunner.config , , , commitizen.
, , , . .