ローカル環境でWEB解析をする

Lighthouse CLI を使ってローカル環境で HTML ファイルやローカルサーバーを解析する手順を以下にまとめました。

Lighthouse CLI のインストール

Lighthouse CLI は Node.js パッケージとして提供されています。以下のコマンドを実行してインストールします。

npm install -g lighthouse

これで Lighthouse CLI がグローバルにインストールされます。

ローカルサーバーの準備

Lighthouse CLI は URL を解析対象とするため、ローカルファイルを直接指定することはできません。HTML ファイルをローカルサーバー上でホスティングする必要があります。もしフレームワークなどを使用していてすでにlocalhost:3000や、127.0.0.1:8000などでローカルでホスティングされている場合はこの手順はスキップできます。

ローカルサーバーを立てる簡単な方法

http-server をインストール（簡易なローカルサーバーのツール）：

npm install -g http-server

HTML ファイルのあるディレクトリに移動：

cd /path/to/your/html-files

サーバーを起動（ポート番号を指定）：

http-server -p 8080

これで http://localhost:8080 にアクセス可能なローカルサーバーが起動します。

Lighthouse CLI を使って解析

ローカルサーバーが起動したら、以下のコマンドで Lighthouse を実行します：

lighthouse http://localhost:8080 --view

コマンドの説明

http://localhost:8080: 解析対象のURL（ローカルサーバーのアドレス）。
-view: 解析結果をブラウザで開くオプション。

解析結果の確認

Lighthouse が解析を実行すると、以下のような結果が得られます：

パフォーマンススコア（読み込み速度など）
アクセシビリティ（スクリーンリーダー対応など）
ベストプラクティス（セキュリティ設定など）
SEO（検索エンジン最適化）
PWA（Progressive Web Apps） 対応状況

解析結果はブラウザで開かれ、スコアや改善点を確認できます。

結果をファイルとして保存

Lighthouse の結果をファイルとして保存したい場合は、以下のオプションを使用します：

lighthouse http://localhost:8080 --output html --output-path ./report.html

出力のオプション

-output html: 出力形式をHTMLに設定。
-output-path ./report.html: 出力先のファイルパスを指定。

実行後、指定した場所に report.html というファイルが生成されます。

追加オプション

Lighthouse CLI には、さまざまなオプションが用意されています：

モバイルモードで解析（デフォルト）：

lighthouse http://localhost:8080

デスクトップモードで解析：

lighthouse http://localhost:8080 --preset=desktop

特定のカテゴリーだけ解析（例: パフォーマンスのみ）：

lighthouse http://localhost:8080 --only-categories=performance

まとめ

この方法を使えば、ローカル環境でも簡単に Lighthouse を利用してページの品質を解析できます！httpでのリクエストであることなどで不利な評価となることがありますが、公開前のチェックとしては有効だと思いますのでぜひやってみてください！