Lighthouseとは？Lighthouseのチェック項目と対策方法を解説

SEOはただ単にコンテンツを追加すれば良い、タイトルを変更すれば良い、被リンクを張れば必ず順位があがるという時代はほぼ終わっています。

コンテンツや被リンク自体は依然として重要ではありますが、それよりもモバイルフレンドリーになっているか、
ページのスピードは遅くないかなど、対象ページだけでなくサイト全体としての質も上げる必要があります。

ただ、現状のサイトどのような評価を受けているのか、何処が弱いかを知らないと、適切なSEO対策ができなくなったり、余計な事をしてしまう可能性があります。

そこで今回は、現状のサイトどのような評価を受けているのかを拡張機能「Lighthouse」についての項目とそれぞれの対策方法について解説します。

Lighthouseとは？

Lighthouse（ライトハウス）とは、Webアプリを監査するためのツールで、もともとはGoogleが公式に運営していたツールです。当初は、PWA（プログレッシブウェブアプリ）というWeb上で構築、配信されるアプリケーションの監査目的でした。その後Lighthouseでチェックできる項目が増え、アクセシビリティーのチェックやSEOなどがチェックできるようになりました。現在、Lighthouseでチェックできる項目は以下です。

1. Performance
2. Accessibility
3. Best Practices
4. SEO
5. ProgressiveWebApp(PWA)

Lighthouseでのチェック結果例

なお、Lighthouseの最新版は、2019年11月20日のリリースとなっており、これ以降は更新されておりません。
ただ、Lighthouseは、GoogleChromeのディベロッパーツールにも組み込まれており、わざわざ拡張機能をインストールしなくてもチェックできるようになりました。

ディベロッパーツールにおけるLighthouseでのチェック画面例

※ディベロッパーツールの詳しい解説はこちらから

Lighthouseのスコアの色分け方法

Lighthouseでは、メトリックスコアとパフォーマンススコアは、次の範囲に従って色分けされています。

• 0～49（赤）：悪い
• 50～89（オレンジ）：改善が必要
• 90～100（緑）：良い

基本的には、良いスコア（90～100）を目指して改善してみましょう。

Lighthouseのパフォーマンススコアに関する注意点

Lighthouseのパフォーマンススコアに関する注意点として、その都度変わる可能性があります原因は様々ありますが、
一般的には以下が挙げられます。

• ABテストまたは配信される広告の変更
• インターネットトラフィックルーティングの変更
• 高性能デスクトップや低性能ラップトップなど、デバイスでによる
• JavaScriptを挿入し、ネットワークリクエストを追加/変更するブラウザ拡張機能
• ウイルス対策ソフトの有無や重さ

なお、その他スコアの重み付けやメトリックスコアの決定方法等などは以下のドキュメントで公開されています

https://web.dev/performance-scoring/

Lighthouseでのチェック項目

それでは、Lighthouseでのチェック項目を解説していきます

Performance

主に、ページの読み込みやユーザー操作によるレスポンスの速さなど、対象ページのスピードに関することがチェックされます。チェックに関する指標は以下の4つです。

First Contentful Paint（FCP）

ユーザーがページをクリックして、最初のDOMコンテンツを画面に表示するまでの時間を測定しています。

First Input Delay（FID）

ユーザーが表示されたページを最初に操作(リンクのクリックなど)した時、ブラウザがその操作に応答するまでの時間です。

この項目が遅いと判断されている場合、大量のJavascriptの実行が原因と考えられます。そのため不要なJavascriptの削除や軽量化をか検討しましょう。

Largest Contentful Paint（LCP）

ユーザーがアクセスしてから、画像やテキストなど主要なコンテンツが表示されるまでの時間を計測しています。

この項目が遅いと判断されている場合、原因は、色々ありますが、特に多いのがサーバーの応答速度や、画像です。特に画像は適切なサイズに圧縮していない場合、サイト自体が重くなる原因になり得ますので、画像を圧縮したり、PNGやJPEGより圧縮性能が高いWebPで配信するなどの対応をする必要があります。

Cumulative Layout Shift（CLS）

ページの読み込みが全て終わった後、どれくらい画面が動くかを測定ししています。例えば、画面が表示され、いざ目的の画像やリンクをしようとしたとき、広告などが表示され、誤って広告の部分をクリックしてしまったという経験はないでしょうか？
簡単に言うとCLSはこういったクリックの誤操作がされにくいかチェックしています。

この項目が悪いと判断されている場合、例えば、画像や動画で高さ(height)と幅(width)が指定されていない、広告やiframeでサイズ指定がされていない、動的なコンテンツが挿入されている、 Webフォントがダウンロードしてレンダリングしているなどがあります。

