Lighthouse 7 + store html report

[rdpanek]

Upgrade Lighthouse on version 7

Actually 6.4.1

• [x] Changelog https://github.com/GoogleChrome/lighthouse/blob/master/changelog.md
• [x] Upgrade https://www.npmjs.com/package/lighthouse (7.3.0)
• [x] Check json result
• [x] Is possible add some labels to HTML report? (uuid or maybe contains of LABELS)
• [x] edit pipeline and chect audit stored in elasticsearch

Bookmarks

• Network + CPU Throttling https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#cpu-throttling
• CPU Throttling Calculator https://lighthouse-cpu-throttling-calculator.vercel.app/
• 💥 Breaking changes: formFactor: https://github.com/GoogleChrome/lighthouse/blob/9dbb0a57ff523325bb04437c4202780756afda90/docs/emulation.md#changes-made-in-v7
• 💥 Lighthouse now wait on done of requests with high priority
• HAR 1.2 spec http://www.softwareishard.com/blog/har-12-spec/
• Lighthouse default config https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/default-config.js

Other

• Lighthouse 7 is available from Chrome (Blink89)

[rdpanek]

Lighthouse 7 html report (full)

Format 2021-04-02T14/20/52.317Z-https---www-datart-cz-index-html.html

How to use: Store on PVC, save name of file to elasticsearch and download via browser

Lighthouse Report.pdf

[rdpanek]

Trace log

Log file: www.datart.cz_2021-04-01_13-33-33-0.trace.json Open chrome://tracing/ and load log file

How to use: Store on PVC, save name of file to elasticsearch and download via browser

Assets / film strip stored as base64

Flow and load speed metrics

Automatically parsing data

We can from trace log parsing:

• generate filmstrip images
• *histograms (more detailed times)

*histograms

name	unit	avg	count	max	min	std	sum	architectures	benchmarks	benchmarkStart	bots	builds	deviceIds	displayLabel	masters	memoryAmounts	osNames	osVersions	productVersions	stories	storysetRepeats	traceStart	traceUrls
trace_import_duration	ms	842.4099999829195	1	842.4099999829195	842.4099999829195	0	842.4099999829195							Value
timeToFirstPaint	ms	379.6729999780655	1	379.6729999780655	379.6729999780655	0	379.6729999780655							Value
timeToFirstContentfulPaint	ms	379.6729999780655	1	379.6729999780655	379.6729999780655	0	379.6729999780655							Value
cpuTimeToFirstContentfulPaint	ms	164.9523686192734	1	164.9523686192734	164.9523686192734	0	164.9523686192734							Value
timeToOnload	ms	1978.4799999594688	1	1978.4799999594688	1978.4799999594688	0	1978.4799999594688							Value
timeToFirstMeaningfulPaint	ms	1098.8659999966621	1	1098.8659999966621	1098.8659999966621	0	1098.8659999966621							Value
cpuTimeToFirstMeaningfulPaint	ms	707.8250430490292	1	707.8250430490292	707.8250430490292	0	707.8250430490292							Value
timeToInteractive	ms		0	-Infinity	Infinity		0							Value
totalBlockingTime	ms		0	-Infinity	Infinity		0							Value
timeToFirstCpuIdle	ms		0	-Infinity	Infinity		0							Value
aboveTheFoldLoadedToVisible	ms		0	-Infinity	Infinity		0							Value
timeToFirstViewportReady	ms		0	-Infinity	Infinity		0							Value
largestImagePaint	ms	1875.9469999670982	1	1875.9469999670982	1875.9469999670982	0	1875.9469999670982							Value
largestTextPaint	ms	1566.080999970436	1	1566.080999970436	1566.080999970436	0	1566.080999970436							Value
largestContentfulPaint	ms	1876	3	1876	1876	0	5628							Value
mainFrameCumulativeLayoutShift		0.0582275390625	1	0.0582275390625	0.0582275390625	0	0.0582275390625							Value
navigationStart	ms	5.234000027179718	1	5.234000027179718	5.234000027179718	0	5.234000027179718							Value
rectsBasedSpeedIndex	ms	1483.7659999728203	1	1483.7659999728203	1483.7659999728203	0	1483.7659999728203							Value
timeToFirstContentfulPaint:composite	ms	0.36299999999999955	1	0.36299999999999955	0.36299999999999955	0	0.36299999999999955							Value
timeToFirstContentfulPaint:gc	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:gpu	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:iframe_creation	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:imageDecode	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:input	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:layout	ms	60.928000015258846	1	60.928000015258846	60.928000015258846	0	60.928000015258846							Value
timeToFirstContentfulPaint:net	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:other	ms	25.505999929904345	1	25.505999929904345	25.505999929904345	0	25.505999929904345							Value
timeToFirstContentfulPaint:overhead	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:parseHTML	ms	21.89900000000003	1	21.89900000000003	21.89900000000003	0	21.89900000000003							Value
timeToFirstContentfulPaint:raster	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:record	ms	0.2790000000000532	1	0.2790000000000532	0.2790000000000532	0	0.2790000000000532							Value
timeToFirstContentfulPaint:renderer_misc	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:resource_loading	ms	13.820999999999941	1	13.820999999999941	13.820999999999941	0	13.820999999999941							Value
timeToFirstContentfulPaint:script_execute	ms	12.728999999999886	1	12.728999999999886	12.728999999999886	0	12.728999999999886							Value
timeToFirstContentfulPaint:script_parse_and_compile	ms	4.066000000000045	1	4.066000000000045	4.066000000000045	0	4.066000000000045							Value
timeToFirstContentfulPaint:startup	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:style	ms	41.40399999999994	1	41.40399999999994	41.40399999999994	0	41.40399999999994							Value
timeToFirstContentfulPaint:v8_runtime	ms	0	1	0	0	0	0							Value
timeToFirstContentfulPaint:idle	ms	198.67800003290242	1	198.67800003290242	198.67800003290242	0	198.67800003290242							Value
timeToFirstContentfulPaint:blocked_on_network	ms	0	1	0	0	0	0							Value
loadingMetric_duration	ms	309	1	309	309	0	309							Value
metrics_duration	ms	1151.4099999829195	1	1151.4099999829195	1151.4099999829195	0	1151.4099999829195							Value

[rdpanek]

devtoolslog.json

• https://github.com/sitespeedio/chrome-har is convertor from devtoolslog.json to HAR
• how to use: node node_modules/chrome-har/tools/harCreator.js ~/www.google.com_2018-11-28_11-31-08-0.devtoolslog.json

[rdpanek]

file size after one audit

-rw-r--r--@   1 rdpanek  staff   1,3M  1 dub 13:34 www.datart.cz_2021-04-01_13-33-33-0.devtoolslog.json
-rw-r--r--@   1 rdpanek  staff   7,7M  1 dub 13:34 www.datart.cz_2021-04-01_13-33-33-0.trace.json
-rw-r--r--@   1 rdpanek  staff   1,7M  1 dub 13:34 www.datart.cz_2021-04-01_13-33-33.report.html

• report.html is HTML Lighthouse audit report, HIGH priority
• trace.json is detailed log about milion operations on browser when is page loaded, HIGH priority for very detailed investigation, for CPU profile etc.
• devtoolslog.json is log from devtools and via convertor chrome-har is possible import to network tab for investigate

[rdpanek]

Lighthouse HTML report

Docker image 3.0.1 store

• html report to assets/
• into elasticsearch index c.audit-* e.g. "lighthouseReport": "./assets/2021-04-03T12:05:26.404Z-https---canarytrace-com-.html",