(Browsing)

ゆっくり見ていってね！ ＞

writer : Tomoya Okada

Lighthouse CIで行うローカル環境のパフォーマンス計測

Lighthouse CIで行うローカル環境のパフォーマンス計測の画像

こんにちは、Okadaです。
Webサイトを作っていく上で、要件定義・デザイン・実装など様々な対応項目があります。
その中でも「パフォーマンス調整」は、サイト品質を向上させる上で大変重要な項目としてあります。

一般的にパフォーマンス計測で有名なツールといえば、ブラウザ上で確認できるPageSpeed Insightsではないでしょうか。
ですが、PageSpeed Insightsは基本的に公開URLを対象に計測するため、開発中のローカル環境をそのまま確認する用途には向いていません。

特に実装者の方は、ローカルサーバーで速度計測できないかな...と感じたことはないでしょうか。
今回はローカルサーバーでもパフォーマンス計測ができるLighthouse CIについてご紹介したいと思います。


Lighthouse CIとは

Lighthouseの計測を継続的に実行し、結果の保存・比較・共有を行いやすくするツールです。ローカル環境でも利用でき、開発中のページを対象にレポートを出力できます。




インストール

まずはインストールを行います。
今回使用するのは @lhci/cli です。これは Lighthouseをコマンドラインから実行・保存しやすくしたツールで、ローカル環境でも計測を行えます。
npmでのセットアップで案内をしたいと思います。

npm i -D @lhci/cli



ファイル設定

今回はAstroなどの静的生成(SSG)サイトを前提に、基本的な設定例を紹介していますので、カスタマイズする場合も、この構成をベースに調整すると分かりやすいと思います。
Lighthouseはデフォルトでモバイル寄りの設定で計測されるため、モバイル用とデスクトップ用で設定ファイルを分けて作成します。

# lighthouserc.mobile.cjs
module.exports = {
  ci: {
    collect: {
      staticDistDir: "./dist",//LHCIが「静的サーバー」で配信して計測する設定(dist をそのまま配信できる静的サイト向け)
      url: ["http://localhost/"],//計測対象URL
      numberOfRuns: 3,//同じURLを何回計測するか（スコアのブレを減らすため複数回が推奨）
    },
      upload: { 
      target: "filesystem", 
      outputDir: "./lhci/mobile" // 出力先ディレクトリ
    },
   },
 };


# lighthouserc.desktop.cjs
module.exports = {
  ci: {
    collect: {
      staticDistDir: "./dist",
      url: ["http://localhost/"],
      numberOfRuns: 3,
      settings: { preset: "desktop" },
    },
      upload: { 
      target: "filesystem", 
      outputDir: "./lhci/desktop"
    },
   },
 };



package.json追記

計測用のファイルを追加したので、それらをコマンドで実行できるようにしていきます。
モバイルのみ・デスクトップのみ・全ての3つ指定できるようにしています。

{
"scripts": {
    "build": "astro build",
    "lhci:mobile": "npm run build && lhci autorun --config=./lighthouserc.mobile.cjs",
    "lhci:desktop": "npm run build && lhci autorun --config=./lighthouserc.desktop.cjs",
    "lhci:all": "npm run lhci:mobile && npm run lhci:desktop"
    }
 }



計測実行

モバイルとデスクトップを一気に計測したいので、以下のコマンドで実行を行います。

npm run lhci:all


しばらく計測処理が走るので完了するまで待ちましょう。
完了すると lhci フォルダ配下に、HTML / JSON レポートと manifest.json が出力されます。



私の場合は、AIにフォルダ毎見てもらって結果をまとめてもらうようなことをしています。そうすることによって、改善点なども一緒に洗い出すことができるのでおすすめです。



最近では、この結果からAIとやりとりをしてできるだけスコアを改善できるように少しずつ調整を行うことが多いです。
例えば、出力されたレポート一式をAIに見てもらい、「スコアが低い原因」「優先して直すべき項目」「モバイル/デスクトップ差分」などを整理してもらっています。
ローカル上ではあるので、公開後に多少の誤差はあるかもしれませんが、この段階でスコアを改善しておけると後々の負荷が減るのかなと考えています。

もし個別にレポートを開きたい場合は以下のコマンドで確認できます。

# macOSの場合
open lhci/mobile/*.html
open lhci/desktop/*.html

# windowsの場合
# Windows ではフォルダを開き、その中の HTML ファイルをブラウザで確認します。
start lhci\mobile
start lhci\desktop



まとめ

Lighthouse CIについて、ご紹介させていただきました。
今回の設定は最低限のものになりますが、他にもGitHub Actionsに組み込めたりと非常に拡張性が高いです。
ローカル計測はあくまで開発段階での目安ですので、実際の本番環境では様々な影響も受けるため、公開後はPageSpeed InsightsやChrome DevToolsでも併せて確認するようにしてください。

Lighthouse CIを導入して皆さんもぜひパフォーマンス計測をして改善を行っていきましょう。
最後まで読んでいただき、ありがとうございました。

(Browsing)