ホームページの品質を無料で診断！Lighthouseの導入と使い方
更新日：2024年04月01日

ホームページを公開したものの、思うように訪問者が集まらず悩んでいる方は多いのではないでしょうか。
ホームページの品質が悪ければ、検索エンジンに上位表示されにくく、訪問者を呼び込めないのは当然です。
そこで、ホームページの品質を無料で診断できるGoogleの優れたツール「Lighthouse」をご紹介します。
Lighthouseを使えば、ホームページの問題点がすぐにわかるので、効率的に品質改善ができます。
この記事では、Lighthouseの概要から導入方法、使い方までを解説します。
ホームページの品質アップに役立ててください。

Lighthouseとは

Lighthouseとは、Googleが提供しているオープンソース(無料)の自動化ツールです。
特定のホームページをチェックし、改善すべき項目を自動でレポートしてくれます。

Lighthouseはもともと、ホームページの読み込み速度や使いやすさなど、ホームページ自体の品質を評価するツールでした。
2018年にSEO(検索エンジン最適化)チェック機能が追加され、ホームページの運営者だけでなく、マーケティング担当者にも役立つツールとなりました。
また、従来は英語表示のみでしたが、2021年3月のバージョンアップで日本語表示にも対応しました。

Lighthouseの名前の由来は「灯台」です。
灯台が船の目印となるように、Lighthouseもホームページの運営者にとっての羅針盤となる存在なのです。

Lighthouseでチェックできる項目

Lighthouseでチェックできる項目は、大きく分けて5つあります。

Performance(パフォーマンス)
Progressive Web App(プログレッシブウェブアプリ)
Accessibility(アクセシビリティ)
Best Practices(ベストプラクティス)
SEO(検索エンジン最適化)

Performance

Performanceは、CSSやJavaScriptを最適化するうえで押さえるべきホームページの読み込み速度を評価する項目です。

Performanceでは、以下の6つの要素をチェックできます。

First Contentful Paint(FCP/最初のコンテンツ表示時間)
Speed Index(スピードインデックス)
Largest Contentful Paint(LCP/最大コンテンツ表示時間)
Time to Interactive(TTI/インタラクティブ時間)
Total Blocking Time(TBT/総ブロック時間)
Cumulative Layout Shift(CLS/レイアウトシフト)

これらの指標が良好であれば、ホームページの読み込み速度は速いと評価されます。
逆に、指標が悪ければ読み込み速度の改善が必要だと判断されます。

Progressive Web App

Progressive Web App(プログレッシブウェブアプリ)は、ネイティブアプリのような体験を提供するウェブアプリのことです。
Lighthouseではこの品質を評価します。

Accessibility

Accessibilityは、ホームページのアクセシビリティ(利用しやすさ)を評価する項目です。
視覚障がい者や高齢者など、すべてのユーザーが快適にホームページを利用できるかをチェックします。

Best Practices

Best Practicesは、ホームページの安全性やプライバシー保護など、ウェブの最適なプラクティス(手法)に沿っているかを評価する項目です。

SEO

SEOは、検索エンジン最適化の観点からホームページを評価する項目です。メタデータの設定状況や、構造化データの利用状況などをチェックします。

Lighthouseの導入方法

Lighthouseは、Google Chromeの拡張機能としてインストールすることで使用できます。
導入手順は以下の通りです。

Google Chromeを起動する
公式サイト(https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)にアクセスし、「Chromeに追加」をクリックする
確認ダイアログで「拡張機能を追加」をクリックする

これでLighthouseがChromeに追加されました。
ブラウザの右上に灯台のアイコンが表示されていれば導入完了です。

Lighthouseの使い方

Lighthouseの使い方は非常に簡単です。

診断したいホームページを開く
ラウザの右上にある灯台のアイコンをクリックする
「Generate report」をクリックする

するとLighthouseが自動でホームページの診断を開始します。
診断には1~2分程度かかります。

診断が完了すると、先ほど説明した5つの項目ごとに評価結果が表示されます。
各項目は100点満点で採点され、90点以上なら◯(緑)、50~89点ならロ(黄)、49点以下ならバツ(赤)で示されます。

例えば、Performanceの項目でバツが出た場合は、ホームページの読み込み速度に課題があることを意味します。
バツやロの項目をクリックすると、具体的な改善案が表示されるので、それに従ってホームページを修正していけば良いでしょう。

<!-- ホームページのHTMLサンプル -->
<!DOCTYPE html>
<html>
  <head>
    <title>サンプルホームページ</title>
    <meta name="description" content="これはサンプルのホームページです">
  </head>
  <body>
    <h1>サンプルホームページ</h1>
    <p>ホームページの内容がここに入ります。</p>
  </body>
</html>

上記は簡単なホームページのHTMLサンプルですが、Lighthouseで診断するとSEOの項目で低評価になる可能性があります。
メタデータの設定が不十分だからです。Lighthouseの改善案に従って、キーワードの設定やOGPの追加などを行えば、SEOの評価は上がるでしょう。

このように、Lighthouseはホームページの課題を具体的に指摘してくれるので、ひとつずつ改善を重ねていけば、品質の高いホームページに生まれ変わります。

まとめ

Lighthouseは、Googleが無料で提供しているホームページの品質診断ツールです。
導入は簡単で、使い方も難しくありません。
診断結果から具体的な改善案が得られるので、ホームページの品質を効率的にアップできます。
ホームページの訪問者数が伸び悩んでいる方は、ぜひLighthouseを活用してみてください。
ホームページの品質が上がれば、検索エンジンの上位表示も期待できます。
ホームページの品質アップに役立ててください。

記事一覧へ戻る

検索ボックスへキーワードを入力してください

ホームページの品質を無料で診断！Lighthouseの導入と使い方更新日：2024年04月01日