google / google/site-kit-wp

Extended details for PSI recommendations

Open
#2,406 1 comment 1 reaction 0 assignees View on GitHub
Module: PageSpeed Type: Enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.