Update programmatic example to delete results.artifacts

[12d]

I checked every 'report.html', file size of each report is larger than 20M bytes. It is impossible to serve on websites. Is there any way to shrink the size?

[kdzwinel]

Thank you for reporting! Can you please share a website for which you are getting such huge reports? I personally, haven't seen a report file larger than 1,5M. Lighthouse version used may also come in handy.

---

I did some quick analysis of our report files and the static part is ~150Kb, everything else goes into the __LIGHTHOUSE_JSON__.

Looking into __LIGHTHOUSE_JSON__ I found out that:

1. audit results are included twice (in .reportCategories and .audits),
2. additionally, audits that are shared between multiple categories (e.g. viewport) are repeated in each category,
3. extendedInfo, which makes a huge percentage of many audits, is included for all audits but only used in performance category.

Static part can also be slimmed down (we can minify js/css/html), but improvement here will be way less significant than what can be done with __LIGHTHOUSE_JSON__.

I can take a stab at points 1 and 2.

[patrickhulce]

Thanks for the analysis @kdzwinel let's add some of these to #4333 since there are some reasonable reliances on the duplication at the moment :)

@12d if you're using Lighthouse programmatically from node and building the report yourself, it's likely that you're forgetting to delete the .artifacts property before building the report HTML. If not, definitely give us a URL so we can check this out. I've never seen a real report be 20MB, they must have some gnarrly data URI images 😆

[ganlanyuan]

Hey @patrickhulce ,
Could you let us know how to delete the .artifacts property? I just follow the example here and got a html file of 77.5MB.

[patrickhulce]

@ganlanyuan if you're just trying to get the same result as the CLI and get a regular HTML report you can follow its lead

lighthouse/lighthouse-cli/run.js

Lines 170 to 175 in 278d1e7

	return lighthouse(url, flags, config).then(results => {
	return potentiallyKillChrome().then(_ => results);
	}).then(results => {
	const artifacts = results.artifacts;
	delete results.artifacts;
	return saveResults(results, artifacts, flags).then(_ => results);

[ganlanyuan]

@patrickhulce Thanks!
I got the file size reduced to 2.4MB. It's amazing!
But still there is a big inline <script> starts from window.__LIGHTHOUSE_JSON__ = {"userAgent" which seems can't be reduced.

[patrickhulce]

Yes that's the JSON results from which the HTML is rendered, so there's probably not any more immediate win. #4333 tracks several improvements to reduce the size but will be breaking changes (since we'll be removing properties)