Embed scorecalc within performance-scoring doc

[paulirish]

https://web.dev/performance-scoring/ has our canonical scoring docs

the scorecalc supports receiving metric values through the URL! Thanks @connorjclark !

https://paulirish.github.io/lh-scorecalc/#first-contentful-paint=2390&first-meaningful-paint=4000&speed-index=8070&interactive=11260&first-cpu-idle=6500&total-blocking-time=320&largest-contentful-paint=2140&cumulative-layout-shift=0.13

this means we can now link to it from the report! 🥳

Also, the report currently links to the scoring docs 3 times!

---

My thought was we'd link [perf score is calculated] to the perf-scoring doc, and then we'd have an embed of the scorecalc and all your numbers are prefilled.

Talked it out with @robdodson and the thought was..

• the [perf score is calculated] link has the long hash: /performance-scoring#metricvalue=3200&...
• within the web.dev page is a lil custom element (<scorecalc-embed>) that adds an iframe for the scorecalc.
  • it also reads the hash from the page's URL and sets it on the iframe src.
  • and maybe it scrolls the doc page down to where the scorecalc lives.
  • and this small custom element can have tests in src/site/test/lib

Kinda relevant: GoogleChrome/web.dev#2296 arbitrary script can currently run in web.dev but probably not for long. The custom element route seems better.

[connorjclark]

I think we should deploy it to lighthouse' github pages. The repo can remain separate.

[robdodson]

I think we should deploy it to lighthouse' github pages.

Which thing are you referring to?

[connorjclark]

https://paulirish.github.io/lh-scorecalc/ -> https://googlechrome.github.io/lighthouse/calc/

[addyosmani]

https://paulirish.github.io/lh-scorecalc/ -> https://googlechrome.github.io/lighthouse/calc/

👍

This would be a nice to have for 6.0 final imo.

[robdodson]

ah yep that sounds good to me.

[paulirish]

todo:

• deploy/move calc to googlechrome.github.io/...
• add rich link into the report (report: link to calculator w/ values #10754)
• add customelement into web.dev as described above

[paulirish]

There's no big interest in this anymore.

If we do pick it up, probably a lot easier to iframe than to deal with custom elements