? ??????? Node.js?? ??? ??? ???? ?? ?? ?? Google Lighthouse Audits? ???? JSON ???? ?? ? ???? ?? ? ?? ? ???? ???? ???? ?? ? ??? ???? ? ? ??? ???? ??? ???? ?? ??????.

?? ??? Google Lighthouse? ????? ???? ??? ??? ?? ??? ? ????? ????? ?? ?? ??? ? ? ??? ????.

??? ??, ???…

Google Lighthouse? ??????

Google Lighthouse? ? ???? ???? ???? ??? ??? ??? ??? ?? ?? ? ?????. ?? ?? ?? ?? ???? ? ???? ??? ?? ? ? ???, ?? ?? ??? ??? ?? ? ? ????. ??? ??? ????.

• ??
• ???
• ?? ??
• ?
• ?????? ? ?

??? ???? ? ???? ??? ?? ?? ???? ?????. ??? ?? ??? ???? ?????? ?? ??? ?? ?? ?????????.

??? ?? ???? ?????.

?? ?? ?? ? ? ?? ???? ?? ???? ?? ??? ??? ? ?? ??? 0-100 ??? ???? ??? ??? ????? ????.

?? ?? ???? ?? ???? ? ???? ??? ??? ?? ? ????? ??? ?? ??? ? ??? ?? ? ??? ? ???? ??? ? ????.

?? ??, ?? ?? ??? ??? 50 ?? ???? ???? ???? ??? ? ?? ? ? ?? ??? ? ??? ???? ???? ? ??? ?? ? ? ????? Heather?? ??? ???? ?? ?? ??? ?? ?????.

??? ???? ??? Simon? ?? ?? ?? ? ?? ??? ???? ??? ????? ???? ?? ?? ???, ? ??? ?? ??? ????? ??? ??? ?? ?? ???? ? ? ????? ? ?? ??? ?? ?? ????.

Chrome ?? ?? ??? Edge? ??? DevTools? ???? ?? ?? ?? ??? ??? ? ????. ??? ??? ????.

?? Pagespeed Insights ?? WebPagetest? ?? ???? ?? ??? ?? ????? Lighthouse ??? ??? ?? ????.

??? ??? ??? Lighthouse? Node ??? ? ??? ????.?? ?? ????? ???? ??? ???? ? ?? ???? ??, ?? ? ??? ? ????.

??? ?? ???.

??

??, ?? ??? ?? ??? node.js? ?????. ???? ???? ?? ??? ????. Homebrew Package Manager? ????? ???? ?? Node.js ? ????? ?? ???? ???? ? ?? ????.? ???? Node.js v10.17.0? ????? ?????? ?? ? ? ?? ?? ? ???? ????? ? ?????.

?? Lighthouse ??? ???? ????? Chrome ??? ?????.

???? ????? ?? ? ????? ??? ?? ???? CD? CD? ?????. ?? ?? npm init? ???? package.json ??? ??? ?????. ? ???? ??? ?? ? ??? ??? ? ?? ?? ?? ?? ?? Enter ?? ???? ???? ?? ????.

?? ???? ?????? ? ??? ??? ???. ?? ? lh.js? ????? ??? ??? ?? ???? ?????. ???? ??? ?? ?? JavaScript? ?????. ??? ??? ????? ?? ??? Console.log ?? ??????.

 Console.log ( 'Hello World');

?? ?? ???? CWD (?? ?? ????)? ???? ?????? Node LH.JS? ???? ? ?? ??? ??? ???? ??????.

??? ? ? ?????? :

 $ ?? lh.js
????? ??

??? ?? ?? ?? ??? ????? ???? ??? ???? ????? ????.

??? ?? ??? ??? ? ????.

node.js? ??? ?? ?

????? ? ?? ??? ? ?? ??? ?????.

 NPM Lighthouse ?? -Save-Dev

??? ???? ?? ??? ???? node_modules ????? ????. git? ???? ?? ?????? ?? ??? ?? .gitignore ??? ???? ????.

LH.JS??? ??? ??? ??? ???? Lighthouse ??? ??? ???? ??? ? ??????. ??? :

 Const Lighthouse = ?? ?? ( 'Lighthouse');

????? Lighthouse? ??? ? ?? ? Chrome-Launcher?? ??? ?????? Node? Chrome ??? ???? ??? ??? ? ????.

 Const Lighthouse = ?? ?? ( 'Lighthouse');
const chromelauncher = ?? ?? ( 'Chrome-Launcher');

??? ? ??? ??? ? ???????? ??? ?? ?? ??? ?? ? ?? ???? ??? ???? ??? ????? ???????.

URL? ?? ??? ????? ? ??? ????. Node.js? ?? ??? ??? ????? ??? ??? ????? ???? ?? ??? ??? ???? ES6 ??? ???? ??? ? ????.

 const launchchrome = (url) => {

}

