WEBサイト評価チェックツールのLighthouseとは何か?概要や使用方法を解説

Lighthouseとは何か?WEBサイト評価チェックツールの概要や使用方法を解説

Lighthouseとは

Lighthouseとは、Googleが無料で提供している拡張機能です。このツールでは、WEBサイトを「Performance」「Accessibility」「Best Practices」「SEO」「Progressive Web App」の5つの観点から分析・診断します。そうすることで、サイトのどの点に課題があるかを把握し、成果改善に役立てることができます。

モバイルフレンドリーテストの終了に伴う代替ツールとして

Lighthouseの類似ツールのひとつとして、モバイルフレンドリーテストがあります。こちらもまたGoogleが無料で提供しているツールで、サイトをスマートフォンで表示した際の閲覧のしやすさといったパフォーマンスを評価してくれます。
しかし、モバイルフレンドリーテストは2023年12月1日をもって提供終了となり、使用できなくなったため、これに代わるツールのひとつとして、Lighthouseを使用するという手段が挙げられます。

Lighthouseの導入方法

ここでは、Lighthouseの導入方法について解説します。
前述の通り、LighthouseはGoogleの拡張機能であるため、Chromeで使用することができます。まずブラウザを起動したら、Lighthouseの公式ページ(https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)へアクセスします。ページの右上に[Chromeに追加]ボタンがあるので、そちらをクリックすると、「『Lighthouse』を追加しますか?」というメッセージが出るため、メッセージ内の[拡張機能を追加]をクリックしましょう。
「『Lighthouse』がChromeに追加されました」という表示が出れば導入完了です。拡張機能メニューから選択することで使用可能となります。

Lighthouseの使い方

では次に、導入したLighthouseの使い方に関して解説します。
まず、分析・評価したいWEBサイトやページにアクセスします。次に、拡張機能メニューからLighthouseを選択し、[Ganerate report]をクリックしましょう。
しばらくすると、先述した項目別に分析結果が表示されます。各項目は100点満点評価となっており、0〜49点、50〜89点、90〜100点という区分で評価の段階が区分されています。各項目の数値やエラーメッセージを確認し、サイトのパフォーマンスを分析しましょう。

Lighthouseにおけるチェック項目について

ではLighthouseの各項目について、どういうものか詳細を見ていきましょう。

Performance

Performanceは、サイトやページの読み込みスピード、画像の表示速度、ユーザー操作への応答スピードといった、サイトの速度に関する性能を評価しています。
[メトリクス]にそれぞれのチェックポイントにおけるスピードが表示され、より改善すべきポイントは赤字やオレンジの文字で、クリアしている項目に関しては緑の文字で表示されます。
この項目の評価を改善するためには、画像サイズが適切なものになっているか、ページのリダイレクトの回数は複数回ではないか、サイト内のファイルを圧縮しているか、を確認する必要があります。 どこに原因があるかは、[診断]のメッセージを確認しましょう。
上記が適切に処理されていないと、サイトのパフォーマンススピードの遅延に繋がり、結果として流入したユーザーの離脱を誘発してしまう原因となります。

Accessibility

Accessibilityは、ユーザーおよび検索エンジンのクローラーに対して、サイトの構成が見やすいもの・クロールしやすいものになっているかを評価したものです。チェックポイントとしては、

  • 画像にaltタグが適切に設定されているか

  • 背景色と文字などの色のコントラストは適切か

  • 見出しタグが適切なものに指定されているか

  • HTMLが最適化されているか

  • ボタンの名称は適切なものになっているか

等といった点が挙げられます。上記のようなポイントをクリアすることで、ユーザーにとってもクローラーにとっても見やすいサイトを構築することができます。

Best Practices

この項目では、使い勝手やセキュリティの観点から評価を行います。サイトURLがSSL化されているか、推奨されたJavaScript ライブラリ等を使用しているかを判定し、サイトの信頼性を評価します。

SEO

SEOは文字通り、サイトにおいてSEO施策が十分に行われているかを評価します。この項目の点数が高いほど、サイト構造が検索エンジンに評価を受けやすい状態となっています。
具体的には、メタディスクリプションが設定されているか、モバイルフレンドリーになっているか、canonicalタグの設定やリンクの文字列は適切か、といったポイントをチェックしていきます。

Progressive Web App

この項目は、モバイルにおける操作性やUI向上に関するものです。ページの読み込み速度が最適化されているか等の状態を評価します。特にBtoCのサービスサイト等、モバイル流入の多いサイトにおいては、特に重要視すると良いでしょう。

まとめ

検索エンジンへの最適化の観点やユーザーにとって使いやすいものであるかといった観点で、ページの速度やサイト構造を評価していくことは、チェックするべき要素も多く、データを整理して見ていくことはなかなか難しいものであると言えます。Lighthouseのようなツールを使用し、よりサイトの状況を詳しくかつ定量的に分析することで、より効果的なサイト改善につなげていきましょう。

いかがでしたでしょうか?皆さんにとって有用なコンテンツとなっていれば幸いです。

また、本記事に関連した内容を、下記セミナーでより詳細に解説しています。よろしければ是非ご参加ください。

「【初心者の方必見】WEB改善の流れがわかる!目標設定とPDCAの考え方講座」セミナーページへ

【初心者の方必見】WEB改善の流れがわかる!目標設定とPDCAの考え方講座

 

センタードは、WEBコンサルタント×WEBディレクターが連携し、『貴社のビジネスを成功に導く』サポートをします。WEBマーケティングに関してお困りのことがございましたら、お気軽にご相談くださいませ。

【無料】プロに相談してみる

カテゴリ注目記事

カテゴリ新着記事

カテゴリタグ一覧