Lighthouse

Supported OS Linux

통합 버전2.2.0
이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

Overview

Get metrics from Google Chrome Lighthouse in real time to:

  • Visualize and monitor Lighthouse stats.
  • Track and audit scores for your websites accessibility, best practices, performance, PWA, and SEO audit scores.

Setup

The Lighthouse check is not included in the Datadog Agent package, so you need to install it.

Installation

For Agent v7.21+ / v6.21+, follow the instructions below to install the Lighthouse check on your host. See Use Community Integrations to install with the Docker Agent or earlier versions of the Agent.

  1. Run the following command to install the Agent integration:

    datadog-agent integration install -t datadog-lighthouse==<INTEGRATION_VERSION>

  2. Configure your integration similar to core integrations.

Configuration

  1. Edit the lighthouse.d/conf.yaml file in the conf.d/ folder at the root of your Agent’s configuration directory to start collecting your Lighthouse metrics. See the sample lighthouse.d/conf.yaml for all available configuration options.

  2. Restart the Agent

Requirements

  1. Node.js LTS (8.9+).

    • Check if Node.js and npm installed:
    node -v
npm -v

  2. Lighthouse:

    • Check if installed.
    # example
root@hostname:~# npm list -g --depth=0 | grep 'lighthouse'
|_ lighthouse@5.6.0
    • Install if not (no output from above command):
    npm install -g lighthouse

  3. Either Google Chrome/Chromium or Puppeteer.

    • Chromium

      • Debian/Ubuntu
      sudo apt-get update
sudo apt-get install -y chromium-browser
      • RHEL/CentOS
      sudo yum install -y epel-release
sudo yum install -y chromium

      Note: This integration runs Chrome/Chromium in headless mode. Chrome/Chromium may require kernel 4.4+ on RHEL/CentOS for the headless mode to work properly.

    • Puppeteer

      • Check if installed.
      # example
root@hostname:~# npm list -g --depth=0 | grep 'puppeteer'
|_ puppeteer@1.12.2
      • Install if not (no output from above command):
      npm install -g puppeteer --unsafe-perm=true

  4. Verify if dd-agent user is able to run the lighthouse cli.

    sudo -u dd-agent lighthouse <WEB_URL> --output json --quiet --chrome-flags='--headless'

Validation

Run the Agent’s status subcommand and look for lighthouse under the Checks section.

Data Collected

Metrics

lighthouse.accessibility
(gauge)		The google chrome lighthouse score for accessibility
Shown as percent
lighthouse.best_practices
(gauge)		The google chrome lighthouse score for best_practices
Shown as percent
lighthouse.performance
(gauge)		The google chrome lighthouse score for performance
Shown as percent
lighthouse.pwa
(gauge)		The google chrome lighthouse score for pwa
Shown as percent
lighthouse.seo
(gauge)		The google chrome lighthouse score for seo
Shown as percent
lighthouse.largest_contentful_paint
(gauge)		Largest Contentful Paint marks the time at which the largest text or image is painted.
Shown as millisecond
lighthouse.first_contentful_paint
(gauge)		First Contentful Paint marks the time at which the first text or image is painted.
Shown as millisecond
lighthouse.cumulative_layout_shift
(gauge)		Cumulative Layout Shift measures the movement of visible elements within the viewport.
Shown as unit
lighthouse.max_potential_fid
(gauge)		The maximum potential First Input Delay that your users could experience is the duration of the longest task.
Shown as millisecond
lighthouse.time_to_interactive
(gauge)		Time to interactive is the amount of time it takes for the page to become fully interactive.
Shown as millisecond
lighthouse.mainthread_work_breakdown
(gauge)		Consider reducing the time spent parsing compiling and executing JS. You may find delivering smaller JS payloads helps with this.
Shown as millisecond
lighthouse.unused_javascript
(gauge)		Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
Shown as millisecond
lighthouse.unused_css_rules
(gauge)		Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity.
Shown as millisecond
lighthouse.modern_image_formats
(gauge)		Image formats like WebP and AVIF often provide better compression than PNG or JPEG which means faster downloads and less data consumption.
Shown as millisecond
lighthouse.uses_optimized_images
(gauge)		Optimized images load faster and consume less cellular data.
Shown as millisecond
lighthouse.render_blocking_resources
(gauge)		Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
Shown as millisecond
lighthouse.bootup_time
(gauge)		Consider reducing the time spent parsing compiling and executing JS. You may find delivering smaller JS payloads helps with this.
Shown as millisecond
lighthouse.server_response_time
(gauge)		Keep the server response time for the main document short because all other requests depend on it.
Shown as millisecond
lighthouse.speed_index
(gauge)		The number of milliseconds it takes for the contents of a page to be visibly populated.
Shown as millisecond
lighthouse.dom_size
(gauge)		The current size of the DOM. A large DOM will increase memory usage cause longer style calculations and produce costly layout reflows.
lighthouse.total_blocking_time
(gauge)		Sum of all time periods between FCP and Time to Interactive when task length exceeded 50ms expressed in milliseconds.
Shown as millisecond

Events

The Lighthouse integration does not include any events.

Service Checks

The Lighthouse integration does not include any service checks.

Troubleshooting

Need help? Contact Datadog support.