Extended details for PSI recommendations
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
The #2390 ticket adds recommendations to the PSI widget which makes it more useful to users. However, I think there is still room for improvements that can make the widget even more useful to users. Currently, the recommendations accordion shows generic phrases that don't help too much to identify exact issues on the site. We can do the following to display more specific information provided by the Lighthouse tool:
* Display the `displayValue` property of the audit object next to the audit title to show small insights to users when accordion items are closed. Eventually, it will look like `{ title } — { displayValue }`, for example:
"_Avoid large layout shifts — 4 elements found_".
* Render information provided in the `details` property of the audit object if it's not empty. Usually, there is the exact information about issues that have been found on the site and which users need to fix. The `details` object contains the `type` property that tells us how exactly it should be rendered. Usually, it is of the `table` type and there are rows and headers that we need to use to build it. In the end, users will see what they need to repair or change on the site to make it better.
* Use colors to distinguish metrics that impact the site performance the most. We can use red color for audits with scores less than 0.5 and orange color for audits with scores between 0.5 and 0.9. It will help us to catch users' attention and poke users to action.
One more idea that I want to mention is to move recommendations to a separate tab because right now it seems to be slightly confusing and feels like recommendations belong either to `In the Lab` or `In the Field` tabs. It is a minor improvement that won't help users to improve site performance, but it will make the widget more organized and less confusing to people with low technical skills.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
*
## Implementation Brief
*
### Test Coverage
*
### Visual Regression Changes
*
## QA Brief
*
## Changelog entry
*
Contributor guide
Research direction
Start by reviewing the PSI widget and the recommendations work described in issue #2390, then trace how Lighthouse audit data reaches the recommendations accordion. Confirm the intended scope with maintainers, since the issue combines displayValue, details rendering, score colors, and tab organization without naming files, tests, or acceptance criteria. Done should be defined by agreed behavior for each requested enhancement and its test coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100