PWA category refactor tracking issue

[brendankenny]

New groupings:

Fast and Reliable

• Page load is fast enough on mobile networks (TTI < 10s)
• Current URL responds with a 200 when offline
  • rename: "Current page responds with a 200 when offline" core(pwa): audit and report group renames #6494
• start_url responds with 200 when offline - new_audit: offline-start-url #6397

Installable

• Uses HTTPS (either localhost or has valid certificate)
• Registers a service worker
  • check that test page URL is in SW scope core(service-worker): check that test page is in SW scope #6609
  • check that start_url is in SW scope core(service-worker): check that start_url is within SW's scope #6678
• Manifest requirements (starturl, name, display, icons) core: rename webapp-install-banner audit to installable-manifest #6630

PWA Optimized

• rename group core(pwa): audit and report group renames #6494
• Redirects HTTP traffic to HTTPS
  • should be in a different group? (deferring question for now)
• Is not configured for a custom splash screen
• Address bar does not match brand colors
  • needs a rename core(pwa): audit and report group renames #6494
• Has a tag with width or initial-scale
• Content is sized correctly for the viewport
• Contains some content when JavaScript is not available

Manual

• Page transitions don't feel like they block on the network
• Site works cross-browser
• Each page has a URL

Next:

• add groups to default-config - core(config): add new PWA category groups #6396
• Badging!
  • Add grayscale group badges report: add pwa-category-renderer #6486, report: escape # in svg data URLs #6686
  • Change to filled-in badges when group is passing - report(pwa): give badges to groups with all passing audits #6504,
  • Replace score gauge with badged gauge - report: add PWA category badge gauge #6526, report: fix pwa-optimized badge gauge #6670
• Add adequate vertical spacing between audit groups (see comment) - report: larger vertical margins for audit-group summaries #6688
• Score gauge tooltip (see comment) - report(pwa): add tooltip to badge gauge #6689
• No more passed audit hiding
  • Refactor of current category-renderer to support new use cases report: refactor rendering of top-level failed/passing/etc sections #6460, report: rename clump classes; give classes to all audit groups #6482, report: give passed-opportunities group an icon #6594
  • Add pwa-category-renderer, don't hide passed audits report: add pwa-category-renderer #6486

Lighthouse v5

• ⁅ ⁆ Figure out LHR/scoring story

[hwikyounglee]

Suggesting 'Optimized' in the place of 'Engaging'
Thanks @brendankenny !

[hwikyounglee]

And we landed on "PWA Optimized"
cc: @kusler @paulirish 💅

[egsweeny]

What about 'Enhancements'?

[egsweeny]

Refinements
Further Improvements
?

[hwikyounglee]

I'm hoping the word is useful when we say something like, "Making it Reliable and Fast, Installable, and PWA Optimized can help your app provide a great app experience."

[egsweeny]

Hmm... But isn't it a little redundant because it's already in the PWA section?

[patrickhulce]

FWIW, here are some of my thoughts. That section is a grab-bag of things that make the app feel not terrible. They're baseline things that make it more like how a professional, well-put-together, native-like app would feel. These are the words that come to my mind when I think about the audits in there

Usable
Presentable
Cohesive
Snazzy

[hwikyounglee]

Hoping it to feel more action-oriented i.e. [the word] is done to the app by the developer.
Something about 'Polished' didn't sound right to me, it's probably because it describes both action and perception by others. I still feel 'Optimized' is a nice balance. If it causes a confusion, we can continue to iterate on it.

Would 'Refined' work?
To be clear, my preference is 'Optimized' > 'PWA Optimized' > 'Refined'

[brendankenny]

I went with "PWA Optimized" for now as a compromise, but I'll throw my vote in for "Polished" as well :)

If it causes a confusion, we can continue to iterate on it.

We'll need to do this fairly quickly, since we'll want to have it locked down by 4.0 (so, this week :).

We can have a different group name from group id and so be able to change what's displayed in the future, but it would be nice to have them not too far apart.

[exterkamp]

From CR in #6486:

I feel like a fill of #ffffff is too low contrast/I don't like the color combo, and #5e6268 is too dark with these very filled in icons. I prefer a lighter grey like #a3a7ae or something like that. This is all semantics tho.

Top is current, middle matches all other icon fill colors, bottom is a softer grey.

[hwikyounglee]

• Category name: "PWA Optimized" SGTM
• Icon color: we can try #cfd8dc for the BG color. I would keep the icon shape in white. If it's filled with a color, it looks like it's already fulfilled.

[patrickhulce]

Ooooooo "Polished" is exactly what I was searching for :)

[hwikyounglee]

"Polished" seems to have a notion of perception by others (i.e. feels judged a bit).

[brendankenny]

@hwikyounglee commented in #6526

I think we can use a few more pixels above the sub group title (to make the total pixel 24px).

Agreed, the only issue is the other categories and if they should have similar spacing. I know it was requested to keep the perf section more compact, for instance, but it feels weird for them to have different spacing around their group icons

[brendankenny]

@paulirish commented

I'm wondering if we should also clarify the state in a tooltip.

We could do with a full lh-tooltip and bulleted list, but here's a minimal [title] example:

[hwikyounglee]

Alternative idea:
Fast and reliable: 3/3, Installable: 3/3, PWA Optimized: 4/6

[hwikyounglee]

re: vertical spacing

+1 to using the same spacing for other categories. Vertical spacing could help with seeing a long list with visual grouping.

[brendankenny]

re: vertical spacing

ok, great. I'll add it to the list 👍

[brendankenny]

💥 💥 💥 💥