Add Web Vitals information using web-vitals.js

[adamsilverstein]

This PR aims to address https://github.com/johnbillion/query-monitor/issues/714.

Here is what I have so far -

• Adds a new "Web Vitals" panel to Query monitor.
• Unlike other panels in QM data is collected on the front end, when the page loads (FCP & TTFB) and when the user interacts with the page (FID, LCP) - I'm not sure how valuable FID is currently since it is more of a real user metric. Two final metrics CLS and INP are not available until page unload and the web-vitals docs suggests sending these off to a collection endpoint, I discuss some options below.

To use this on the front end, you need to have the wp-admin toolbar enabled, then open query monitor to the Web Vitals tab and reload the page. You will now see the initial metrics:

Once you interact with the page, you will see LCP and FID appear:

Some ideas to measure INP and CLS would be:

• Output the details to the console when available (maybe log all values to console?) that way developers could leave console uncleared ("Preserve log") and check values from previous loads
• send the values to a REST endpoint and store them, maybe with the existing data collector?

We could also leave these off for now and work on adding them in a follow up change. What do you think @johnbillion?

[crstauf]

Does this auto run, or wait to be requested? If it auto runs, can we please include a way to disable it from auto running? I'm certainly not interested in this running on every page load.

[crstauf]

@adamsilverstein Can you please respond to my previous comment?

Does this auto run, or wait to be requested? If it auto runs, can we please include a way to disable it from auto running? I'm certainly not interested in this running on every page load.

[adamsilverstein]

@adamsilverstein Can you please response to my previous comment?

Does this auto run, or wait to be requested? If it auto runs, can we please include a way to disable it from auto running? I'm certainly not interested in this running on every page load.

Hi @crstauf

Good question (just saw it now)! Turns out, this was enqueueing on every page load which seems excessive (even though the actual impact is very low). I pushed an update (https://github.com/johnbillion/query-monitor/pull/765/commits/0aaf29943350b9e6a6ec18dd80c1163590699428) so that it only runs when the admin-bar is showing which means only when you are logged in. I think this makes sense, since you need the admin-bar to access QM anyway, right? Does this address your concern about running on every page load?

Note: also move the enqueue to the footer, and will add "defer" once 6.3 ships and this is part of the Script API. The script doesn't need to load early to work ref

Looks like QM queues up a bunch of stuff regardless, so I assume it is best practice to not run QM in production?

[crstauf]

@adamsilverstein I was thinking a constant or filter to enable the panel: running a performance evaluation on every request is unnecessary, even if it's impact is low.

[adamsilverstein]

@adamsilverstein I was thinking a constant or filter to enable the panel: running a performance evaluation on every request is unnecessary, even if it's impact is low.

Sounds reasonable - I'll leave that suggestion up to @johnbillion.

Small clarification on the operation: the script doesn't actually run any additional performance evaluation, instead the script uses the performance observer API to show information that the browser performance APIs have already collected (see ref). So the impact is really just the overhead of loading the script itself which is why I said it is minimal. (Not disagreeing that it should only be enqueued when needed!)

[crstauf]

Oh? The browser has already done the evaluation, all the script does is get the info from the browser? Fascinating. That resolves my concern then.

May be smart to have a default output, waiting for the info to populate, as well as a situation where web-vitals has been dequeued.

[crstauf]

May be smart to have a default output, waiting for the info to populate, as well as a situation where web-vitals has been dequeued.

@adamsilverstein ☝️

[crstauf]

@adamsilverstein Submitted PR for the notice and handling missing web-vitals: https://github.com/adamsilverstein/query-monitor/pull/1.

[adamsilverstein]

@adamsilverstein Submitted PR for the notice and handling missing web-vitals: adamsilverstein#1.

Thanks @crstauf! will review.

[adamsilverstein]

@adamsilverstein Submitted PR for the notice and handling missing web-vitals: adamsilverstein#1.

Thanks @crstauf! will review.

merged, thanks! Still awaiting review from @johnbillion :)

[johnbillion]

Thanks for the reminder! I've put a temporary pause on new features until the spring.

[adamsilverstein]

Thanks for the reminder! I've put a temporary pause on new features until the spring.

Happy spring! 💐 @johnbillion 💐

I realize you may be busy with the rewrite you mentioned, let me know if you can use some help or testing there.

I updated the PR here with the latest web-vitals.js library. I'm doing that manually so far to keep it simple. Since the package is available on npm, we could easily change this to be automatically imported as part of the build process.

[adamsilverstein]

@johnbillion have you resumed working on the plugin? If so, I would appreciate any feedback on this PR.