対処としては、画像や動画の高さや幅を指定する、あらかじめ広告や動的を表示するスペースを確保する、Fontの読み込み方法を指定する(font-dislay属性)などがあります。

これらの項目は、2021年5月から新しいランキング要素として「Core Web Vital」と密接に関わっていますので、Lighthouseでチェックし、パフォーマンスが悪い項目は改善してみて下さい。

なお各指標どのくらいにすればよいかは、Google検索セントラルに記載されておりますので、ご確認ください

https://developers.google.com/search/docs/guides/page-experience?hl=ja

※Core Web Vitalの詳しい解説はこちらから

Accessibility

LighthouseでのAccesibilityは、テキストや背景が見やすいか、HTMLが構想が正しく設定されているかといった、サイトが、ユーザーや検索ロボットに対して最適な作り(見出しの構造は入れ子になっていないかなど)になっているかを査定します。

例えば、alt属性が入っていない、aタグにname属性がない、といった場合はこの項目でチェックに引っかかりますので、修正しましょう。

Best Practices

httpsなど推奨されている技術を使っているか、キャッシュを利用している、古く脆弱性があるAPIを使っていないかなど、パフォーマンス低下に繋がる事をしていないかチェックしています。

もし、httpsになっていない、Javascriptの脆弱性があるといった推奨されてAPIを使っている場合、チェックに引っかかりますので、実際のサイトを確認の上修正できるところは修正しておきましょう。
なおhttps化は検索ランキングにも僅かではありますが影響していますので、https化していない場合は、早めに対応すると良いでしょう。

HTTPS をランキング シグナルに使用します

SEO

Lighthouseで、SEO項目としてチェックするのは、以下です。

• viewportがあるか
• フォントサイズ
• ページに成功したhttpステータスコード(200)があるか
• ページタイトル要素があるか
• ディスクリプション要素があるか
• アンカーテキストがあるか
• リンクはクロール可能か
• インデックス登録のブロックはされていないか
• hreflangの記述があるか
• canonicalの記述があるか
• alt属性があるか
• プラグインによるページ表示（Flashなど）
• robots.txtは有効か
• タップするターゲットが適切なサイズになっているか

モバイルフレンドリーになっているか、タイトルタグが入っているかなどSEO対策で基本的な項目ですね。
ただタイトルにキーワードが含まれている、canonicalの指定は間違っていないか等の整合性はチェックしていないので、あくまで項目があるか無いかのチェックであることを注意してください

ProgressiveWebApp(PWA)

Lighthouseで、ProgressiveWebApp(PWA)に関するチェックリストは以下です。

PWAチェックリスト

どのブラウザで動作するか、あらゆる画面サイズに対応しているか、読み込みスピードに関するチェック等が含まれています。

大手サイトのlighthouseスコアはどのくらい？

ちなみに、大手の有名サイトのLighthouseのスコアはどのくらいなのでしょうか？ひとまず訪問者数が多い
サイトがLighthouseのスコアがそれぞれどのくらいなのか見ていきます。

なお、訪問者数が多いサイトは、VALUES.INCが発表したデータを参考としています。
出典：https://www.valuesccg.com/news/20201202-2303/

VALUES.INCが発表したデータによると、2020年の訪問者数（推計UU数）ランキング1位のサイトはgoogleで、約11億5千万でした。
googleは検索窓しかないため、lighthouseスコアはあまり参考にならないかもしれません。
なお、2位はアマゾン、3位は楽天市場、4位はyoutube、5位はYahooでした。2位～5位のサイトが、Lighthouseでどのくらいのスコアになっているか見ていきましょう。
※なおスコアはPCの環境によって変化するため絶対的な数値ではございませんので、参考程度として頂ければと思います。

アマゾンのLighthouseのスコア

チェック項目	スコア
Performance	76
Progressive Web App	–
Accessibility	94
Best Practices	87
SEO	92

 

楽天市場のLighthouseのスコア

チェック項目	スコア
Performance	9
Progressive Web App	–
Accessibility	61
Best Practices	80
SEO	92

youtubeのLighthouseのスコア

チェック項目	スコア
Performance	29
Progressive Web App	–
Accessibility	89
Best Practices	81
SEO	93

YahooのLighthouseのスコア

チェック項目	スコア
Performance	37
Progressive Web App	+
Accessibility	96
Best Practices	87
SEO	92

いずれも、Performanceのスコアが良くありませんが、これは、検証したPCのスペックや環境による可能性が高いですが、その他の項目は軒並み高スコアの項目が多いです。

まとめ

Lighthouseはディベロッパーツールからのアクセスの他に、Google Chromeの拡張機能をインストールすることで使用が可能です。以下に拡張機能のURLを記載しますので、ご興味がある方は是非拡張機能をインストールしてみて下さい。

Lighthouse：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk