1. TOPTOP
  2. Webサービス
  3. Google
  4. cmd + option + I →Chrome dev Tools→[Audits] タブでLighthouseを起動させる方法

cmd + option + I →Chrome dev Tools→[Audits] タブでLighthouseを起動させる方法

chrome_dev_tool_audit_0

Googleが提供するWebサイト/Webアプリのパフォーマンスやアクセシビリティを診断するツールとして、「Lighthouse」というツールがあります。そのLighthouseを使うためにmacOSであれば、“cmd + option + I” →Chrome dev Tools→[Audit] タブから使用することができます。

[Audit] タブから「Lighthouse」を使用する方法

chrome_dev_tool_audit_1

自分が運営しているWebサイトやブログサイトをChromeで表示させて、”cmd + option + I”のショートカットキーを入力します。

[Run Audits]のクリックまで

chrome_dev_tool_audit_2

Chrome dev Toolsが表示されます。上記の画像では[Element]が表示されていますが、[Audit]タブをクリックします。

chrome_dev_tool_audit_3

[Run Audits]をクリックすると、Lighthouseでパフォーマンスやアクセシビリティを計測できる状態になります。

計測結果の表示

chrome_dev_tool_audit_5

ちなみに[Run Audits]をクリックしたのち、Lighthouseでパフォーマンスやアクセシビリティを計測するとこんな感じになります。

Chrome拡張機能との比較

今回の記事ではChrome dev Toolsの[Audit] タブからLighthouseを起動させる方法をご紹介しました。ただLighthouseはChromeの拡張機能から使うこともできます。

chrome_dev_tool_audit_4

もっともChromeの拡張機能からLighthouseを使うと、あまり細かい設定ができません。ですので計測対象のWebサイトをデバイスや通信環境(Thortlling)などの観点から詳しく分析するためには、[Audit] タブからLighthouseを使った方が得策かもしれませんね。