Lighthouse とは？~概要と使用方法を解説~

2023年2月20日 カテゴリ - サイトスピード

Lighthouse（ライトハウス）とは、Google が無料で提供している Web サイトの評価をチェックすることができる Google Chrome の拡張機能です。

Web サイトのパフォーマンスや SEO 対策について評価します。

似たようなサービスに Google が提供する PageSpeed Insights があります。

この記事では、Lighthouse の導入方法とスコアの見方について解説します。

Lighthouse の使い方

Lighthouse とは

Lighthouse とは、Google が無料で提供している Web サイトのページを評価するツールです。
パフォーマンスやアクセシビリティ、SEO などの評価が可能です。
評価結果は、ページを改善するための指標として利用することができます。

Lighthouse 導入方法

①公式サイトにアクセスし、Chrome に追加をクリック

②拡張機能を追加をクリック

③「 Lighthouse」 が Chrome に追加されましたと表示されたらインストール完了です。

Lighthouse 使い方の流れ

Lighthouse は以下の4ステップでサイトを評価します。

①評価を確認したい Web サイトのページを開きます。
ここでは例として、Google の検索画面を開きます。

②Google Chrome の拡張機能一覧から Lighthouse のボタンをクリックします。

③Generate report のボタンをクリックします。

④結果が表示されます。

Lighthouse スコアの見方

Lighthouse のスコアは以下の5項目で評価されます。

それぞれスコアの結果が表示され、0〜49点は Low、50〜89点は Medium、90〜100点は Good です。

Performance

Performance は、Web サイトのページスピードを評価します。
なお、この項目で評価される指標は PageSpeed Insights と同じです。

First Contentful Paint（FCP）
FCP とは、ページの読み込みが開始されてから、ページ内のいずれかの要素が初めて描画されるまでの時間のことです。

Speed Index（SI）
SI とは、ページが表示されるまでの時間のことです。

Largest Contentful Paint（LCP）
LCP とは、ページ内の最もファイル容量の大きい画像や動画が表示されるまでの時間のことです。

Time to Interactive（TTI）
TTI とは、ページが表示されてユーザーが操作できるようになるまでの時間のことです。

Total Blocking time（TBT）
TBT とは、ユーザーのアクションに対してページがブロックされている合計時間のことです。

Cumulative Layout Shift（CLS）
CLS とは、ページの読み込みに応じて発生するレイアウトのズレのことです。

また、ページ下部には Google が提案するページの表示速度を向上させるための改善点を表示しています。

前述したとおり、この項目で評価される指標は PageSpeed Insights と同じです。
そのため、Performance について更に詳しく知りたい方は以下の記事をご覧ください。

【参考】PageSpeed Insights 入門｜見方や評価項目を徹底解説https://fastest.jp/blog/pagespeed-insights-howto/

Accessibility

Accessibility はサイトの訪問者や検索エンジンのクローラーなどに対してサイトが適切な作りになっているか評価します。
Lighthouse のレポートで監査される項目のほかに、Google が推奨する Accessibility の監査項目があります。

Best Practice

Best Practice ではブラウザのセキュリティやパフォーマンスを低下させる要素や品質向上に向けたアドバイスを確認できます。
そのうち、信頼と安全の項目はセキュリティの脆弱性を診断するため、重要度が高い場合は優先的に対策することを推奨します。

SEO 

SEO では正常な HTTP ステータスコードであるか、robots.txt によってページがブロックされていないかなど、基本的な SEO について確認できます。
SEO 対策を行うことで、検索順位の上位に表示されやすくなり、コンバージョンの獲得も見込めます。

Progressive Web App（PWA）

PWA とは、モバイルでの UI 改善と高速化に向けて Google が推奨する仕組みの一つです。
この仕組みを使ったウェブサイトはモバイルアプリとモバイルウェブのそれぞれのメリットを持ち、モバイル上での操作性が向上します。

この項目では、PWA に最適化されているか評価します。
Web サイトを PWA 化するために必要なチェックリストを基にスコアが表示されます。

【参考】優れたプログレッシブ Web アプリとは？
https://web.dev/pwa-checklist/

パフォーマンスや SEO では、PageSpeed Insights でも同じようなスコアを確認することができます。
次の章では、Lighthouse と PageSpeed Insights の違いについて解説します。

Lighthouse と PageSpeed Insights の違い

Lighthouse と PageSpeed Insights はどちらも Google が無料で提供しているツールです。
どちらも Web サイトのパフォーマンスを評価しますが、大きな違いが2つあります。

利用方法の違い

Lighthouse が Google Chrome の拡張機能であるのに対して、PageSpeed Insights は Web サービスです。
そのため、Lighthouse は利用者の実行環境にスコアが左右されてしまいます。
PageSpeed Insights は Google が用意するサーバーで計測するため、安定したスコアを得ることができます。

評価項目の違い

Lighthouse は Performance 、Accessibility 、Best Practice 、SEO 、PWA の5項目を評価します。
一方で、PageSpeed Insights は、Lighthouse の Performance について詳しく評価します。
Lighthouse と PageSpeed Insights に機能の違いはなく、Lighthouse の Performance を切り取ったものが PageSpeed Insights になります。

まとめ

本記事では、Lighthouse の概要と使用方法について解説しました。

Lighthouse は、Google が無料で提供する Google Chrome の拡張機能で、PageSpeed Insights と同じようにサイトのパフォーマンスについて評価します。

Lighthouse は一度に5項目を評価できるため、サイトを様々な角度から分析するのに役立ちます。

しかし、Google Chrome の拡張機能であるため、スコアが利用者の実行環境の影響を受けてしまいます。

そのため、パフォーマンスの計測のみであれば PageSpeed Insights を、様々な角度から評価したい場合は Lighthouse を使用するなど、使用目的に応じて使い分けることが重要です。

なお、当社では記事でも紹介したパフォーマンスの項目にもなっている Web サイトのページスピードを1クリックで改善できるランディングページ高速化ツール FasTest（ファーステスト） を開発・販売しています。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。