lighthouse/report

Lighthouse HTML Report Renderer

Overview

Lighthouse has an independent report renderer that takes the LHR (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.

Example standalone HTML report, delivered by the CLI: dbwtest-3.0.3.html (View the source! 📖)

Report Renderer components

1. report/generator/report-generator.js is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
   • It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses inline-fs, which takes any fs.readFileSync() calls and replaces them with the stringified file content.
2. report/renderer are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
3. report/assets/standalone-template.html is where the client-side build of the DOM report is typically kicked off (with these four lines) However, see Current Uses.. below for more possibilities.

Data Hydration

innerHTML is deliberately not used. The renderer relies on basic createElement as well as multiple components defined in <template> tags that are added via document.importNode() and filled in via the querySelector/textContent combo.

Examples:

• templates.html
• performance-category-renderer.js

Current uses of report renderer

The renderer was designed to be portable across various environments.

1. LH CLI: It creates the HTML as the runner finishes up and saves it to disk.
2. Chrome DevTools Lighthouse Panel: The renderer files are rolled into the Chromium repo, and they execute within the DevTools context. The Lighthouse panel receives the LHR object from a WebWorker, through a postMessage and then runs the renderer within DevTools UI, making a few simplifications.
3. Hosted Lighthouse Viewer: It's a webapp that has the renderer (along with some additional features) all compiled into a main-XXX.js file. Same basic approach there.