「最初のペイントまでの時間」「最初の意味的なペイント」

Question

SOのWebパフォーマンスセクションはありますか？

はその後time to first paint（https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool）とFirst Meaningful Paint（https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint）との差は、もしあれば、何で（私は1つを発見していない）ではないと仮定すると？

Answer 1

興味深い塗装時間がいくつかあります。最初のピクセルはスクリーン上に描かれ時間：最初のものは

• 第1塗料です。たとえば、ページの背景色です。
• 最初のコンテンツペイント： DOMからの最初のコンテンツピースがペイントされた時間、つまりテキストまたはイメージ。
• 最初に意味のあるペイント：ブラウザがuseraが興味を持っているコンテンツをペイントする時間。これはページによって大きく異なります。

最初の2つは実際にChromesタイミングAPIによってトラッキングされ、Googleアナリティクスでレポートされます。

最初に意味のあるペイント（FMP）をブラウザーAPIから即座に測定することはできません。 FMPを測定する際の一般的な考え方は、主要なユーザコンテンツを構成する要素である英雄要素を定義し、それらのペイント時間を測定することである。現在、DOM内の特定の要素のペイント時間を取得する方法はありません

LighthouseやWebPageTestなどのツールは、レンダリング時に最も大きなレイアウト変更を行うことでFMPを推定します。