? ?? ??? ?? ???? ? ?? ??? ?? ??? ??? ???? Chrome? ?? URL ?? ??? ?? ???? ??? ???? ????.

?? () ???? STARTINES ??? ?????? ?? ? ? ????.

 const launchchrome = url => {
  Chromelauncher.launch ({{
    starithurl : url
  });
};

?? ??? ???? ??? URL? ???? ?? ????? ??? ? Chrome? URL?? ????.

 LaunchChrome ( 'https://www.lukeharrison.dev');

?? ??? ??? ??? ???? ? ?? ??? ??? ??? ?? ? ??? ??? ? ? ????.

?? ??, ?? ??? ???? Chrome? ?? ??? ??? ?? ? ?? Kill () ???? ???? 3 ? ?? Chrome? ?? ? ????.

 const launchchrome = url => {
  Chromelauncher
    .????({
      starithurl : url
    })
    . ??? (chrome => {
      Console.log (Chrome);
      settimeout (() => chrome.kill (), 3000);
    });
};

LaunchChrome ( "https://www.lukeharrison.dev");

?? ??? Chrome? ?? ???? Lighthouse? ?? ???.

????? ???? ??? ?????

??, LaunchChrome () ??? ?? ??? ? ??? ??? ??????. ??? ??? ????? ??? ?? ?????? ?? ??? ?? ??? ??? ? ????.

?? ???? ???? ????? ?? ?? ? ?????? ????? Lighthouse? ??? URL ??? ?? ??? ? ???? ??? ??????.

 const uncl uncondromeandrunlighthouse = url => {
  Chromelauncher
    .????({
      starithurl : url
    })
    . ??? (chrome => {
      const opts = {
        ?? : Chrome.port
      };
      ?? (URL, OPTS);
    });
};

LaunchChromeAndrunlighthouse ( "https://www.lukeharrison.dev");

Lighthouse ????? Chrome ???? ?? ????? URL? ?? ??? ???????.

??? ????? ????? ???? ??? ?????.

 (Node : 47714) UnhandledPromisere deceditewarning : ?? : ??? ??? ?? ?? ?? ???? ? ????.

? ??? ????? Chrome Launcher?? SarthingUrl ??? ???? Lighthouse? URL ?????? ???? ???????.

 const uncl uncondromeandrunlighthouse = url => {
  Chromelauncher.launch (). ?? ?? (Chrome => {
    const opts = {
      ?? : Chrome.port
    };
    ?? (URL, OPTS);
  });
};

? ??? ????? ???? ?????? ? ????. ??? ???? ?? ??? ??? ?????? ???? ?? ?????? ??? Chrome ????? ??? ????? ??? ????.

???? Lighthouse () ??? ??? ?? ??? ??? ? ??? ??? ?????.

??? ?? ?? ?? ??? ??? ??? ?? ? ??? JSON ??? ???? ?????.

 const uncl uncondromeandrunlighthouse = url => {
  Chromelauncher.launch (). ?? ?? (Chrome => {
    const opts = {
      ?? : Chrome.port
    };
    ?? (URL, OPTS).
      Chrome.kill ();
      Console.log (results.report);
    });
  });
};

??? ??? ??? ???? ?? ?? ??? ???? ?? ??? ???? Lighthouse Report Viewer? ????? ??? ?? ??? ?? ???? ???? ?????.

? ???? ??? ?? ???? ?? ??? ?? ???? ?? ?????. ?? ?? ??? JavaScript? ???? ????? ???? ?? ??? ???? ?? ? ? ??????.

 Const Lighthouse = ?? ?? ( "Lighthouse");
const chromelauncher = ?? ?? ( "Chrome-Launcher");

const uncl uncondromeandrunlighthouse = url => {
  chromelauncher.launch (). ?? ?? (chrome => {
    const opts = {
      ?? : Chrome.port
    };
    ?? ?? (URL, OPTS).
      chrome.kill (). ?? ?? (() => results.report);
    });
  });
};

??? lainkchromeandrunlighthouse ( "https://www.lukeharrison.dev"). (results => {
  Console.log (??);
});

??? ?? ?? ? ??? ??? ??? ?? ?? ? ??? ? ?? ? ? ??? ????. ?? ?? ?? ??? URL? ??? ? ??? ??? ?????.

?? ? ??? ???? ? ???? ???? Yargs?? ???? ?? ? ????.

 NPM ??-?? ?? yargs

?? ?? ?? ??? ? ??? ?? ???? ???? ?? ????. ???? ArgV ?? ? ?????.

 Const Lighthouse = ?? ?? ( 'Lighthouse');
const chromelauncher = ?? ?? ( 'Chrome-Launcher');
const argv = ?? ( 'yargs'). argv;

??? ??? ??? ?? ????? ?? ? ??? ??????? ?? ?????.

 ?? lh.js --url https://www.google.co.uk

… ?? ?? ?? ????? ??? ??? ? ? ????.

 const url = argv.url // https://www.google.co.uk

????? ???? ?? ? URL ??? ??? URL ?? ??? ??? ???. ??? ???? ?? ?? IF ? ? ?? ???? ?? ??? ???? ???? ?? ?????.

 if (argv.url) {
  LaunchChromeAndrunlighthouse (argv.url). (results => {
    Console.log (??);
  });
} ? ?? {
  "??? ??? URL? ???? ?????";
}

??! Chrome? ???? JSON ??? ???? ???? ???? ?? ??? ???? ?? ??? ???? ??? ????.

?? ?? ???

??? ???? ???? ?? ???? ?? ?? ? ?? ??? ???? ??? ?? ??? ?? ????? ????. ???? ?? ?????? ??? ???? ? ???? ?? JSON ??? ?????.

?? ? ???? ???? ???? ???? ???? ?? ??? ??? ?? ?? ? ????.

• Lukeharrison.dev
  • 2020-01-31T18 : 18 : 12.648z.json
  • 2020-01-31T19 : 10 : 24.110z.json
• CNN.com
  • 2020-01-14T22 : 15 : 10.396z.json
• lh.js

???? ??? ???? ?? ? ??/??? ???? ?? ???? ??? ?????. ?? ? ?? ??? ?? ??? ???? ??? ???? ?? ???? ? ??? ? ????.

Windows?? ??? ??? ??? ? ?? ??? ????. ?? (:)? ?? ??? ??? ? ?????. ? ??? ???? ?? ?? ?? (_)?? ????? ???? ??? ?? ??? ??? ????.

• 2020-01-31T18_18_12.648Z.JSON

???? ??

??, ???? ??? ??? ? ??? ?? ? URL ??? ???????.

???? www? ???? ? ??? ?? ?????. ??? ?? ?? ?? ? ????? ???? ??? ??????? (? : www.foo.com/bar). ???? ???? ??? ???? ?? ?????.

? URL? ?? ???? ?? ??? ??? ?????. ????? https://www.foo.com/bar?? ??? ???? ???? ?? ? ?? ???? ??? foo.com_bar???.

URL??? ?? ?????? ?? URL??? ?? Node.js ??? ?????. ??? ?? ???? ????? ??? ? ??? thepackage.json? ???? ??? NPM? ?? ??? ??????.

 Const Lighthouse = ?? ?? ( 'Lighthouse');
const chromelauncher = ?? ?? ( 'Chrome-Launcher');
const argv = ?? ( 'yargs'). argv;
const url = ?? ?? ( 'url');

???? ? URL ??? ??????? ? ??? ???.

 if (argv.url) {
  const urlobj = new URL (argv.url);

  LaunchChromeAndrunlighthouse (argv.url). (results => {
    Console.log (??);
  });
}

Urlobj? ??? ????? ??? ??? ??? URL ???? ?? ?????.

 $ node lh.js --url https://www.foo.com/bar
url {
  href : 'https://www.foo.com/bar',
  ??? : 'https://www.foo.com',
  ???? : 'https :',
  ??? ?? : '',
  ????: '',
  ??? : 'www.foo.com',
  ??? ?? : 'www.foo.com',
  ?? : '',
  PathName : '/bar',
  ??: '',
  SearchParams : urlsearchparams {},
  ?? : ''
}

Dirname??? ? ??? ???? URL? ??? ????? String Replace () ???? ???? https ???? ??? www? ??????.

 const urlobj = new URL (argv.url);
dirname = urlobj.host.replace ( 'www.', '');

??? let here? ?????, Const? ?? ? ?? ? ? ????. URL? PathName? ??? ???? ??? ???? ??? ????????? ??? ?????????. ??? ?? ?? ???? ?? ? ? ??? ??? ????.

 const urlobj = new URL (argv.url);
