SI(Speed Index)とは?仕組みから計測方法まで徹底解説

SI(Speed Index)とは?仕組みから計測方法まで徹底解説

このページではSI(Speed Index)についてわかりやすく解説していきます。

計測される仕組みから、評価内容までを解説していきます。

SI(Speed Index)の改善方法を知りたい方は「SIの改善施策」の記事をご覧ください。

SI(Speed Index)とは

SI(Speed Index)とは、ページの画像やテキストといったコンテンツがどれだけ早く表示されるかを数値化した指標です。

ブラウザの表示進捗(視覚的にどれだけ描画が進んだか)を時間経過とともに追い、完全表示までの“未表示面積”の合計を計算して算出します。

よって、ページのアクセスから早い時点で表示される面積が多ければ多いほどSIの評価は高まるということになります。

例えば下記の図を例に解説していきます。

Aページは、ページにアクセスしてから1秒経過時点で画面の20%の部分がまだ表示されていない。

Bページは、ページにアクセスしてから1秒経過時点で画面の40%の部分がまだ表示されていない。

こちらを比較した場合、表示されていない面積の少ないAページの方がSIの数値はよくなります。

多くのコンテンツが早く表示されることで利用者のストレスも減り、ユーザー体験が上がります。

SI(Speed Index)の計算方法をわかりやすく解説

SIは、ページの読み込みの進行状況を一定時間ごとに取得したインターバルスコアを計算し、コンテンツが全て描画されるまでのインターバルスコアの合計がSI(Speed Index)の数値となります。

結論から言うとSIの数値は下記の計算式で計算されます。

SI(Speed Index)= インターバルスコアの合計

まずは理解を深めるためにもインターバルスコアの概念から説明していきます。

インターバルスコアの概念

インターバルスコアは、ページの読み込みが始まってから時間の経過毎に計測される数値となります。

計測される経過時間は0.1秒=100msごと(10fps)に計算されます。

下記の計算式で計測されます。

インターバルスコア =経過時間 × 非表示面積割合

もう少し噛み砕いて説明すると

ページにアクセスしてから0.1秒時点の非表示面積のインターバルスコア、更に0.1秒経過した0.2秒時点の非表示面積のインターバルスコアという感じで、ページのコンテンツが100%表示されるまでの間、0.1秒ごとにインターバルスコアが計算されていくということになります。

この積み重なったインターバルスコアの全ての合計がSI(Speed Index)のスコアとなります。

ページの表示イメージと計算例

例えば以下のように、ページにアクセスしてから0.4秒で全てのコンテンツの表示が行われるページがあるとします。

時系列で解説すると

  1. 0.1秒経過時点で非表示面積が60%
  2. 0.2秒経過時点で非表示面積が40%
  3. 0.3秒経過時点で非表示面積が20%
  4. 0.4秒経過時点で非表示面積が0%

となり、0.4秒後に100%のコンテンツが表示されたということになります。

まず、この場合の時系列毎のインターバルスコアは下記の通りとなります。

  1. 0.1秒×非表示面積60%=0.06
  2. 0.1秒×非表示面積40%=0.04
  3. 0.1秒×非表示面積20%=0.02
  4. 0.1秒×非表示面積が0%=0

SI(Speed Index)はインターバルスコアの合計となるため下記の計算となります。

SI(Speed Index)=0.06+0.04+0.02+0=0.12

結果としてSIのスコアは0.12秒になります。

SIの改善が重要な理由

SI改善は単なる技術的な改善ではなく、ビジネスに直接的な影響を与える重要な施策です。

特に下記のような要素にも影響があるので重要性を把握しておきましょう。

コンバージョン率への影響

表示速度の改善は、コンバージョン率に直接的な影響を与えます。

一般的に、表示速度が1秒改善すると、コンバージョン率が7%向上するとも言われています。

SIの数値も表示されるまでの速度を表した数値となり、数値がよければ離脱率の減少にも繋がりますしコンバージョンの向上にも繋がります。

SEOへの影響

