# Performance score indicator

## First Paint - ページが表示され始めたとき

First Paint はナビゲーションの開始（白い画面の状態）から Web ページの何らかが表示され始めたタイミングを指します。たとえば、背景色の表示が始まった時点で First Paint になり得るでしょう。ユーザー体験と直結し得るビジュアル上の表示速度に基づいた指標として代表的なものです。

## First Contentful Paint - コンテンツが表示され始めたとき

ナビゲーションの開始から Web ページのコンテンツが表示され始めたタイミング。First Paint と似ているが、First Paint がとにかくなにか表示があれば成立するのに対して、First Contentful Paint は画像やテキストなど、コンテンツになり得る要素の表示を指します。

## First Meaningful Paint - ユーザーに意味のある表示になったとき

あいまいな指標で、Web ページがユーザーにとって意味のある（役に立つ）表示になったタイミングを指します。

## Time To Interactive - ユーザーの操作に応答できるようになったとき

Web ページの表示を終えてユーザーの入力に対して確実に応答できるタイミング。SPA など JS の初期化や API のやりとりに時間がかかる場合、ビジュアル上表示できていても、ユーザーが操作可能になるまでに時間を必要とすることがあります。

## Speed Index - Above the Fold のスコア

Above the fold(ATF)は、スクロールせずに閲覧可能な画面領域の描画の指標。ページロード経過時間（x）に対する、コンテンツのレンダリング量（y）のグラフが、その X 軸との間に描く図形の面積の多い方が優れています。経過時間に応じたコンテンツレンダリング量を、スクリーンキャプチャなどから得てスコアを算出します。

## DevTools / Timing

### Waiting - Time To First Byte（TTFB）

リクエストを送信してからレスポンスの最初の 1 バイトがブラウザに到達するまでの時間。  
時間が長いものほど、サーバがリクエストを受け取ってからレスポンスを返すまでに時間がかかっている

### Connection Start

ネットワーク接続のセットアップ処理が占める割合の多いリクエストを調べます。

Add performance / score indicator
Add performance / score indicator
