Lighthouse Page Redesign Remaining Items

[scottjehl]

The revamp of our lighthouse results pages is coming along. I wanted to document what's done and what's left to do here as I pass it off to someone who thinks in PHP :)

PR here #2513

Current visual screenshot:

This template is built using our lighthouse.php page using the lighthouse JSON. It uses our new template setup but I did not go as far as templating the markup itself in Blade yet (more on that below). The test result navigation for this PR is tweaked to treat LH like other result pages instead of an external one. If the lighthouse run is the ONLY test type (if you choose lighthouse from the start test page), no other result pages will be offered in the results nav.

Still to do:

• The details for each opportunity/audit are not currently being written to HTML dynamically. I did make a couple static HTML examples that are being outputted in each opportunity right now that can be used as a model for how the details should output in either a table or list depending on type.

• the links to sort opportunities by metric are stubbed and not at all wired into actual functionality. I was thinking a server-side sort for these would be easiest though?

• tree map link doesn't go anywhere. do we have tree maps enabled?? how do we if not?

• Style diagnostics and opportunities uniquely somehow

• we need a great screenshot view for the social media preview of these results.

• The svg meter values in the page are not currently calculated to show the 0/360 dial percent, so that needs to be set in each svg. Their colors are correct however.

• Figure out a call to action up top for lighthouse-only results to run a fuller webpagetest run to get more info than lighthouse provides

• Somehow mention that PRO experiments can be run to improve lighthouse scores

• CSS for smallscreen layouts needs fixing up

• write some php classes to parse the json and provide some helper methods for templating this page properly.

• We're not including a LH filmstrip or screenshot. The current screenshot is from a broader WPT result so if it's a lighthouse-only run, there's no screenshot currently. We should consider enabling the filmstrip and a screenshot to use at the top of the page. I'd consider the filmstrip to be lower priority for launch if it's tricky.

• The page title and social media description should read something about "WebPageTest Lighthouse Result for xyz.com"

[stoyan]

• Make "Show audits relevant to metrics:" links work
• We have hardcoded Diagnostics, Passed Audits and Opportunities categories, but the categories are different in different sections (e.g. Accessibility is different than Perf)
• Figure out how to match LH report when listing items in a category, e.g. hide items such as "Network Requests" and "Final Screenshot" from Diagnostics

[stoyan]

• sort "Opportunities" by potential ms wins

[scottjehl]

Details are filled in for most now!

Some notes as I look at it...

Tree map link: keep? Make work if so

PWA opportunities have details that are not table/opps/chains. Debuginfo I think... Needs to be handed in partial

Accessibility details doesn't seem to use the same keys and table structure as other

LCP details aren't populated

[scottjehl]

Also, opportunities sections need some additional info added on the list items and such:

Estimated savings etc

[scottjehl]

Lastly, we should surface links to relevant experiments in a few key places for v1.

[scottjehl]

also add #2576
and #2575

to this release

[scottjehl]

Still to do:

• Sort opps by potential wins?
• Fix the closing divs somewhere so the footer is no longer inside the content wrapper
• Anywhere to link to relevant experiments easily??
• Test against the default LH view to see if we differ in scoring at all (pass average fail particularly)

[stoyan]

• grey manual icons
• truncate data uris
• empty detail tables

[github-actions]

We're in the process of cleaning up issues on this project in order to ensure we're able to stay on top of high priority bugs and feature requests. As a part of this process, we're automatically closing any issues that have had no activity within the last two years, including this one, since the codebase has changed dramatically in that time. If you feel this is still relevant, please file a new issue using the relevant issue template so we can get it prioritized. Thanks!