Lighthouseで自社サイトを徹底分析！初心者でもわかる指標を紹介

自社サイトの質を高めるためには、専門のツールを使ってしっかりと分析する必要があります。

「自社サイトをコスパ良く分析するツールはないかな？」と悩んでいるなら、Googleが提供する無料ツール「Lighthouse（ライトハウス）」を導入してみましょう。

今回は、Lighthouseの特徴や使い方、さらに導入する方法について解説しました。自社サイトの分析や診断をしたい方はぜひチェックしてみてください。

Lighthouseとは？

Lighthouse（ライトハウス）とは、GoogleがWebページの品質向上を目的に開発したオープンソースの無料ツールです。GoogleChromeの拡張機能を使って利用することで、対象のWebサイトにおける評価や改善点を把握できます。

Lighthouseを用いてチェック可能な評価項目は以下の5つ。

1. Performance（パフォーマンス）
2. Accessibility（アクセシビリティ）
3. Best Practices（ベストプラクティス）
4. SEO
5. ProgressiveWebApp（プログレッシブウェブアプリケーション）

それぞれの項目では、評価基準がいくつも用意されており以下のスコアにて格付けされます。

• 0～49（赤）：悪い
• 50～89（オレンジ）：改善するべき
• 90～100（緑）：良い

0～49のスコアをなくし、上記5つの評価項目にて90～100のスコアを狙うことで、自社サイトの質を高めることができるでしょう。

Lighthouseを利用する重要性

Lighthouseを利用する重要性は、ずばり効率的に自社の目的を達成するため。現在、様々なWebサイトが多数公開されているからこそ、自社が力を尽くしてもなかなか成果が出ないことは多いです。

「Webサイトへの流入が見込めない」「コンバージョンにつながらない」などの課題を解決するには、自社独自の判断によって運用するのではなく、適切な評価基準が必要でしょう。

Webサイトの質が判断できる基準を押さえておけば、後は基準に合格するよう調整するだけで、自社の目的を達成できます。

Lighthouseは、Webサイトの評価を5つの観点から詳しく伝えてくれるうえ、どうすれば改善できるのかも具体的に教えてくれるツールです。

自社の目的を最短で叶えるなら、Lighthouseを使って現状の分析と課題の解決に取り組んでみましょう。

【Lighthouseの使い方1】Performance

まずは、Lighthouseにおける評価項目の1つ「Performance（パフォーマンス）」について解説します。Performanceでは、主にWebサイト内のスピードに関する評価が把握可能です。

評価の基準と改善方法について解説するので、ぜひ参考にしてみてください。

評価の基準

Performanceにおける評価の基準は、以下の6つです。

Performanceの画面には、上記6つのスコアとそれに基づいた改善点や合格点が表示されます。

改善方法

Performanceを改善するには、「OPPORTUNITIES」と「DIAGNOSTICS」といった2つの見出しを確認しましょう。

「未使用のJavaScriptを減らす」「次世代フォーマットで画像を提供する」など、自社サイトに合わせた具体的な改善方法が提示されています。

改善するとどれくらいの時間を短縮できるのかも記載されているので、ぜひチェックしてみてください。

あわせて読みたい

WordPressを高速化させる手法10選！重要性と共に解説 「あれ、WordPressのサイトが遅いかも・・・」 と思ったら、高速化に取り組むのがおすすめ。 WordPressのサイトを高速化すれば、SEO面で評価されるうえ、離脱率の軽減や…

【Lighthouseの使い方2】Accessibility

Lighthouseの評価項目2つ目の「Accessibility（アクセシビリティ）」では、主にユーザーや検索エンジンにとってわかりやすいWebサイトになっているのかが判断されます。

では、それぞれの評価基準と改善方法について解説していきましょう。

評価の基準

Accessibilityの評価基準は、公式HPによると40以上の項目があります。

こちらでは、その中でもスコアに大きな影響を与える以下16の項目をピックアップしてみました。

上記の他にも、「カスタムコントロールにARIAロールがあるか」「カスタムコントロールにラベルが関連付けられているか」など、手動で確認するべき10の項目もあります。

改善方法

Accessibilityを改善するには、以下5つの見出しをチェックしましょう。

