lighthouse

Lighthouse HTML Report Renderer

Source on Github

Overview

Lighthouse has an indepedent 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. lighthouse-core/report/report-generator.js is the current entry point. 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 a browserify transform that takes any fs.readFileSync() calls and replaces them with the stringified file content.
  2. lighthouse-core/report/html/ has everything required to create the HTML report.
  3. lighthouse-core/report/html/renderer are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
  4. lighthouse-core/report/html/report-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:

Current uses of report renderer

The renderer was designed to be portable across various environments.

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

Polyfills

The details-element-polyfill is pulled in to provide support for Microsoft Edge.

This site is open source. Improve this page.