Lighthouseの使い方【Webサイトのパフォーマンス測定】

Googleが提供するLighthouseを利用すれば、Webサイトの「品質改善」や「SEO対策」に役立つ情報を確認できます。ここでは、Lighthouseの利用方法について確認します。

使い方

3つの方法があります。

Chrome DevToolsから利用

実行

ここでは、Chrome DevToolsから利用してみます。

622-tool-lighthouse_audit.png

Auditsパネル から実行できます。

「ターゲットとなるDevice」や「監査項目」を設定してRun auditsをクリックします。

実行結果|全体

622-tool-lighthouse_result_0.png

各監査カテゴリごとの点数を確認できます。

Lighthouse Scoring Guide

実行結果|Performance

622-tool-lighthouse_result_1.png

「DOMコンテンツの最初の部分がレンダリングされるまでの時間」
「操作可能になるまでの時間」
などを確認できます。

実行結果|Progressive Web App

622-tool-lighthouse_result_2.png

以下、PWAのチェックリストをもとにPWAの仕様を満たしているかチェックします。

Progressive Web App Checklist

実行結果|Accessibility

622-tool-lighthouse_result_3.png

imgタグalt属性を設定しているか」
など、サービスの利用しやすさをチェックします。

実行結果|Best Practices

622-tool-lighthouse_result_4.png

HTTPSを利用しているか」
「廃止予定のAPIを利用してないか」
などチェックします。

実行結果|SEO

622-tool-lighthouse_result_5.png

titleタグが設定されているか」
など、SEOの観点でチェックします。

詳細の確認

各監査項目ごとに詳細リンクが貼られており、そこから改善方法など調べることができます。

参考