new_audit: add cumulative layout shift metric

[paulirish]

This lands CLS as an invisible metric

Scoring is uncalibrated still, as is determining how we surface a number between 0 and 2.0-ish to the user. :)

[patrickhulce]

excited to play around with the results of this!

[patrickhulce]

we probably don't need to bother with extending metricartifact since there's no difference between lantern and observed. it's only useful when we need to utilize the graph and account for both modes.

this should also help eliminate the .timing issue

[patrickhulce]

how beefy is this category?

[paulirish]

3% on a verge trace. not bad

[connorjclark]

why you hoarding this script paul

[paulirish]

/* eslint-disable */
'use strict';

const trace = require('../latest-run/defaultPass.trace.json');
const {traceCategories} = require('../lighthouse-core/gather/driver');

const traceCats = {};
// aggregate
let totalBytes = 0;
let totalEvents = 0;

trace.traceEvents.forEach(e => {
  let eventCats = e.cat;
  for (let eventCat of eventCats.split(',')) {
    // don't process cats we dont trace
    // if (!traceCategories.includes(eventCat)) return;
    if (e.name === 'ThreadControllerImpl::RunTask') eventCat += '::::::::RunTask';
    const cat = traceCats[eventCat] || {bytes: 0, events: 0};
    const bytes = JSON.stringify(e).length;
    cat.bytes += bytes;
    totalBytes += bytes;
    cat.events += 1;
    totalEvents += 1;
    traceCats[eventCat] = cat;
  }
});




// obj to array
const traceTotals = [];
Object.keys(traceCats).forEach(catname => {
	const cat = traceCats[catname];
	traceTotals.push({name: catname, bytes: cat.bytes, events: cat.events});
});

// sort and log
console.log('Bytes'.padStart(16), '\t', 'Count'.padStart(7), '\t', 'Event Name'.padStart(18))
traceTotals.sort((a, b) => b.bytes - a.bytes).forEach((tot, i) => {
	console.log(
    tot.bytes.toLocaleString().padStart(15), 
    `${(tot.bytes * 100/ totalBytes).toLocaleString(undefined, {maximumFractionDigits: 1})}%`.padStart(6),
    '\t', 
    tot.events.toString().padStart(9), 
    `${(tot.events * 100/ totalEvents).toLocaleString(undefined, {maximumFractionDigits: 1})}%`.padStart(6),
    '\t', 
    tot.name
  );
})

[paulirish]

been a while. its ready for a look!

[paulirish]

3% on a verge trace. not bad

[exterkamp]

The pattern we use is " ." So I took a stab at it.

"Cumulative Layout Shift is the sum of all layout shifts that occurred during a page's load. A layout shift is any movement an element makes once it is visible to the user. All layout shift is recorded, scored, and then aggregated into a cumulative score between 0 and 1; 0 being a perfectly stable page, and >=0.5 being a highly shifting page."

[exterkamp]

This bug was fixed, is this still valid?

Suggested change

	// TODO: Validate that. http://crbug.com/1003459
	// TODO(http://crbug.com/1003459): Validate that.

[exterkamp]

So this error will never be a runtime error, correct? Or it won't while it is a silent audit and not part of performance?

[connorjclark]

i wrote this comment idk how it got here in pauls pr :P

[connorjclark]

"this" error? This comment is a continuation of the previous line, and is referring to when proto must be edited. All of these errors are runtime errors.

[paulirish]

unitless