はじめに
こんにちは、エンジニアのkeitaMaxです。
Lighthouseというものについて全く知らなかったので調べてみました。
Lighthouseとは
Lighthouse は、ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。
(引用：https://developer.chrome.com/docs/lighthouse/overview?hl=ja)
LighthouseはWEBページに対して、WEBページの品質向上のためにSEOなどに対して無料で診断をしてくれるツールのことです。
以下の診断などが簡単にできるようです。
. Performance
. Accessibility
. Best Practices
. SEO
診断のやりかた
診断したいページでF12を押して開発者ツールを出します。
上のタブのLighthouseをクリックします。
すると以下のような画面がでるので、Analyze page loadのボタンを押します。
すると解析が始まります。
解析が終わると以下のように解析結果が表示されます。
パフォーマンスについて
WEBページのパフォーマンスについての評価になっています。
First Contentful Paint Largest Contentful Paint Total Blocking Time Cumulative Layout Shift Speed Index
の５つの指標で評価をされています。
公式には各指標について以下のように書かれていました。
First Contentful Paint
FCP は、ユーザーが最初にページに移動してから、ページのコンテンツの一部が画面にレンダリングされるまでの時間を測定します。
(https://web.dev/articles/fcp?hl=ja)
Largest Contentful Paint
ページのメイン コンテンツが読み込まれたと思われる時点を示します。
(https://web.dev/articles/lcp?hl=ja)
Total Blocking Time
First Contentful Paint（FCP）後、ユーザー入力へのレスポンスを妨げるのに十分な時間メインスレッドがブロックされた合計時間を測定します。
(https://web.dev/articles/tbt?hl=ja)
Cumulative Layout Shift
CLS は、ページの存続期間中に発生する予期しないレイアウト シフトごとに、レイアウト シフト スコアのバーストの最大値を測定します。
(https://web.dev/articles/cls?hl=ja)
Speed Index
Speed Index は、ページの読み込み中にコンテンツが視覚的に表示される速度を測定します。
(https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ja)
参考URL
ユーザー補助について(Accessibility)
ウェブページが障がいを持つユーザーにも利用しやすいかどうかを評価する機能のようです。
img要素に'alt'属性があったり、リンクが色に依存せずに区別できたりすると評価が上がるようです。
参考
ベストプラクティスについて
パフォーマンスやセキュリティなどのベストプラクティスに沿っているかを判断してくれるらしいです。
参考
SEOについて
ウェブページが検索エンジン最適化（SEO）についてどれだけしたがっているかを評価しているものになります。
metaタグやタイトルがついていることや、ページの読み込み速度が早いことなどが評価されるポイントとなります。
参考
おわりに
Lighthouse CIというものもあるので今後使用してみようと思います。
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！