2020-05-08 web-vitals の指標メモ

Largest Contentful Paint (LCP)、 First Input Delay (FID)、Cumulative Layout Shift (CLS) の3つの指標を計測するけど、それぞれの値についての日本語の説明が見つからなかったのでメモ

Largest Contentful Paint (LCP)

一番大きなコンテンツが描画されるまでの時間

一番大きなコンテンツ = ユーザーにとって一番大事なので重要

First Contentful Paint (FCP) とは「一番最初の DOM の描画までの時間」なので異なる

閾値

GOOD

2.5 sec まで

NEED IMPROVEMENT

4.0 sec まで

POOR

改善策

JS, CSS を速く取ってくる

CDN, ServiceWorker

JS, CSS を最低限にする

minify

SSR、プレレンダリングする

First Input Delay (FID)

操作可能になるまでの時間

閾値

GOOD

100 msec まで

NEED IMPROVEMENT

300 msec まで

POOR

改善策

UI スレッドを止めない

JS ファイルを小さくする

code splitting

Cumulative Layout Shift (CLS)

ロードに伴う画面のガタツキ具合を表す指標

閾値

GOOD

0.1 まで

(TODO: 単位を調べる)

NEED IMPROVEMENT

0.25 まで

POOR

改善策

実験したいな