نحن نقيس التغييرات في سرعة تحميل الموقع في ظروف الشبكة المختلفة (وليس فقط). أكثر ملاءمة الآن

مرحبا. أرغب في مشاركة مشروعي الذي كنت أقوم به في الأشهر القليلة الماضية. إنها أداة سطر أوامر مفتوحة المصدر مصممة لتجميع مقاييس أداء موقع الويب بسهولة في بيئات شبكات مختلفة (وليس فقط).

نفذت بالفعل محاكاة لشبكات slow3g و fast3g و 4g ، مع الاختبار أو بدون التخزين المؤقت للمتصفح ، ومحاكاة تباطؤ المعالج. يتم جمع أحداث العرض الأول والأكبر ، والوقت المستغرق في إنشاء التخطيط وإعادة حساب الأنماط ، وحجم الموارد التي تم تحميلها قبل FCP ، والمقاييس المفيدة الأخرى.

إذا كنت مهتمًا بالتفاصيل ، وقليل من التعليمات البرمجية ، وقليلًا عن قاعدة CSS الجديدة القادمة في Chrome 85 ، فيرجى متابعي!

لاجل ماذا؟

عندما تظهر أداة جديدة ، فإن السؤال الأول هو "لماذا؟" ما المشكلة التي تحاول حلها (بخلاف "لأنني أستطيع")؟

لذلك لنبدأ بالمشكلة. في شهر مايو ، كنت أحاول تحسين تحميل تطبيق واحد في 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. ( ),