※この記事にはプロモーションが含まれています
自社サイトの質を高めるためには、専門のツールを使ってしっかりと分析する必要があります。
「自社サイトをコスパ良く分析するツールはないかな？」と悩んでいるなら、Googleが提供する無料ツール「Lighthouse（ライトハウス）」を導入してみましょう。
今回は、Lighthouseの特徴や使い方、さらに導入する方法について解説しました。自社サイトの分析や診断をしたい方はぜひチェックしてみてください。
目次
Lighthouseとは？
Lighthouse（ライトハウス）とは、GoogleがWebページの品質向上を目的に開発したオープンソースの無料ツールです。GoogleChromeの拡張機能を使って利用することで、対象のWebサイトにおける評価や改善点を把握できます。
Lighthouseを用いてチェック可能な評価項目は以下の5つ。
- Performance（パフォーマンス）
- Accessibility（アクセシビリティ）
- Best Practices（ベストプラクティス）
- SEO
- 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つです。
| First Contentful Paint | 最初のコンテンツ描画にかかる時間 |
| Time to Interactive | ページが操作可能になるまでの時間 |
| Speed Index | ページのコンテンツが目に見える形で表示される時間 |
| Total Blocking Time | ユーザー操作への応答がブロックされている時間の合計 |
| Largest Contentful Paint | サイズが最も大きいコンテンツを読み込むのに必要な時間 |
| Cumulative Layout Shift | 視覚的な安定性を示す指標 |
Performanceの画面には、上記6つのスコアとそれに基づいた改善点や合格点が表示されます。
改善方法
Performanceを改善するには、「OPPORTUNITIES」と「DIAGNOSTICS」といった2つの見出しを確認しましょう。
「未使用のJavaScriptを減らす」「次世代フォーマットで画像を提供する」など、自社サイトに合わせた具体的な改善方法が提示されています。
改善するとどれくらいの時間を短縮できるのかも記載されているので、ぜひチェックしてみてください。
あわせて読みたい
WordPressを高速化させる手法10選！重要性と共に解説 「あれ、WordPressのサイトが遅いかも・・・」 と思ったら、高速化に取り組むのがおすすめ。 WordPressのサイトを高速化すれば、SEO面で評価されるうえ、離脱率の軽減や…
【Lighthouseの使い方2】Accessibility
Lighthouseの評価項目2つ目の「Accessibility（アクセシビリティ）」では、主にユーザーや検索エンジンにとってわかりやすいWebサイトになっているのかが判断されます。
では、それぞれの評価基準と改善方法について解説していきましょう。
評価の基準
Accessibilityの評価基準は、公式HPによると40以上の項目があります。
こちらでは、その中でもスコアに大きな影響を与える以下16の項目をピックアップしてみました。
| [aria-*]属性がその役割に一致するか |
| [aria-hidden=”true”]が適切に使用されているか |
| [role]s にはすべての必須[aria-*]属性があるか |
| [role]属性が設定された要素の子要素に適切な[role]属性が設定されているか |
| [role]s に設定された要素が適切な親要素内に存在するか |
| [role]値は有効か |
| [aria-*]属性に有効な値があるか |
| [aria-*]属性は有効であり、スペルミスはないか |
| ボタンにはアクセス可能な名前があるか |
| ARIA IDが適切に設定されているか |
| 画像要素には[alt]属性があるか |
| <input type=”image”>要素に[alt]テキストがあるか |
| フォーム要素にはラベルが関連付けられているか |
| ドキュメントに<meta http-equiv=”refresh”>が使用されていないか |
| [user-scalable=”no”]は<meta name=”viewport”>要素で使用されておらず、[maximum-scale]属性は 5 以上か |
| <video><track>要素には[kind=”captions”]の要素が含まれているか |
上記の他にも、「カスタムコントロールにARIAロールがあるか」「カスタムコントロールにラベルが関連付けられているか」など、手動で確認するべき10の項目もあります。
改善方法
Accessibilityを改善するには、以下5つの見出しをチェックしましょう。
- NAMES AND LABELS
- BEST PRACTICES
- CONTRAST
- NAVIGATION
- ADDITIONAL ITEMS TO MANUALLY CHECK (10)
それぞれ、「[alt]画像要素に属性がない」といった問題点と改善方法が記載されているので、参考にしながら改善してみてください。
【Lighthouseの使い方3】Best Practices
Lighthouseの評価項目3つ目の「Best Practices（ベストプラクティス）」は、モバイル対応しているかやWebサイトのパフォーマンスが低下していないかを確認できます。
では、評価の基準と改善方法について解説していきましょう。
評価の基準
Best Practicesの評価基準は、以下の14項目に分けられます。
| ページにHTML doctypeがあるか |
| コンソールに記録されたブラウザーエラーがないか |
| 画像が正しい縦横比で表示されているか |
| HTTP/2 経由でリソースを提供しているか |
| 適切な解像度で画像を提供しているか |
| ページには有効なソースマップがあるか |
| 既知のセキュリティ脆弱性を持つライブラリを回避しているか |
| CSP が XSS 攻撃に対して有効か |
| ページの読み込み時に地理位置情報の許可に対する要求を回避しているか |
| ページ読み込み時に通知許可の要求を回避しているか |
| ユーザーにパスワードの貼り付けを許可しているか |
| 文字セットを適切に設定しているか |
| 非推奨のAPIを回避しているか |
| Chrome Devtools の [Issues] パネルに問題が記録されていないか |
Best Practicesでは、Webページの安全性や優れたユーザーエクスペリエンスの改善など、自社サイトの健全性をチェック可能です。
改善方法
Best Practicesを改善する場合、見出し「GENERAL」に表示された問題点を解決することが求められます。「非推奨のAPIを使用している」など具体的な課題が表示されるため、改善するようにしましょう。
【Lighthouseの使い方4】SEO
Lighthouseの評価項目4つ目の「SEO」は、自社サイトに特定のキーワードで上位表示できるメカニズムが整っているのかを確認できます。
評価の基準と改善方法を押さえておき、Webサイトへの流入を増加させましょう。
評価の基準
Lighthouseは、以下15の観点からWebサイトが適切なSEO対策をしているかを判断しています。
| リンクがクロール可能か |
| ページはインデックス作成からブロックされていないか |
| 画像要素には[alt]属性があるか |
| 構造化データが適切か |
| <meta name=”description”>タグでページ内容の要約を指定しているか |
| ドキュメントに<title>要素があるか |
| ドキュメントにメタ ディスクリプションがあるか |
| 適切なHTTPステータスコードを返しているか |
| リンクに説明文があるか |
| robots.txtは有効か |
| hreflangタグが適切に使われているか |
| ドキュメントは読みやすいフォントサイズを使用しているか |
| プラグインが必要なコンテンツを使用しているか |
| タップターゲットは適切なサイズか |
| <link rel=”canonical”>タグの設定は適切か |
「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つの流れに沿ってインストールしてみてください。
- Lighthouseをインストールする
- Webページを認識させる
- 「Generate Report」をクリックする
では、それぞれのステップについて解説します。
Lighthouseをインストールする
まずは、「chrome ウェブストア」からLighthouseをインストールしましょう。
公式ストアにて、「Chromeに追加」ボタンをクリックすれば、簡単にインストールできます。
Lighthouseは無料で使用できる拡張機能なので、費用は一切かかりません。
Webページを認識させる
インストールが完了したら、分析したいWebサイトを表示させます。
対象のWebサイトを開いたまま、ブラウザ右上にある拡張機能の使用を開始させるアイコンをクリックしましょう。
「Generate Report」をクリックする
前のステップが完了すると、「Generate Report」ボタンが表示されるのでクリックします。
1分ほど待てば、対象のWebサイトを綿密に分析することができます。
自社サイト以外にも使用できる分析ツールなので、競合サイトにも使用してみるのがおすすめです。
まとめ｜Lighthouseを利用してハイクオリティーなWebサイトを目指そう
今回は、Lighthouseの特徴や使い方、さらに導入する方法について解説しました。
Lighthouseを使えば、5つの観点からWebサイトをしっかりと分析することができます。
自社サイトの課題点を改善し、さらなる流入の増加やコンバージョンアップにつなげてみてください。