Plugin Proposal: Performance Dashboard

[swissspidy]

Overview

• Proposed plugin name: Performance Dashboard (or maybe Performance Overview or Performance Summary)
• Proposed plugin slug: performance-dashboard
• Proposed plugin owner GitHub username(s): @swissspidy

About the plugin

Purpose

Leverage Optimization Detective to collect Core Web Vitals field data inside WordPress. Enables site owners to see what real users are experiencing on their site, without CrUX.

Optimization Detective is uniquely positioned to also collect web vitals RUM data. This data can then be presented in the WordPress dashboard for site owners to keep an eye on their site's performance.

For context, this is based on a proof of concept I did in #1098, which already has a bit of a discussion there.

Note: I don't know how useful the idea is, but I wanted to create an actual issue for the POC so that it doesn't get lost.

Related:

I found an existing Core Web Vitals Monitor WordPress plugin which also does this but is somehow not maintained nor popular. We might be able to learn something from it.

See also:

• https://github.com/WordPress/gutenberg/issues/33578

Scope

Screenshots from the POC:

Dedicated dashboard page:

Admin dashboard widget:

Potential

In the future we could:

• Provide an easy-to-use (AI?) summary for users to better understand their site's performance.
• Get actual performance improvement suggestions based on the data, perhaps AI powered.
• Provide call-to-actions, e.g. to fix the offending LCP image in the block editor
• Identify plugins causing LCP/CLS/etc. issues and provide call-to-actions
• Combine with site activity (e.g. see that LCP dropped right after plugin X was activated)
• Combine with other (external) data sources
• Expose (aggregated) CWV data publicly for analysis purposes
  • Opt-in or opt-out
  • Alternatively send to some telemetry server
• Use Long Animation Frames API to identify offenders
• Collect Server-Timing measurements per page
  • Could even identify impact by plugin via Origination
• Add insights to admin bar
• Add insights to block editor

Rationale

• Makes it easier for users to keep tabs on performance and understand the impact their actions have on a site.
• Works for smaller sites and without waiting for CrUX data to become available
• Get data from other browsers as well
• No external data source required, as it's all integrated into WordPress

Other

[joemcgill]

I 💖 this idea.

However, rather than making this a separate plugin, I really think we should consider adding this type of data to Performance Lab and integrate OD when available (or bundle the API into that plugin too).

Now that all of our Performance features are unbundled into standalone plugins, I think there's an opportunity for PL to add more value as a tool for collecting and surfacing performance metrics and opportunities for improvement to site owners. A dashboard like this seems to fit that purpose nicely.

[adamsilverstein]

Also related: https://github.com/adamsilverstein/web-vitals-block

[swissspidy]

Re-sharing https://github.com/WordPress/performance/pull/1098#issuecomment-2271624343 by @felixarntz here.

The suggestion is also to keep this in the main plugin. By default it would only collect Server-Timing, but when OD is active it could hook into the reporting process and collect web vitals information too. And maybe other 3rd party plugins could do the same. That opens more questions about how such a standalone collection mechanism would look like. Definitely would want to avoid reinventing the wheel there, so maybe we could indeed just bundle the OD API into the plugin (which would be kinda ironic).

In any case, this is still in early stages and nothing is set in stone yet. For rapid iteration on the POC, it's easiest to continue working with the existing structure and then re-evaluate once it becomes more concrete.