zachleat / performance-leaderboard Goto Github PK
View Code? Open in Web Editor NEWA plugin to run Lighthouse against a set of urls to see which site is the fastest.
A plugin to run Lighthouse against a set of urls to see which site is the fastest.
Per feedback here it would be nice to see a full log of all of the runs, rather than throwing non-median runs away (should later analysis be needed)
If you run the script multiple times the report is overwritten, because the report folder name is the current date.
Started getting these when running tests this week. Only two sites, both of which do have some Axe errors (that I'm working on) - but unsure why those errors would cause timeouts. Any ideas here? Results in this file:
When I run performance-leaderboard to test only one of my 11ty sites, first without any number of pass console.log( await PerfLeaderboard(urls) );
and second with 5 passes console.log( await PerfLeaderboard(urls, 5) );
, I get a big difference (43%) between the first one (3 passes) and the second one (5 passes).
Here is the log:
Testing 1 sites:
(Site 1 of 1, run 1 of 3): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 2 of 3): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 3 of 3): https://corsa.netlify.app/posts/unfolding.html
[
{
url: 'https://corsa.netlify.app/posts/unfolding.html',
finalUrl: 'https://corsa.netlify.app/posts/unfolding.html',
lighthouseScore: 1,
firstContentfulPaint: 1156.5130000000001,
firstMeaningfulPaint: 1156.5130000000001,
speedIndex: 1395.6202760075153,
rank: 1
}
]
Testing 1 sites:
(Site 1 of 1, run 1 of 5): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 2 of 5): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 3 of 5): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 4 of 5): https://corsa.netlify.app/posts/unfolding.html
(Site 1 of 1, run 5 of 5): https://corsa.netlify.app/posts/unfolding.html
[
{
url: 'https://corsa.netlify.app/posts/unfolding.html',
finalUrl: 'https://corsa.netlify.app/posts/unfolding.html',
lighthouseScore: 1,
firstContentfulPaint: 969.73,
firstMeaningfulPaint: 991.73,
speedIndex: 969.73,
rank: 1
}
]
At the same time, DevTools Lighthouse gives me a result similar to the second one (speedIndex: 0.9s).
Is there any explanation?
Also switch our versioning to make the major version of performance-leaderboard
always match the major version of lighthouse.
It would be very useful to be able to run a setup script for each URL in Chrome before lighthouse runs.
For example:
I don't know. This issue is really a discussion starter to see if it's something you are interested in adding, and to think about how/if it's feasible.
Using Puppeteer to script interactions seems sensible. I've done some Googling for ideas.
I've seen this project uses chrome-launcher
to set up Chrome rather than Puppeteer directly so that could be a complication.
Running Lighthouse on Authenticated Pages with Puppeteer
[2 ways to] Using Puppeteer with Lighthouse
chrome-launcher README
Connecting Puppeteer to a Chrome-Launcher instance.
chromelauncher_puppeteer.js
cc @dgrammatiko
I don’t know if this is an official API or not but I think we may need to remove the carbon testing part, unfortunately.
Hi,
I have the following error when using this package inside a Docker container.
(Site 1 of 1, run 1 of 1): https://google.nl Logged an error with https://google.nl: TypeError: Cannot read property 'score' of undefined at ResultLogger.mapResult (/app/node_modules/performance-leaderboard/src/ResultLogger.js:237:56) at runLighthouse (/app/node_modules/performance-leaderboard/performance-leaderboard.js:88:37) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async /app/src/index.js:113:30 [ { url: 'https://google.nl', error: '{}', sidequests: { '-weight.total': 1, '+weight.total': 1, '-weight.document': 1, '+weight.document': 1, '-weight.script': 1, '+weight.script': 1, '-weight.image': 1, '+weight.image': 1, '-weight.font': 1, '+weight.font': 1, '+weight.fontCount': 1, '-timeToFirstByte': 1, '-totalBlockingTime': 1, '-largestContentfulPaint': 1 } } ]
My code is:
`(async function() {
let urls = [
"https://google.nl",
];
const options = {
//axePuppeteerTimeout: 120000, // 120 seconds
writeLogs: false, // Store audit data
readFromLogDirectory: false, // Skip tests with existing logs
onlyCategories: ["performance"],
chromeFlags: [
'--headless',
'--disable-gpu',
'--disable-dev-shm-usage',
'--no-first-run'
],
}
try {
const data = await PerfLeaderboard(urls, 1, options);
console.log(data);
} catch (error) {
console.log(error);
}
})();`
What can this be?
Would there be an appetite to add web page carbon estimates back to the results (removed in #16) without depending on an external API?
The calculations outlined in this post https://sustainablewebdesign.org/calculating-digital-emissions/ could be used. They are the same as is used by the Website Carbon API which was previously used.
I'd be happy to contribute a PR (with some guidance).
Top level lighthouseVersion
in lighthouse results.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.