ECサイトのコンバージョン率向上のために、Webサイトの表示速度改善に取り組んでいる方は多いのではないでしょうか。そこで頼りになるのがGoogleの提供しているPageSpeed InsightsやLighthouseといったサイトパフォーマンスの診断ツールです。しかし、この2つのツールの違いについてよく分からないという声をよく耳にします。
本記事では、pagespeed insightsとlighthouseの違いについて解説しています。
どちらを選べば良いか迷った際に参考にしてみてください。
また、Webのご担当者であれば、ウェブサイトの読み込みスピードがWebサイトの成果に影響を与えることはご存知だと思います。
実際、あるリサーチによるとわずか0.1秒サイトスピードが向上することで、購入完了率が8.4％も高まると言われており、スピードとCVRには相関関係があることが示されています。
下記事例集では実際のサイトスピード改善事例を、LCPやTTFBなどの指標はもちろん、CVRやSEOがどう変化したのかまで含めて紹介しています。
Webサイトの管理や改善を担当されている方には参考になる内容になっておりますので、
是非こちらからダウンロードください。
目次
pagespeed insightsとは
pagespeed insights（ページスピードインサイト）とはGoogleが無料で提供している、Webサイトの表示速度を測定・評価する分析ツールです。
調べたいWebサイトのURLを入力するだけで、読み込み速度がスコアとして表示されます。速度の改善ポイントも提示されるため、Webサイトの修正に役立てることができます。
パソコンとモバイルの両方のデバイスに対応していて、一度の分析で双方の結果を得られます。
pagespeed insightsの評価基準
pagespeed insightsではURLを入力して「分析」ボタンをクリックするだけで診断を行えます。
自社サイトだけではなく、競合のサイトの分析も可能です。また、Webサイト全体だけではなく、ページごとの分析も行えます。
pagespeed insightsでは以下のような分析項目が特徴です。
実際のユーザーの環境で評価する
「実際のユーザー環境で評価する」の項目では、実際のユーザーデータに基づいた過去30日間における評価が確認できます。「実際のユーザー環境で評価する」で確認できる項目は以下のとおりです。
- First Contentful Paint（FCP）
- Largest Contentful Paint （LCP）
- First Input Delay （FID）
- Cumulative Layout Shift（CLS）
First Contentful Paint（FCP）
ユーザーがWebサイトのリンクをクリックしてから、コンテンツが最初に表示されるまでの時間です。
FCPの評価は以下の通りです。
- 0～1.8秒：良い
- 8～3.0秒：要改善
- 3.0秒以上：不十分
Largest Contentful Paint （LCP）
ユーザーがWebサイトにアクセスしてからメインコンテンツ（最も大きいコンテンツ）が表示されるまでの時間です。FCPでの対象は、最初に表示されたコンテンツが対象ですが、LCPではそのページのメイン画像や動画など主要とみなされるコンテンツについて計測されます。
LCPの評価は以下の通りです。
- 0～2.5秒：良い
- 2.5～4.0秒：要改善
- 4.0秒以上：不十分
First Input Delay （FID）
Webページで最初にユーザーが行った操作に対する応答時間を表します。
クリックやキーボード入力、タップなどに対しての待機時間がミリ秒単位で表示されます。
FIDの評価は以下の通りです。
- 0～100ms：良い
- 100~300ms：要改善
- 300ms以上：不十分
Cumulative Layout Shift（CLS）
Webページのコンテンツで、ユーザーが意図しないコンテンツのずれを表します。
ページ閲覧の途中で画像が遅れて表示されレイアウトが変わる、突然広告が表示されて間違えてクリックしてしまうというような現象が、意図しないレイアウトのずれです。
このようなレイアウトのずれが大きいほど、Webサイトの視覚的な安全性を損ないます。
CLSの評価は以下の通りです。
- 0～0.1：良い
- 0.1〜0．25：要改善
- 0.25以上：不十分
パフォーマンスの問題を診断する
「パフォーマンスの問題を診断する」の項目では、特定の環境下を想定したシミュレーション結果が確認できます。実際のユーザーから収集したデーターとは違う場合もありますが、ユーザーの環境に影響を受けない診断結果が得られ、Wevbサイト側の問題の洗い出しに有効です。
「パフォーマンスの問題を診断する」では以下の項目が確認できます。
| First Contentful Paint（FCP） | 最初のコンテンツ表示にかかるまでの時間 |
| Speed Index | ページの読み込み時間 |
| Largest Contentful Paint（LCP） | メインコンテンツの読み込み時間 |
| Time to Interactive（TTI） | Webページのインタラクティブ性 |
| Total Blocking Time（TBT） | 合計ブロック時間 |
| Cumulative Layout Shift（CLS） | 視覚的な安定性 |
lighthouseとは
lighthouse（ライトハウス）とは、Googleが無料で提供しているGoogle Chromeno拡張機能で、Webサイトの分析や診断が可能です。コンテンツの課題や問題点を簡単に把握できるので、Webサイトの質を高めるために役立つツールです。
lighthouseの評価基準
lighthouseの評価基準は以下の5つです。
- Performance（パフォーマンス）
- Accessibility（アクセシビリティ）
- Best Practices（ベストプラクティス）
- SEO
- Progressive Web App（プログレッシブウェブアプリケーション）
Performance（パフォーマンス）
ページ読み込み速度や表示速度、反応の速さなどの評価が表示されます。
「Metrics」に表示される評価指標は以下の6つです。
| First Contentful Paint | ページが表示され始めた時間 |
| Time to Interactive | ユーザーの操作に応答しだすまでの時間 |
| Speed Index | Webページの読み込み速度 |
| Total Blocking Time | Webページ表示開始からユーザーの操作に応答するまでのページの読み込み待ち時間 |
| Largest Contentful Paint | 動画や画像など最大のコンテンツが表示されるまでの時間 |
| Cumulative Layout Shift | Webページを表示している間のレイアウトにずれが生じていないかなど |
「Opportunities」は、ページ読み込み速度の高速化につながる改善策が表示されます。「Diagnostics」では、診断の詳細が表示されます。
Best Practices（ベストプラクティス）
安全で信頼できるWebサイトかの診断をします。
ブラウザのセキュリティやパフォーマンスを低下させる要素の評価が表示されます。
Accessibility（アクセシビリティ）
Accessibility（アクセシビリティ）は視覚障害の方など全てのユーザーに使いやすいサイトになっているかの評価です。文字の色やコントラストが、どんな人に対しても見やすい工夫がされているかを評価します。
SEO
メタディスクリプションがあるかなど、Webサイトが検索エンジンに最適化されているかの評価です。
Progressive Web App（プログレッシブウェブアプリケーション）
スマホ上でアプリの様に表示させるモバイル向けのWebサイトで、高速化やPWAに最適化されているかの評価です。
lighthouseの使い方
lighthouseの使用方法を紹介します。
- Google Chromeを立ち上げ、Chromeウェブストアから「lighthouse」を追加します。
「拡張機能を追加」をクリックすると、lighthouseがGoogle Chromeで使用可能になります。 - 分析する際は、分析したいサイトをGoogle Chromeで表示し、ブラウザ右上にあるオレンジ色の灯台マーク（lighthouseのアイコン）をクリックします。
- 「Generate report」のボタンをクリックすると、分析開始です。
- 約1分後くらいに分析結果が表示されます。
PageSpeed InsightsとLighthouseの比較
PageSpeed InsightsとLighthouseの2つの目的や特長を以下の表で比較します。
| 比較項目 | Lighthouse | PageSpeed Insights | コメント |
| 目的 |
Webページの外形技術監査 |
どちらも一般ユーザーの立場（ブラウザ）からWebページの機能と性能を技術的な側面で監査します。内部あるいはコンテンツについては対象外です。 | |
| 回数や頻度 |
1ページ1回ずつ |
どちらも指定URLの1ページについて１回の監査を実行します。複数URLの監査や定期実行は単独ではできません。 | |
| 監査カテゴリ | パフォーマンス・アクセシビリティ・ベストプラクティス・SEO・PWA | パフォーマンスのみ | Lighthouseの方が機能が豊富。 |
| 実行環境 | クライアントPC | Googleが用意するサーバー | Lighthouseは自分の環境で動作しますが、PageSpeed InsightsはWeb上のサービスです。 |
| 利用方法 | Chrome DevToolsのAudit・Chrome機能拡張・CLIコマンド | Webページ・API | 実行環境が違うのでエンドポイントがかなり違います。 |
|
HTMLレポート出力 |
〇 |
どちらも見やすいHTMLレポートを出力が可能です。 | |
| JSONレポート出力 | 〇（CLIコマンドのみ） | 〇 （API） | どちらもプログラムで集計などの処理をしやすいJSONレポートを出力可能。 |
| 日本語翻訳 | × | 〇 | 今のところLighthouseのリポジトリに日本語辞書はない。PageSpeed InsightsはAPIでも locale=ja を指定すると日本語表記が可能。 |
| 利用制限 | なし | APIは1日25,000回まで | Lighthouseは自分のPCやサーバーで実行するので制限がありません。WebページからのPageSpeed Insightsの利用制限は不明です。 |
| 細かな設定変更 | CLIで可能 | 不可 | LighthouseのCLIコマンドには多数のオプションがあります。 |
| アクセス制限のあるページ | 対応可 | 不可 | PageSpeed Insightsはアクセス制限のあるページは監査できません。 |
| 安定性 | 実行環境に依存 | 高い | Lighthouseは自前の環境で実行するのでネットワークの速度によって点数が前後します。PageSpeed Insightsの方が安定しています。 |
LighthouseのパフォーマンスカテゴリとPageSpeed Insightsの監査内容や点数のロジックに違いはありません。PageSpeed Insights はLighthouseのパフォーマンスの部分だけを切り出したサービスと認識して問題ないでしょう。
PageSpeed InsightsとLighthouseの使い分け
PageSpeed InsightsとLighthouseをどのように使い分ければよいのでしょうか。
パフォーマンス計測だけならPageSpeed Insightsを使用するのがおすすめ。
指標や点数の誤差を抑えることができます。
Lighthouseはクライアント環境の要因が加わり計測結果が前後します。
PageSpeed Insightsでもサーバーやネットワークの性能で前後しますが、Lighthouse程ではありません。
それ以外のカテゴリはPageSpeed InsightsとLighthouseで大差なく使用できます。
まとめ：PageSpeed InsightsとLighthouseを状況に応じて使い分けよう
PageSpeed InsightsはLighthouseのパフォーマンスの部分だけを抜き出したツールで、それぞれの監査内容や点数のロジックに大差はありません。
パフォーマンス計測に特化して使用するのなら、PageSpeed Insightsの方が指標や点数の誤差を抑えられるのでおすすめです。
ただし、実行環境がサーバー上なのかPC上なのか、日本語対応があるかなど細かい違いはあるため、自社に最適なツールを選択することが重要です。そこで、私たちギャプライズでは、これら2つのツールを効果的に使い分け、世界水準のマーケティングテクノロジーを駆使してお客様のCX改善をサポートしています。
LPやECサイトなどWebサイトの高速化にお悩みの際は、ぜひ一度ギャプライズにご相談ください。
業種や業態、Webサイトの種別に合わせて、最適な施策の立案から、ツールの提供、実装までを一貫してサポートし、最高のパフォーマンスを引き出すお手伝いをいたします。
Webサイトのパフォーマンス改善により、ユーザー体験の向上とコンバージョン率のアップを実現しましょう。お気軽にお問い合わせください。ギャプライズは、お客様のビジネス成功のために全力を尽くします。