dirname = urlobj.host.replace ( "www.", "");
if (urlobj.pathname! == "/") {
  dirname = dirname urlobj.pathname.replace (/\ // g, "_");
}

?? ???? ??? ?? ? ????. ?? FS ( "?? ???"? ?? ??)?? ?? ?? Node.js ??? ???? ?? ? ? ????.

 Const Lighthouse = ?? ?? ( 'Lighthouse');
const chromelauncher = ?? ?? ( 'Chrome-Launcher');
const argv = ?? ( 'yargs'). argv;
const url = ?? ?? ( 'url');
const fs = ?? ?? ( 'fs');

mkdir () ???? ???? ????? ?? ? ???, ?? Node.js? ??? ?? ? ???? ????? ?? ????? ???? ?? ensistSync () ???? ???????.

 const urlobj = new URL (argv.url);
dirname = urlobj.host.replace ( "www.", "");
if (urlobj.pathname! == "/") {
  dirname = dirname urlobj.pathname.replace (/\ // g, "_");
}
if (! fs.existsSync (dirname)) {
  fs.mkdirsync (dirname);
}

???? ????? ????? ? ????? ?????. URL ??? https://www.bbc.co.uk/news? ???? bbc.co.uk_news?? ????? ?? ? ????.

??? ??

LaunchChromeAndrunLighThouse ()? ????? ?? ??? ??? ???? ???? ???? ????????. FS Module? writeFile () ???? ???? ?? ? ? ????.

 LaunchChromeAndrunlighthouse (argv.url). (results => {
  fs.writefile ( "report.json", results, err => {
    (err)? ???;
  });
});

? ?? ?? ??? ?? ??? ????, ? ??? ??? ???? ? ??? ?? ???? ?? ??? ???? ?? ??? ???? ?????. ?? ?? ?? ?? ??? JSON ??? ?? ? report.json??? ? ??? ?????.

??? ??? ?? ???? ?? ???? ???? ??? ????? ??????. ??? ?????.

 LaunchChromeAndrunlighthouse (argv.url). (results => {
  fs.writefile (`$ {dirname}/report.json`, ??, err => {
    (err)? ???;
  });
});

??? ???? ?? ? ??? ?? ???? ??? ? ???????. ???? ??? ????? ??? ???? ???? FetchTime ???? ?????.

??? ?? (:) ?? (_)? ?? ??? ??????? ?? ???? Windows ?? ???? ? ?????.

 LaunchChromeAndrunlighthouse (argv.url). (results => {
  fs.writefile (
    `$ {dirname}/$ {results [ "fetchtime"]. Replace (/:/g, "_")}.
    ??,
    err => {
      (err)? ???;
    }
  );
});

timestamped.json filename ?? ?? ??? ????? ??? ??? ??? ?? ? ? ????.

 UnhandledPromisereEdugeWarning : TypeError : ???? ?? ??? ?? ? ????

Lighthouse? ?? JavaScript? ?? ? ??? ??? ?? JSON ???? ???? ???? ?? ??? ?? ?? ?????.

????, JSON? ?? ?? ???? ??, ??? Lighthouse?? ???? ?? JavaScript ??? ????? ??? ? ????.

?? ?? ???????.

 chrome.kill (). ?? ?? (() => results.report);

…??:

 chrome.kill (). ?? ?? (() => results.lhr);

?? ????? ?? ???? ??? ??? ???? ?????. ??? ?? ???? ????? ? ???? ...

 [?? ??]

??? ?? ??? ??? ?? ??? ??? ?? ? ?????. ??? ?? JSON ??? ???? ?? JavaScript ??? ?????????.

???? ?????. ? ??? ??? ?? ????? ??? ? ??? ???? ????? ?? Lighthouse?? ? ?? ??? ?? ?? ? ? ????.

 ?? ?? (URL, OPTS).
  chrome.kill (). ?? ?? (() => {??
    ?? {
      JS : ?? .LHR,
      JSON : ??.??
    };
  });
});

?? ?? writefile ????? ???? ??? ? ????.

 fs.writefile (
  `$ {dirname}/$ {results.js [ "fetchtime"]. choply (/:/g, "_"). json`, json`,
  results.json,
  err => {
    (err)? ???;
  }
);

??! Lighthouse Audit? ???? ??? ??? ?? ? ??? URL? ??? ? ????? ?? ? ?? ??? ?? ????? ??? ???? ???????.

?? ???? ?? ?? ? ????? ???? ??? ??? ?? ???? ???? ??? ???? ?? ????.

?? ??? ??

???? ?? ?? ?? ??? ????? ???? ???? ?? ??? ???? ??? ???? ???? ???? ??? ?? ?? ? ? ????. ?? ??? ??? ?? ??? ?? ??? ??? ????.

1. ?? ??? ???? ??? ? ???? ?? ?? ???? ?? ???? ?? ???? ??? ???? ?? ?? ???? ?? ?? ??? ??????.
2. ?? ???? ?? ??? ?? ???? ?? ? ???? ? ? ???? ? ???? ?? ?? ???? ??? ? ??????.

???? ?? ??? ???????? ??? ?? ???? ??? ?? ? ?? ?? ?? ?????. ??? ? ???? ??????? ? ??? ?? ???? ?????.

?? Lighthouse? ??? ?? ??? ????? ??? ??? ??? ??? ??? ?????. ??? ??? ????.

• ? ????? - ? ?????? ??? ??? ??? ??? ??? ?????.
• ? ?? ?? - ?? ??? 50ms? ?? ? ? FCP? ??? ?? ??? ?? ??? ??? ?? ?? ?????.
• ?? ?? ?? ?? - ?? ?? ?? ??? ?? ?? 5s ????? ?? ?? ?? ?? ?? ??? ??? ???? ? ??? ??? ???? ????. ?? ??? 50ms?? ??? ???? ?? ? ?? ??? ?? ? ? ????.

??? ??? ??? ??? ???????? ?? ? ??? ???? ???? ??? ??? ?? ??? ??? ????? ???? ??? ?????? ?????.

?? ??? ???? ?? ? ???? ???? ??? ???? ?? ?? ???? ?? ?????.

???? ??? ??????.

?? ???? ??? ???? ??????

?? ?? ??? ???? LaunchChromeAndrunLighThouse () ?? ?? ????? comparePorports ()?? ??? ??? ??? ???????. ??? ??? ?? ? ? ?? ???? ???? ?? ? ?? ?? ??? ?????.

?? ?? ???? ? ????? ??? ?? ???? ???? ???? ???? ??? ?????.

 const compraleReports = (from, to) => {
  Console.log ([ "FinalUrl"] "" "?? ["FetchTime "]);
  console.log ([ "finalUrl"] ""to [ "fetchTime"]);
};

? ??? ??? ???? ??? ?? ????? ??? ???? ??? LaunchChromeAndrunLighThouse ()? ??? ?? ??????.

?? ??, ????? 30 ?? ?????? ?? ?? ??? ???? ???? ??? ???? ??? ???? ??? ?? ???? ???????. ????, ??? ?? ?? ???? ???? ?? ???? ????? ???? ??? ??? ?? ?? ?? ?????.

?? ?? ???? ???????. ? ????? ???? ?? Glob?? ??? ???? ???? ??? ?? ? ? ?? ??? ?????. ??? ?? ???? ????? ?? ? ????? ???? ??? ? ?? ??? ??? ?????.

?? ????? ??????.

 NPM ?? glob-save-dev

?? ?? ??? ?? ???? ?? ???? ?????.

 Const Lighthouse = ?? ?? ( 'Lighthouse');
const chromelauncher = ?? ?? ( 'Chrome-Launcher');
const argv = ?? ( 'yargs'). argv;
const url = ?? ?? ( 'url');
const fs = ?? ?? ( 'fs');
Const Glob = ?? ?? ( 'glob');

??? ?????? ?? ???? ???? ?? Glob? ???? ?? Dirname ??? ??? ?? ????. ?? ???? ??? ??? ? ??? JavaScript ??? ????? ??? ???? SYNC ??? True? ???? ?? ?????.

 LaunchChromeAndrunlighthouse (argv.url). (results => {
  const prevreports = glob (`$ {dirname}/*. json`, {
    ??? : true
  });

  // et al

});

? ????? ??? ??? ?????. ??? ??? ????? ??? ????.

• Lukeharrison.dev
  • 2020-01-31T10_18_12.648Z.JSON
  • 2020-01-31T10_18_24.110Z.JSON

… ?? ?? ?? ??? ??? ????.

 [? ?
 'Lukeharrison.dev/2020-01-31T10_18_12.648Z.json',
 'Lukeharrison.dev/2020-01-31T10_18_24.110Z.json'
]]

?? ???? ???? ???? ??? ?? ? ? ????? ??? ?? ??? ???? ???????.

 const prevreports = glob (`$ {dirname}/*. json`, {
  ??? : true
});

if (prevreports.length) {
}

??? ?? ?? ??? ??? ?? ??? ?? ??? ???? ?? ?? ??? ?? ??? ???????.

?, ?? ?? ?? ?? ??? ???? ???? ??? ?? ???? ???? ??? ?? (_)? ???? ???? ?? ??? ??? ???????. ? ??? ???? ?? ?? ??? ?? Node.js ?? ?? ? Path? ???? ????.

 const path = ?? ( '??');

????? ??? ?? ???? ??? ?????.

 PATH.PARSE ( 'lukeharrison.dev/2020-01-31T10_18_24.110Z.json');

? ??? ??? ?????.

 {
  ?? : '',
  dir : 'lukeharrison.dev',
  ?? : '2020-01-31T10_18_24.110Z.json',
  ?? : '.json',
  ?? : '2020-01-31T10_18_24.110Z'
}

??? ?? ?? ??? ?? ??? ??? ???? ??? ?? ? ? ????.

 if (prevreports.length) {
  ?? = [];
  for (prevreports????) {
    ??.
      ? ?? (path.parse (prevreports [report]). name.replace (/_/g, ":"))
    );
  }
}

????? ?? ??? ??

• Lukeharrison.dev
  • 2020-01-31T10_18_12.648Z.JSON
  • 2020-01-31T10_18_24.110Z.JSON

??? ??? ????.

 [? ?
 '2020-01-31T10 : 18 : 12.648Z',
 '2020-01-31T10 : 18 : 24.110Z'
]]

??? ?? ??? ?? ????? ????? ??? ? ??? ????.

 const alpha = ??? ?? ( '2020-01-31');
Const Bravo = ??? ?? ( '2020-02-15');

Console.log (alpha> bravo); // ??
Console.log (Bravo> Alpha); // ??

??? ?? ??? ???? ?? ??? ???? ??? ?? ??? ?? ? ????.

 ?? = [];
for (prevreports????) {
  Dates.Push (? ?? (path.parse (prevreports [report]). name.replace (/_/g, ":"));
}
const max = dates.reduce (function (a, b) {
  return math.max (a, b);
});

Max? ??? ??? ????? Unix ?? ???? ????? ?? ?? ?? ??? ??? ISO ???? ???? ?? ?? ?? ???????.

 const max = dates.reduce (function (a, b) {
 return math.max (a, b);
});
const thateReport = ? ?? (max) .toisoString ();

???? ??? ????? ?????.

• 2020-01-31T23_24_41.786Z.JSON
• 2020-01-31T23_25_36.827Z.JSON
• 2020-01-31T23_37_56.856Z.JSON
• 2020-01-31T23_39_20.459Z.JSON
• 2020-01-31T23_56_50.959Z.JSON

?? ???? ??? 2020-01-31T23 : 56 : 50.959Z???.

??? ?? ??? ???? ????? ??? ??? ???????. ?? ??? ?? ??? ?? ????? ? ??? ???? ? ??? ??????.

? ??? ???? ???? ?? ?? ??????? ?? ?? ??? JavaScript Parser? ?? ? ? ????? ???? IFFE (?? ?? ???)? ???? ?? ??????. ??? ?? ??? ?????.

 const thateReportContents = (() => {

}) ();

? ????? ?? FS ??? readFilesync () ???? ???? ?? ?? ???? ??? ?? ? ? ????. ??? JSON ????? ?? JavaScript ??? ?? ???? ?? ?????.

 const thateReportContents = (() => {
  const output = fs.readfilesync (
    Dirname "/"?? report.replace (/:/g, "_") ".json",
    "UTF8",
    (err, results) => {
      ?? ??;
    }
  );
  return JSON.PARSE (??);
}) ();

?? ?? CompareReports () ??? ???? ?? ???? ?? ???? ?? ??? ???? ?????.

 CompareReports (?? ReportContents, results.js);

?? ??? ? ?? ?? ??? ??? ???? ??? ???? ??? ? ? ????.

 https://www.lukeharrison.dev/ 2020-02-01T00 : 25 : 06.918Z
https://www.lukeharrison.dev/ 2020-02-01T00 : 25 : 42.169Z

? ???? ??? ???? ?? ????? ???? ??? ????? report.json ?? ?? ???? ??????.

? ???? ??????

??? ?? ?? ??? ? ? ???? ? ???? ??? ??? ???????. ?? ???? ?? ?? ??? ???? ?? ??? ?? ??? ?? ? ??? ???? CompareERPORTS () ??? ??? ????.

?? ??? ??? ??? ????.

 ?? lh.js-from lukeharrison.dev/2020-02-01T00:25:06.918Z--cnn.com/2019-12-16T15:127.169Z

?? ????? URL ?? ? ??? ??? ???? ??? IF ?? ???????. ???? ?? ??? ????? ???? ?? ?? ??? ?????. ??? ??? ??? ?? URL? ??????. ????? ??? ?? ??? ?? ? ????.

 if (argv.from && argv.to) {

} else if (argv.url) {
 // et al
}

? JSON ??? ??? ???? JavaScript ??? ?? ?? ? ?? CompareReports () ??? ??? ???.

??? ?? ??? ???? ???? ?? ?? JSON? ?? ??????. ? ??? ?? ??? ???? ???? ? ???? ??? ? ????.

?? ReportContents () ??? ???? ???? ?? ??? ??? ????? getContents ()?? ? ??? ????. JavaScript Parser? ?? ?? ??? ??? ?? ??? IFFE? ?? ?? ????? ?? IFFE? ?? ??? ? ???? ??????.

 const getContents = pathstr => {
  const output = fs.readfilesync (pathstr, "utf8", (err, results) => {
    ?? ??;
  });
  return JSON.PARSE (??);
};

const compraleReports = (from, to) => {
  Console.log ([ "FinalUrl"] "" "?? ["FetchTime "]);
  console.log ([ "finalUrl"] ""to [ "fetchTime"]);
};

?? ?? ?? retrapolated helper ??? ????? ?? reportContents () ??? ????????.

 const thateReportContents = getContents (dirname '/'?? report.replace (/:/g, '_') '.json');

??? ???? ???? ?? ???? ??? CompareReports () ??? ???????.

 if (argv.from && argv.to) {
  ?? ?? (
    getContents (Argv.from ".json"),
    getContents (Argv.to ".json")
  );
}

??? ?????, ??? ??? ???? ?? ? ?? ?? ??? ???? ?? ?? ? ????? ?? ?? ??????.

 ?? lh.js-from lukeharrison.dev/2020-01-31t23_24_41.786z-to lukeharrison.dev/2020-02-01t11_16_251z

???? ??? ????.

 https://www.lukeharrison.dev/ 2020-01-31T23_24_41.786Z
https://www.lukeharrison.dev/ 2020-02-01t11_16_25.221Z

?? ??

? ?? ???? ?? ??? ???? CompareReports () ?????? ? ???? ???? ?? ?????.

Lighthouse? ???? ?? ??? ?? ?? ?? ?? ??, ?? ? ??? ?? ? ???? ??? ????. ???? ?? ??? ???,? ??? ??? ????? ?? ??? ????.

??? ??? ????? 9 ?? ?? ??? ? ?? ? First Contentful Paint? ?????.

 "???? ?? ???": {
  "ID": "??? ??",
  "??": "??? ??? ???",
  "??": "? ?? ??? ???? ? ?? ??? ? ???? ????? ??? ?????. [??? ????] (https://web.dev/first-contentful-paint)."
  "??": 1,
  "ScoredIsplayMode": "??",
  "NumericValue": 1081.661,
  "displayValue": "1.1 s"
}

? 9 ?? ?? ???? ?? ???? ??? ????. ?? ???? ?? ????? ??? ? ? ????.

 const compraleReports = (from, to) => {
  const metricfilter = [
    "???? ?? ???",
    "? ?? ??",
    "Speed-Index",
    "?? ?? --- ???",
    "? ??? ??",
    "Max-Potential-Fid",
    "?? ??-???",
    "First-CPU-Idle",
    "???"
  ];
};

?? ?? ???? ?? ?? ? ??? ??? ?? ?? ??? ?? ??? ?? ?????. (? ? ??? ??? ??? ??? ???? ?? ?? ??? ???? ????.)

??? ??? ?????. ??? ??? ???? ????.

 const metricfilter = [
  "???? ?? ???",
  "? ?? ??",
  "Speed-Index",
  "?? ?? --- ???",
  "? ??? ??",
  "Max-Potential-Fid",
  "?? ??-???",
  "First-CPU-Idle",
  "???"
];

for ([ "Audits"]?? auditobj? ????) {
  if (metricfilter.includes (AuditoBj)) {
    Console.log (AuditoBJ);
  }
}

? console.log ()? ?? ?? ??? ?????.

 ??? ??
??? ??
??? ???
?? ??-??
? ??? ??
?? ??
? ?? ???
First-CPU-Idle
???

?, [ 'Audits'] [AuditoBj] .numericValue ? [ 'Audits'] [AuditoBj] .numericValue?? ?? ??? ??? ????? ?? ????? ?? ?????.

?? ??? ??? ????? ??? ?? ??? ?????.

 ??? ??? 1081.661 890.774
??? ?? 1081.661 954.774
??-??? 15576.70313351777 1098.62294504341
?? ??-??? 12.8 12.8
? ?? ?? 59 31.5
MAX-POTENTION-FID 153 102
?? ?? 16.85999999999985 16.096000000000004
First-CPU-IDLE 1704.8490000000002 1918.774
??? 2266.2835 2374.3615

??? ?? ??? ?? ???? ??? ????. ? ? ?? ??? ??? ?? ? ?? ??? ??? ?? ?? ??? ???? ??? ????????.

? ? ??? ??? ??? ???? ??? ?? ????? ??. ???? ??? ?? ???? ? ?? ? ?? ??? ??? ????.

??? ??? ????.

 ((??) / From) x 100

??? ? ?? ???? ?? ?? ??? 5.7s ? ?? ? ?? (To)? ?? 2.1s ?? ??? ??? ?? ? ???. ??? ??? ????.

 5.7-2.1 = 3.6
3.6 / 5.7 = 0.63157895
0.63157895 * 100 = 63.157895

??? ?? ? ??? ????? 63.16%? ?? ??? ?????.

??? Metricfilter ?? ??? CompareERPORTS () ?? ??? ??? ??? ?????.

 const calcpercentagediff = (from, to) => {
  const per = ((to - from) / from) * 100;
  return Math.round(per * 100) / 100;
};

Back in our auditObj conditional, we can begin to put together the final report comparison output.

First off, use the helper function to generate the percentage difference for each metric.

 for (let auditObj in from["audits"]) {
  if (metricFilter.includes(auditObj)) {
    const percentageDiff = calcPercentageDiff(
      from["audits"][auditObj].numericValue,
      to["audits"][auditObj].numericValue
    );
  }
}

Next, we need to output values in this format to the console:

This requires adding color to the console output. In Node.js, this can be done by passing a color code as an argument to the console.log() function like so:

 console.log('\x1b[36m', 'hello') // Would print 'hello' in cyan

You can get a full reference of color codes in this Stackoverflow question. We need green and red, so that's \x1b[32m and \x1b[31m respectively. For metrics where the value remains unchanged, we'll just use white. This would be \x1b[37m.

Depending on if the percentage increase is a positive or negative number, the following things need to happen:

• Log color needs to change (Green for negative, red for positive, white for unchanged)
• Log text contents change.
  • '[Name] is X% slower for positive numbers
  • '[Name] is X% faster' for negative numbers
  • '[Name] is unchanged' for numbers with no percentage difference.
• If the number is negative, we want to remove the minus/negative symbol, as otherwise, you'd have a sentence like 'Speed Index is -92.95% faster' which doesn't make sense.

There are many ways this could be done. Here, we'll use theMath.sign() function, which returns 1 if its argument is positive, 0 if well… 0, and -1 if the number is negative. That'll do.

 for (let auditObj in from["audits"]) {
  if (metricFilter.includes(auditObj)) {
    const percentageDiff = calcPercentageDiff(
      from["audits"][auditObj].numericValue,
      to["audits"][auditObj].numericValue
    );

    let logColor = "\x1b[37m";
    const log = (() => {
      if (Math.sign(percentageDiff) === 1) {
        logColor = "\x1b[31m";
        return `${percentageDiff "%"} slower`;
      } else if (Math.sign(percentageDiff) === 0) {
        return "unchanged";
      } ? ?? {
        logColor = "\x1b[32m";
        return `${percentageDiff "%"} faster`;
      }
    })();
    console.log(logColor, `${from["audits"][auditObj].title} is ${log}`);
  }
}

So, there we have it.

You can create new Lighthouse reports, and if a previous one exists, a comparison is made.

And you can also compare any two reports from any two sites.

Complete source code

Here's the completed source code for the tool, which you can also view in a Gist via the link below.

 const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");
const argv = require("yargs").argv;
const url = require("url");
const fs = require("fs");
const glob = require("glob");
const path = require("path");

const launchChromeAndRunLighthouse = url => {
  return chromeLauncher.launch().then(chrome => {
    const opts = {
      port: chrome.port
    };
    return lighthouse(url, opts).then(results => {
      return chrome.kill().then(() => {
        ?? {
          js: results.lhr,
          json: results.report
        };
      });
    });
  });
};

const getContents = pathStr => {
  const output = fs.readFileSync(pathStr, "utf8", (err, results) => {
    return results;
  });
  return JSON.parse(output);
};

const compareReports = (from, to) => {
  const metricFilter = [
    "first-contentful-paint",
    "first-meaningful-paint",
    "speed-index",
    "estimated-input-latency",
    "total-blocking-time",
    "max-potential-fid",
    "time-to-first-byte",
    "first-cpu-idle",
    "interactive"
  ];

  const calcPercentageDiff = (from, to) => {
    const per = ((to - from) / from) * 100;
    return Math.round(per * 100) / 100;
  };

  for (let auditObj in from["audits"]) {
    if (metricFilter.includes(auditObj)) {
      const percentageDiff = calcPercentageDiff(
        from["audits"][auditObj].numericValue,
        to["audits"][auditObj].numericValue
      );

      let logColor = "\x1b[37m";
      const log = (() => {
        if (Math.sign(percentageDiff) === 1) {
          logColor = "\x1b[31m";
          return `${percentageDiff.toString().replace("-", "") "%"} slower`;
        } else if (Math.sign(percentageDiff) === 0) {
          return "unchanged";
        } ? ?? {
          logColor = "\x1b[32m";
          return `${percentageDiff.toString().replace("-", "") "%"} faster`;
        }
      })();
      console.log(logColor, `${from["audits"][auditObj].title} is ${log}`);
    }
  }
};

if (argv.from && argv.to) {
  compareReports(
    getContents(argv.from ".json"),
    getContents(argv.to ".json")
  );
} else if (argv.url) {
  const urlObj = new URL(argv.url);
  let dirName = urlObj.host.replace("www.", "");
  if (urlObj.pathname !== "/") {
    dirName = dirName urlObj.pathname.replace(/\//g, "_");
  }

  if (!fs.existsSync(dirName)) {
    fs.mkdirSync(dirName);
  }

  launchChromeAndRunLighthouse(argv.url).then(results => {
    const prevReports = glob(`${dirName}/*.json`, {
      sync: true
    });

    if (prevReports.length) {
      dates = [];
      for (report in prevReports) {
        dates.push(
          new Date(path.parse(prevReports[report]).name.replace(/_/g, ":"))
        );
      }
      const max = dates.reduce(function(a, b) {
        return Math.max(a, b);
      });
      const recentReport = new Date(max).toISOString();

      const recentReportContents = getContents(
        dirName "/" recentReport.replace(/:/g, "_") ".json"
      );

      compareReports(recentReportContents, results.js);
    }

    fs.writeFile(
      `${dirName}/${results.js["fetchTime"].replace(/:/g, "_")}.json`,
      results.json,
      err => {
        (err)? ???;
      }
    );
  });
} ? ?? {
  throw "You haven't passed a URL to Lighthouse";
}

View Gist

Next steps

With the completion of this basic Google Lighthouse tool, there's plenty of ways to develop it further. ?? ??:

• Some kind of simple online dashboard that allows non-technical users to run Lighthouse audits and view metrics develop over time. Getting stakeholders behind web performance can be challenging, so something tangible they can interest with themselves could pique their interest.
• Build support for performance budgets, so if a report is generated and performance metrics are slower than they should be, then the tool outputs useful advice on how to improve them (or calls you names).

??? ???!

? ??? Google Lighthouse ???? ???? ?????? Node.js ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!