1. NAMES AND LABELS
2. BEST PRACTICES
3. CONTRAST
4. NAVIGATION
5. ADDITIONAL ITEMS TO MANUALLY CHECK (10)

それぞれ、「[alt]画像要素に属性がない」といった問題点と改善方法が記載されているので、参考にしながら改善してみてください。

【Lighthouseの使い方3】Best Practices

Lighthouseの評価項目3つ目の「Best Practices（ベストプラクティス）」は、モバイル対応しているかやWebサイトのパフォーマンスが低下していないかを確認できます。

では、評価の基準と改善方法について解説していきましょう。

評価の基準

Best Practicesの評価基準は、以下の14項目に分けられます。

Best Practicesでは、Webページの安全性や優れたユーザーエクスペリエンスの改善など、自社サイトの健全性をチェック可能です。

改善方法

Best Practicesを改善する場合、見出し「GENERAL」に表示された問題点を解決することが求められます。「非推奨のAPIを使用している」など具体的な課題が表示されるため、改善するようにしましょう。

【Lighthouseの使い方4】SEO

Lighthouseの評価項目4つ目の「SEO」は、自社サイトに特定のキーワードで上位表示できるメカニズムが整っているのかを確認できます。

評価の基準と改善方法を押さえておき、Webサイトへの流入を増加させましょう。

評価の基準

Lighthouseは、以下15の観点からWebサイトが適切なSEO対策をしているかを判断しています。

「SEOをさらに極めたい！」という方は、「Google検索の基本事項」をチェックしてみてください。

改善方法

Lighthouse内でSEOの改善をするには、「CRAWLING AND INDEXING」と「CONTENT BEST PRACTICES」といった2つの見出しを確認してみてください。

「リンクをクロールできない」などの改善点が表示されており、タップをすれば具体的な解決方法も知ることができます。

【Lighthouseの使い方5】ProgressiveWebApp

Lighthouseの評価項目5つ目の「ProgressiveWebApp（プログレッシブウェブアプリケーション）」は、PWA化の観点からチェックされます。

評価の基準や改善方法を把握し、ユーザーエンゲージメント向上を目指しましょう。

評価の基準

ProgressiveWebAppにおける評価は、Googleが立ち上げた情報サイト「Web.dev」に基づいて行なわれています。

具体的な評価基準は、以下の通りです。

場所やデバイスを問わず、誰でも快適に使用できるWebサイトかをチェックできるため、ぜひ参考にしてみてください。

改善方法

ProgressiveWebAppを改善するには、「INSTALLABLE」と「PWA OPTIMIZED」の見出し2つを確認してみましょう。

それぞれの見出しで対象サイトの問題点が明記されているので、案内に従いながら改善してみてください。

Lighthouseを導入するには？

Lighthouseを利用する場合、以下3つの流れに沿ってインストールしてみてください。

1. Lighthouseをインストールする
2. Webページを認識させる
3. 「Generate Report」をクリックする

では、それぞれのステップについて解説します。

Lighthouseをインストールする

まずは、「chrome ウェブストア」からLighthouseをインストールしましょう。

公式ストアにて、「Chromeに追加」ボタンをクリックすれば、簡単にインストールできます。

Lighthouseは無料で使用できる拡張機能なので、費用は一切かかりません。

Webページを認識させる

インストールが完了したら、分析したいWebサイトを表示させます。

対象のWebサイトを開いたまま、ブラウザ右上にある拡張機能の使用を開始させるアイコンをクリックしましょう。

「Generate Report」をクリックする

前のステップが完了すると、「Generate Report」ボタンが表示されるのでクリックします。

1分ほど待てば、対象のWebサイトを綿密に分析することができます。

自社サイト以外にも使用できる分析ツールなので、競合サイトにも使用してみるのがおすすめです。

まとめ｜Lighthouseを利用してハイクオリティーなWebサイトを目指そう

今回は、Lighthouseの特徴や使い方、さらに導入する方法について解説しました。

Lighthouseを使えば、5つの観点からWebサイトをしっかりと分析することができます。

自社サイトの課題点を改善し、さらなる流入の増加やコンバージョンアップにつなげてみてください。

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。

このフィールドは空白のままにしてください

お名前

メールアドレス *

ご登録いただくと、月1～2回、更新通知を送らせていただきます。

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。