GoogleはCore Web Vitalsを検索ランキング要因に含めているため、SI改善はSEOにも大きな影響を与えます。

影響項目

詳細

検索順位の変動

Core Web Vitalsに関連する指標として検索順位に直接影響

ユーザー体験の悪化

表示速度の遅延により直帰率・離脱率が増加

クローラビリティの低下

Googlebotのクロール効率に悪影響を与える

モバイル検索での劣位

モバイルファーストインデックス環境で不利になる

コンバージョン率の低下

ページ表示の遅延により機会損失が発生

Speed Indexが悪化すると、ユーザーの直帰率が大幅に増加しますし、検索エンジンのクローラーがページを効率的に巡回できません。

こうなるとユーザー体験も悪化し直帰率やCVRへの影響と、検索順位にも大きく影響を与えます。

Speed Indexの評価基準

SIは秒数によって評価されます。評価基準は以下の通りです。

下記の表のように3.4秒未満で良好、3.4秒~5.8秒でサーバー処理に改善の余地あり、5.8秒以上でユーザー体験に悪影響といった評価となります。

評価

スコア範囲

良好(Good)

0~3.4秒

改善が必要(Needs Improvement)

3.4~5.8秒

オレンジ

不良(Poor)

5.8秒以上

Google PageSpeed Insightsでは、3.4秒未満にすることを推奨しています。

SI(Speed Index)の測定方法

SIを測定するには、PageSpeed InsightsWebPageTest、Lighthouseなどで計測が可能です。

それぞれの測定方法を解説していきます。PageSpeed Insights

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

手順としては下記の手順で分析ができます。

  1. PageSpeed Insightsにアクセス
  2. 調査したいホームページのURLを入力
  3. 「分析」ボタンをクリック
  4. 数分後に結果が表示される

上記の箇所にURLを入力し、分析ボタンを押します。

計測結果が出た後、下の方にスクロールするとパフォーマンスの枠が出てきます。

「パフォーマンスの問題を診断する」内の「指標」セクション(上記画像の赤枠部分)でSI(Speed Index)の数値が確認できます。

PageSpeed Insightsの注意点

PageSpeed Insightsで表示される数値は、テスト環境におけるシミュレーションの結果です。

そのため、実際のユーザーが体験する表示速度とは異なる場合があります。

より正確な数値を知りたい場合は、複数回測定して平均値を取ることをお勧めします。

WebPageTestでの計測方法

WebPageTestでもSIの数値を測定することができます。

計測手順は下記の通りです。

  1. WebPageTestにアクセス
  2. テスト対象のURLを入力
  3. テスト環境を選択
  4. Start Testを推して計測開始

WebPageTestの特徴としては、テストの環境を細かく設定できるという点です。

ユーザーの環境を想定して計測ができる点は大きなメリットとなります。

計測が終わると上記のようなサマリーが出てきて、「Speed Index」の箇所に計測結果が出ます。

Lighthouseでの計測方法

Lighthouseは、Google Chromeの拡張機能として提供されているツールです。

Lighthouseの計測方法として下記の手順に沿って計測ができます。

  1. Chromeで計測したいページを開く
  2. 右クリックして「検証」をクリック
  3. 「Lighthouse」タブをクリック
  4. 測定条件を設定する
  5. Analyze page loadをクリックして計測開始

下記の画像の通り順番に進めていきましょう。

計測が終わると下記のようにパフォーマンス画面の下部にSpeed Indexの数値が表示されます。

またSpeed Indexの下部にある「ツリーマップを見る」を開くと更に詳細が見れます。

まとめ

Speed Index(SI)は、Webサイトの表示速度とユーザー体験を数値化した重要な指標です。

単なる技術的な数値ではなく、ユーザーが実際に感じる「体感速度」を表現しているため、ビジネスの成功に直結する重要な要素となっています。

Speed Indexの改善は、技術的な取り組みでありながら、最終的にはユーザーの満足度向上と事業成長に直結する重要な投資です。適切な戦略と実行により、必ず成果を得ることができるでしょう。

記事を書いた人

井上寛生

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。
コラム一覧に戻る