diff --git a/package.json b/package.json index 8fd170b..08c700c 100644 --- a/package.json +++ b/package.json @@ -24,11 +24,12 @@ }, "homepage": "https://github.com/zachleat/performance-leaderboard#readme", "dependencies": { - "@axe-core/puppeteer": "^4.6.0", - "chrome-launcher": "^0.15.1", - "lighthouse": "^10.0.0", + "@axe-core/puppeteer": "^4.7.3", + "byte-size": "^8.1.1", + "chrome-launcher": "^0.15.2", + "lighthouse": "^11.1.0", "lodash.get": "^4.4.2", - "puppeteer": "^19.7.0", - "slugify": "^1.6.5" + "puppeteer": "^21.3.1", + "slugify": "^1.6.6" } } diff --git a/src/AxeTester.js b/src/AxeTester.js index 7ed6047..a821e9f 100644 --- a/src/AxeTester.js +++ b/src/AxeTester.js @@ -42,7 +42,9 @@ class AxeTester { } async start() { - this.browser = await puppeteer.launch(); + this.browser = await puppeteer.launch({ + headless: "new" + }); } getLogFilename(url) { diff --git a/src/ResultLogger.js b/src/ResultLogger.js index 30d14cb..1389179 100644 --- a/src/ResultLogger.js +++ b/src/ResultLogger.js @@ -1,6 +1,7 @@ const AxeTester = require("./AxeTester"); const LighthouseMedianRun = require("../lib/lh-median-run.js"); const lodashGet = require("lodash.get"); +const byteSize = require('byte-size') class ResultLogger { constructor() { @@ -204,14 +205,30 @@ class ResultLogger { }); } - _getResultResourceSummaryItem(result, resourceType, prop) { - let details = result.audits['resource-summary'].details; - if(details) { - let items = details.items; - if(items && items.length) { - return items.filter(entry => entry.resourceType === resourceType)[0][prop]; + _getResultResourceSummaryItem(items, resourceType, prop) { + let count = 0; + let size = 0; + if(items && items.length) { + let subItems = items; + if(resourceType) { + subItems = items.filter(entry => { + return (entry.resourceType || "").toLowerCase() === resourceType.toLowerCase(); + }); + } + + for(let item of subItems) { + count++; + size += item.transferSize; } } + // prop: transferSize, requestCount + if(prop === "transferSize") { + return size; + } + if(prop === "requestCount") { + return count; + } + return NaN; } mapResult(result) { @@ -226,6 +243,21 @@ class ResultLogger { }; } + + let requestSummary = { + requestCount: 0, + transferSize: 0, + }; + + let networkItems = result.audits['network-requests'].details.items; + for (let request of networkItems) { + requestSummary.requestCount += 1; + requestSummary.transferSize += request.transferSize; + } + // 27 requests • 209 KiB + let normalizedTransferSize = byteSize(requestSummary.transferSize, { units: 'iec' }); + let requestSummaryDisplayValue = `${requestSummary.requestCount} request${requestSummary.requestCount !== 1 ? "s" : ""} • ${normalizedTransferSize.value} ${normalizedTransferSize.unit}`; + return { url: result.finalUrl, requestedUrl: result.requestedUrl, @@ -252,19 +284,19 @@ class ResultLogger { maxPotentialFirstInputDelay: result.audits['max-potential-fid'].numericValue, timeToFirstByte: result.audits['server-response-time'].numericValue, weight: { - summary: result.audits['resource-summary'].displayValue, + summary: requestSummaryDisplayValue, total: result.audits['total-byte-weight'].numericValue, - image: this._getResultResourceSummaryItem(result, "image", "transferSize"), - imageCount: this._getResultResourceSummaryItem(result, "image", "requestCount"), - script: this._getResultResourceSummaryItem(result, "script", "transferSize"), - scriptCount: this._getResultResourceSummaryItem(result, "script", "requestCount"), - document: this._getResultResourceSummaryItem(result, "document", "transferSize"), - font: this._getResultResourceSummaryItem(result, "font", "transferSize"), - fontCount: this._getResultResourceSummaryItem(result, "font", "requestCount"), - stylesheet: this._getResultResourceSummaryItem(result, "stylesheet", "transferSize"), - stylesheetCount: this._getResultResourceSummaryItem(result, "stylesheet", "requestCount"), - thirdParty: this._getResultResourceSummaryItem(result, "third-party", "transferSize"), - thirdPartyCount: this._getResultResourceSummaryItem(result, "third-party", "requestCount"), + image: this._getResultResourceSummaryItem(networkItems, "image", "transferSize"), + imageCount: this._getResultResourceSummaryItem(networkItems, "image", "requestCount"), + script: this._getResultResourceSummaryItem(networkItems, "script", "transferSize"), + scriptCount: this._getResultResourceSummaryItem(networkItems, "script", "requestCount"), + document: this._getResultResourceSummaryItem(networkItems, "document", "transferSize"), + font: this._getResultResourceSummaryItem(networkItems, "font", "transferSize"), + fontCount: this._getResultResourceSummaryItem(networkItems, "font", "requestCount"), + stylesheet: this._getResultResourceSummaryItem(networkItems, "stylesheet", "transferSize"), + stylesheetCount: this._getResultResourceSummaryItem(networkItems, "stylesheet", "requestCount"), + thirdParty: this._getResultResourceSummaryItem(result.audits['third-party-summary'].details?.items, false, "transferSize"), + thirdPartyCount: this._getResultResourceSummaryItem(result.audits['third-party-summary'].details?.items, false, "requestCount"), }, }; } @@ -358,7 +390,7 @@ class ResultLogger { } else if(incrementRankValue !== value) { incrementRank++; } - + entry.sidequests[prop] = incrementRank; incrementRankValue = value;