Speed IndexというWebパフォーマンスの指標 Web パフォーマンスの文脈で語られてきた DOMContentLoaded や load といった、いわゆるロード速度として括られてきた指標は、ユーザー体験とパフォーマンスの相関を俯瞰する上でいまや適切ではない。 DOMContentLoaded は DOM ツリーと CSSOM ツリーを組み合わせたレンダーツリーの準備完了を指し、ひとつの Web クライアントサイドでできる最適化の指標だが、それでも描画状態はレンダーツリーの複雑さやスクリプト処理との兼ね合いに依存してくるので、如何に素早くページが表示されているか ということを正確に表現できない。 load は HTML ドキュメントから参照する画像などのサブリソースのロードが全て完了した状態で、この頃にはページ全体が表示完了している状態に近い。しかし長大なコンテンツでは、ユーザーがページの最下部まで見る保証はなく（むしろ見ないのが大半）、より重要であろうファーストビューの表示が早かったか はわからない。 Speed Index は Google が提唱する、ロード開始からファーストビューが如何に早く表示されるかを表すスコア である。 Speed Indexの考え方 同じコンテンツのページ A とページ B があったとして、どちらもロード開始から 11 秒時点でファーストビューの表示が 100% 完了するものとする。しかしページ A とページ B では経過時間に対するファーストビューの表示状況が異なり、ページ A はロード開始から 1 秒時点で 80% 表示されていて、かたやページ B はロード開始から 1 秒時点で 20% しか表示されていない。この時、ページ A の方がユーザー体験が良いのは明らかである。 この時ページ A とページ B の差は、 ロード開始からの経過時間に対する描画進捗 である。両ページの描画進捗を、X 軸に経過時間、Y 軸に描画進捗にとるグラフにすると次のようになる。 このグラフによって、ファーストビューがロード開始から如何に早く多く描画されているかを表現できている。この色付き部分を比較しても良いが、仮に描画が 99% でずっと止まるようなケースでは色付き部分の面積が大きくなり続けてしまう。なので、経過時間に対して描画されていない量（面積）を計算することで、スコアを有限にできる。これが Speed Index である。
