Exploring perf results in Timeline

[paulirish]

While the pwmetrics project gives a UI for the perf results, it's more valuable to see them against the timeline. I started an initial spike on this and wanted to share.

This is a trace of theverge.com loading, recorded w/ Lighthouse:

The following metrics are in here: First contentful paint, First meaningful paint, First visual change, Visually complete, Perceptual Speed Index, Time to Interactive

• Lighthouse patch: https://github.com/GoogleChrome/lighthouse/compare/exportmetricstotrace
• DevTools patch: https://codereview.chromium.org/2283793005

The basic flow: With --save-assets on, we take our metrics and turn them into fake trace events. We then inject them into the trace right before we save it to disk. Then, loading it in Timeline, we spot those and create markers. (UX-wise the markers are kind of a pain to deal with, so we can definitely think about smarter UI.)

[paulirish]

If you want to try the devtools patch out, you can try it via the new fancy devtools contrib workflow:

# clone the standalone devtools frontend repo
git clone https://github.com/ChromeDevTools/devtools-frontend/
cd devtools-frontend
git checkout -b metrikz

# grab the unified patch of CL 2283793005
wget https://codereview.chromium.org/download/issue2283793005_1.diff
# adjust the paths, as our git clone is a subtree..
sed -i -e "s/third_party\/WebKit\/Source\/devtools\///" issue2283793005_1.diff
# apply the diff to working folder
git apply issue2283793005_1.diff

# start the _new_ devtools hacker webserver
npm run server
# open the standalone devtools (don't really need to debug a page)
open "http://localhost:8090/front_end/inspector.html?experiments=true"

# and now drag in a metrics-adorned trace into Timeline panel. 
# Profit!

Attached: A zip of the trace I screenshotted above: www.theverge.trace.json.zip

[addyosmani]

This works really nice using the above workflow. Took just a few mins to setup.

Paul wins all the internet 🌟 🌟 🌟 today.

[paulirish]

New, improved implementation (on the exportmetricstotrace branch). Just using straight up measures means no devtools-side changes. :)

[addyosmani]

Damn, that's slick. You're grouping them in to user timings? Just as useful as the other view :)