Ideas for trimming the LHR

The LHR is getting big, often 1MB or more. Some unnecessary things we could trim:

• a11y per-node explanation are on every details item, often repeated verbatim on multiple nodes, and we don’t use them in the report
• tap-targets includes all possible bad targets. We should limit the number.
• full page screenshot could be recaptured with lower quality (or reduced height) https://github.com/GoogleChrome/lighthouse/pull/11689

Feel free to add to the list.

[paulirish]

Little hack for a sunburst viz of an LHR’s size…

1. Go to https://vasturiano.github.io/sunburst-chart/example/large-data/
2. Copy an LHR into your clipboard.
3. lhr = <paste>
4. run this in console or snippets:

isPlainObject = function (obj) {
	return Object.prototype.toString.call(obj) === '[object Object]';
};

function calcObjSize(obj) {
 // recurse if array or object.
 if (Array.isArray(obj) || isPlainObject(obj)) {
    return Object.entries(obj).map(([key, value]) => {
     const node = {name: key};
     const nodeValue = calcObjSize(value, {});
     node[typeof nodeValue === 'number' ? 'value' : 'children'] = nodeValue;
     return node;
   });
 } else {
   return JSON.stringify(obj, null, 2).length;
 }
}

data = {
  children: calcObjSize(lhr),
  name: 'lhr',
};


document.querySelector('#chart').innerHTML = '';

    Sunburst()
      .data(data)
      .color(d => color(d.name))
      .minSliceAngle(.4)
      .showLabels(false)
      .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
    (document.getElementById('chart'));

example:

[paulirish]

what’s so bad about big LHRs anyway?