Tip: see Lighthouse Architecture for information on terminology and architecture.
This example shows how to write a custom Lighthouse audit for a hypothetical search page. The page is considered fully initialized when the main search box (the page's "hero element") is ready to be used. When this happens, the page uses performance.now()
to mark the time it took to become ready and saves the value in a global variable called window.myLoadMetrics.searchableTime
.
-
searchable-gatherer.js - a Gatherer that collects
window.myLoadMetrics.searchableTime
from the context of the page. -
searchable-audit.js - an Audit that tests whether or not
window.myLoadMetrics.searchableTime
stays below a 4000ms threshold. In other words, Lighthouse will consider the audit "passing" in the report if the search box initializes within 4s. -
custom-config.js - this file tells Lighthouse where to find the gatherer and audit files, when to run them, and how to incorporate their output into the Lighthouse report. This example extends Lighthouse's default configuration.
Note: when extending the default configuration file, all arrays will be concatenated and primitive values will override the defaults.
Run Lighthouse with the custom audit by using the --config-path
flag with your configuration file:
lighthouse --config-path=custom-config.js https://example.com