search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

Largest Contentful Paint (LCP) #152

Open hysryt opened 3 years ago

hysryt commented 3 years ago

https://web.dev/lcp/

hysryt commented 3 years ago

ユーザー重視（user-centric）の指標。 ファーストビューの一番大きいコンテンツがレンダリングされるまでの時間

Webページのメインコンテンツが読み込まれ、ユーザーの目に触れるまでの時間をどのように測定するかということはWeb開発者にとって長い間課題だった。

load や DOMContentLoaded のような古い指標は必ずしもユーザーが画面上で見ているものに対応していないため、良い方法とは言えなかった。 First Contentful Paint（FCP）のような新しい指標も、スプラッシュ画面やローディング画面がある場合はうまく機能しない。

過去にはFirst Meaningful Paint（FMP）、Speed Index（SI）といった指標があったが、これらは間違っていることも多かったため、 メインコンテンツがいつ読み込まれたかを正確に特定することはできなかった。

W3CとGoogleで行われた研究に基づいて、ページのメインコンテンツがいつ読み込まれたかを測定する正確な方法は、 最大の要素がいつレンダリングされたかを見ることであることがわかった。

LCPとは？

LCPメトリックはビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間をレポートする。

スコアの目安

ページが読み込まれ始めてから最初の2.5秒以内にLCPが発生するよう努力する必要がある。 モバイルとデスクトップでそれぞれ75%のユーザーで2.5秒以外にLCPが発生していれば目標が達成していると思ってよい。 （この基準は https://web.dev/defining-core-web-vitals-thresholds/ を参照）

対象として考えられる要素

Largest Contentful APIで規定されているように、 LCPで考慮される要素は以下の通り。

今後要素が増える可能性がある。

LCPで扱うサイズ

LCPでレポートされる要素のサイズは、ビューポート内でユーザーに見えるサイズである。 ビューポートの外に出ている部分や、クリッピングされている部分、不可視のオーバーフロー部分はサイズとしてカウントされない。

画像要素がその内在サイズ（intrinsic Size）から変更されている場合は、表示されているサイズと内在サイズのどちらか小さい方のサイズがレポートされる。 つまり、画像が縮小して表示される場合はその表示サイズ、拡大して表示される場合はその内在サイズがレポートされる。

テキスト要素についてはそのテキストノードのサイズのみが考慮される。 また、テキストノードの直近のブロックレベルの祖先要素に属する。

CSSによるmargin, padding, borderはサイズとして考慮されない。

LCPがレポートされるタイミング

Webページは段階的に読み込まれるため、その過程の中でページ内の最大の要素が変化する可能性がある。 その可能性に対応するためにブラウザは最初のフレームをペイントした直後に最大の contentful 要素を識別する largest-contentful-paint 型の PerformanceEntry をディスパッチする。 その後のフレームをレンダリングした後、最大の contentful 要素が変更されるたびに別の PerformanceEntry がディスパッチされる。

例えばテキストとヒーロー画像のあるページでは、ブラウザは最初にテキストをレンダリングし、その時点でLCPエントリとしてテキストブロック（pかh1）をディスパッチする。 その後ヒーロー画像の読み込みが終了すると、2番目のLCPエントリがディスパッチされ、imgを参照する。

フォント読み込み中のテキストノードや、読み込み中の画像は「レンダリングされた」とはみなされない。

JavaScriptによって追加された新しい要素の中に追加前のLCP要素より大きいものがある場合はそちらがLCPとしてレポートされる。 DOMから要素を削除した場合や、画像リソースが変更された場合はその要素は考慮されなくなる。 将来的に削除された要素もLCPの候補として考慮される可能性がある。

ユーザーがタップ、スクロールなどインタラクティブな行動をすると新しいエントリの報告を停止する。

注意：バックグラウンドでタブを開いた場合、タブをフォーカスするまでLCPが起こらない可能性がある。

ロード時間 vs レンダリング時間

セキュリティ上の理由から Timing-Allow-Origin ヘッダがないクロスオリジン画像はレンダリング時間が取得できないため、代わりにロード時間を取得する。 可能な場合は Timing-Allow-Origin を設定した方が良い。

要素のレイアウトやサイズの変更

パフォーマンスを抑えるため、要素のサイズや位置を変更しても新しいLCP候補は生成されない。 初期サイズと位置のみが考慮される。

これは画面外でレンダリングされ、その画面上に表示される画像がレポートされない可能性があることを意味する。 また、ビューポート内でレンダリングされた要素が画面外に移動した場合も、その要素はレポートされる。 ただし、上述したようにDOMから削除された場合は考慮から除外される。

例

https://web.dev/lcp/#examples

LCPの計測方法

ユーザーの立場からの測定ツール

開発者の立場からの測定ツール

JavaScriptでLCPを測定する

WebVitalsのJavaScriptライブラリを使って測定が可能。

import {getLCP} from 'web-vitals';

// 現在のLCP値を測定してログに記録し、
// いつでも報告できるようにする。
getLCP(console.log);

ライブラリを使わずに測定する場合は Largest Contentful Paint API を使用する。

ページがバックグラウンドタブで開かれた場合はLCPをレポートするべきではない。

LCPの改善方法

LCPは主に4つの要因に影響を受ける。

LCPを改善するには https://web.dev/optimize-lcp/ を参照。 他にも以下の記事が参考になる。

https://wicg.github.io/largest-contentful-paint/ https://developer.mozilla.org/ja/docs/Glossary/Intrinsic_Size https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/README.md