GoogleのWebサイトのパフォーマンス計測ツール、「Lighthouse」の使い方

ページ速度やSEO、PWAなどの確認をしたい時Googleが開発した「Lighthouse」が便利です。

Lighthouseとは?

Lighthouseはパフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAの状態が分かります。

Google公式のデータなので安心ですね。

導入方法

Google Chromeをダウンロード

Google Chromeを現在使っている場合はこの項目をスキップしてOKです。

まずGoogle Chromeをダウンロードしインストールして起動します。

参考 Google Chrome ウェブブラウザGoogle

拡張機能を追加

Google ChromeをインストールしたらLighthouseの拡張機能を追加します。

参考 LighthouseChrome ウェブストア

サイトを診断する

診断したいサイトに行ってからLighthouseの拡張機能をクリックしGenrate report(レポートを生成する)をクリックし診断してみましょう。

因みにですがGoogle Chromeの開発者ツールにLighthouseがありますが拡張機能を沢山入れていたりすると、正確に計測されない場合があるので拡張機能で計測することをおすすめします。

使い方

計測してエラーが出たらその項目をクリックするとアコーディオンが開きます。

すると以下のような画像に解説が出て「詳細をご覧ください」というリンクをクリックするとGoogleが運営しているweb.devというサイトで詳しく解説されています。(英文です)

これをどんどん改善していけばSEOなどの改善が出来ますね。