Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose CLS (cumulative layout shift) value #334

Closed
paulirish opened this issue Mar 17, 2020 · 4 comments
Closed

Expose CLS (cumulative layout shift) value #334

paulirish opened this issue Mar 17, 2020 · 4 comments

Comments

@paulirish
Copy link
Contributor

paulirish commented Mar 17, 2020

Currently there's a layoutShift entry in the _chromeUserTiming object, but the value refers to the timestamp.

  "_chromeUserTiming.domContentLoadedEventEnd": 7315,
  "_chromeUserTiming.LayoutShift": 11822,
  "_chromeUserTiming.LargestContentfulPaint": 10763,

Of course, in the case of CLS, the timestamp isn't really important but you want the cumulative score.

Since _chromeUserTiming is entirely populated from trace events (and not via a performanceobserver), you can pull the args.data.cumulative_score of the last layout shift event. (that's basically what lighthouse does)

cc @brendankenny and lhissue

@pmeenan
Copy link
Contributor

pmeenan commented Mar 17, 2020

We could also add a section to the JSON that tracks each layout shift and the size so it can be used in the filmstrip and waterfall.

@paulirish
Copy link
Contributor Author

SGTM!

@pmeenan
Copy link
Contributor

pmeenan commented Mar 20, 2020

Turns out it was easier than I expected (and no agent changes required). We were already storing the raw events with every test and the processing was done on the php side. I just needed to have the php extract the cumulative score (for the main frame) from the trace events.

That means we also already have all of the raw data we need for using the events in the filmstrip if we decide to.

For now CLS is only exposed in the HAR/JSON results and not in the UI. I'll have to freshen up the UI to use it as well as to switch the TTI metric to TBT.

https://www.webpagetest.org/jsonResult.php?test=200320_8S_f2aca4cc72b034a7ffe7650ea016f1f9&pretty=1

"chromeUserTiming.CumulativeLayoutShift": 0.0078584738

For now it is assuming a 0.0 as a starting value if there are no "LayoutShift" events in the main frame.

@pmeenan
Copy link
Contributor

pmeenan commented Mar 20, 2020

Probably worth mentioning, the data will be in the April HTTP Archive crawl if you're looking for it there since the March crawl is just finishing up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants