FCP、LCP、CLS
昨日のスライドで LCP とか FCP とか CLS とか出てきて、「聞いたことあるようなないような……」となったので調べました。
Rails エンジニアのための Next.js 入門 - Speaker Deck
FCP
First Contentful Paint の略で、ページの読み込みが開始されてからページ内のコンテンツのいずれかがレンダリングされるまでの時間。
いずれかなので全部表示されるのではなくてとにかく最初のなにかの要素が表示されるまでの時間。
上記記事によると FCP が 1.8 秒以下になるようにするのがいいらしい。1.8 秒〜3.0 秒が Needs Improvement で 3.0 秒以上だと Poor と書いてある。なるほど。
LCP
LCP は FCP と似てて、ページの読み込みが開始されてから「最も大きいコンテンツ」がレンダリングされるまでの時間のことらしい。
最も大きいコンテンツ is 何？と思って記事を読むと、どうやら以下の要素が該当するらしい。
- img 要素
- svg 要素内の img 要素
- video 要素
- url()関数を介して読み込まれた背景画像が含まれている要素
- ブロックレベル要素
で、Web ページは一度に全て読み込んで表示するのではなく段階的に読み込むので、ページ内の「最も大きいコンテンツ」が読み込むたびに変わる可能性があるので、最大コンテンツが変更されるたびにPerformanceEntryというやつを呼んで、それが記録されるらしい。
CLS
6/16で自分で調べてたのに……。
レイアウトシフトです。