Lighthouse

Supported OS Linux

インテグレーションバージョン2.1.1

概要

Google Chrome Lighthouse からリアルタイムにメトリクスを取得して、

  • Lighthouse 統計を視覚化および監視できます。
  • Web サイトのアクセシビリティ、ベストプラクティス、パフォーマンス、PWA、および SEO 監査スコアを追跡および監査できます。

セットアップ

Lighthouse チェックは Datadog Agent パッケージに含まれていないため、お客様自身でインストールする必要があります。

インストール

Agent v7.21 / v6.21 以降の場合は、下記の手順に従い Lighthouse チェックをホストにインストールします。Docker Agent または 上記バージョン以前の Agent でインストールする場合は、コミュニティインテグレーションの使用をご参照ください。

  1. 以下のコマンドを実行して、Agent インテグレーションをインストールします。

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

  2. コアのインテグレーションと同様にインテグレーションを構成します。

コンフィギュレーション

  1. Lighthouse のメトリクスの収集を開始するには、Agent のコンフィギュレーションディレクトリのルートにある conf.d/ フォルダーの lighthouse.d/conf.yaml ファイルを編集します。 使用可能なすべてのコンフィギュレーションオプションについては、lighthouse.d/conf.yaml のサンプルを参照してください。

  2. Agent を再起動します。

要件

  1. Node.js LTS (8.9 以降)。

    • Node.js と npm がインストールされているかどうかを確認します。
    node -v
npm -v

  2. Lighthouse:

    • インストールされているかどうかを確認します。
    # example
root@hostname:~# npm list -g --depth=0 | grep 'lighthouse'
|_ lighthouse@5.6.0
    • インストールされていない (上記のコマンドからの出力なし) 場合はインストールします。
    npm install -g lighthouse

  3. Google Chrome/Chromium または 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

      注: このインテグレーションでは、Chrome/Chromium がヘッドレスモードで実行されます。Chrome/Chromium では、ヘッドレスモードが適切に機能するために、RHEL/CentOS でカーネル 4.4 以降が必要になる場合があります。

    • Puppeteer

      • インストールされているかどうかを確認します。
      # example
root@hostname:~# npm list -g --depth=0 | grep 'puppeteer'
|_ puppeteer@1.12.2
      • インストールされていない (上記のコマンドからの出力なし) 場合はインストールします。
      npm install -g puppeteer --unsafe-perm=true

  4. dd-agent ユーザーが lighthouse cli を実行できるかどうかを確認します。

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

検証

Agent の status サブコマンドを実行し、Checks セクションで lighthouse を探します。

収集データ

メトリクス

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

イベント

Lighthouse インテグレーションには、イベントは含まれません。

サービスのチェック

Lighthouse インテグレーションには、サービスのチェック機能は含まれません。

トラブルシューティング

ご不明な点は、Datadog のサポートチームまでお問合せください。