2018年9月26日水曜日
Joseph Wynn
SpeedCurveでは、数万のWebページから詳細なパフォーマンスデータを継続的に収集しています。これにより分析のためのユニークな機会が得られ、興味深い洞察を得るためにパフォーマンスメトリクスが収集できます。この記事では、ブラウザベースのペイントタイミングのメトリックを分析します：First Paint と（Paint Timing specで定義され、Chromeで実装された）First Contentful Paint 。 また、私たちは、（draft specで定義され、chromeトレースメトリックとして実装される）First Meaningful Paintを分析する予定です。
paint timing metricsとは？
Webにおけるフォーマンス最適化の目的は、ユーザーエクスペリエンスを向上させることです。 Googleの人々は、ユーザーエキスペリエンスに関する4つの質問に答えることを目的として、ユーザ中心のパフォーマンスメトリックに焦点を当てて、この考えを押し進めています。
- 起動していますか？ 見たいページが実際にロードされていますか?
- 役に立ちますか？ 関与できる十分なコンテンツが提供されていますか。
- 使えますか？ スクロールしてページを動かせますか？または、まだ読み込んでいますか？
- 楽しいですか？ ページとのやり取りはスムーズですか？
First Paint（FP）は、新しいページに移動した後、ピクセルが最初にレンダリングされるポイントを測定します。First Contentful Paint（FCP）は少し特殊で、テキストやグラフィックが最初にレンダリングされるポイントを測定します。これらの両方の指標は、パフォーマンスAPIを通じて、クロームブラウザ（Chrome、Opera、Samsung Internetなど）で利用できます。
paint timing metricsの測定基準は、最初の質問に答えることを目的としているため重要です。私の分析では、いくつかの人気のあるウェブサイトのパフォーマンスデータを見て、paint timingの測定基準が本当にその質問に答えているかどうかを調べています。
役立つメトリックは何ですか？
paint timing metricsがユーザーエキスペリエンスを正確に反映している場合は、その情報を実際のreal user monitoring（RUM）で使用して、実際のWebページのパフォーマンスを把握できます。 これらのメトリック（測定基準）は、「起動していますか？」という質問に答えることになっていますが、デフォルトで有用ではありません。これはPaint Timingの仕様に記載されている重要な注意点です。
レンダリングの流れは複雑です。タイムスタンプはブラウザがこの流れ（ベストエフォート）でメモできる最新のものでなければなりません。 通常、表示のためにOSに送信されるフレームの時間は、このAPIのために推奨されます。
オペレーティングシステムがフレームを取得しても、そのフレームが実際にスクリーンに表示される前に、かなりの遅延が生じることがあります。したがって、ブラウザのpaint metricsを使用する場合、ユーザーが実際に画面上で何かを見たときに、それらが正しく表示されない可能性に対処する必要があります。
paint timing metricsを、WebPageTestのStart Render metricsと比較することでpaint timing metricsの精度をテストできます。WebPageTestは、実際のWebブラウザでWebページを読み込み、ページの読み込み時に画面のビデオをキャプチャします。最初のピクセルがスクリーンにレンダリングされるポイントを見つけ、フレームごとに比較してStart Render timeを計算します。つまり、Start Renderは、16.6667ms（60fpsでキャプチャされたビデオのフレーム時間）内に正確にピクセルが表示されたときを表します。
続ける前に、First PaintはStart Renderと似ていますが、First Contentful Paintとは定義上似ていません。しかし、私はこの分析方法に、First Contentful Paintを含めることにしました。データはかなり興味深いものだからです。
分析
SpeedCurveは、WebPageTestを使用してパフォーマンステストを実行します。つまり、ブラウザのペイントメトリックとWebPageTestのStart Renderを比較できるように、豊富なデータにアクセスします。 私は、Alexaトップサイト40でパフォーマンステストを定期的にパフォーマンステストを実行し、それらのテストアカウントの１つとデータと照合し、統計分析を行いました。このデータと私が分析に使ったコードはGitHubで公開されています。
paint metricsについての疑問は、Start Renderとどのくらい違うのか？ です。そのため、すべてのテスト結果（FP – SRとFCP – SR）でFirst PaintとContentful Paintがどのようにレンダリングするかを計算しました。以下は、このデータをヒストグラムにしました。
ヒストグラムに慣れていない方は下記を読んでみてください。
- X軸は、各メトリックがレンダリングを開始するまでの時間（秒）です。 負の値は、StartRenderの前にメトリックが発生したことを意味します。 X軸の各バーは20msのバケットです。
- Y軸は、各バケットに計量値が入るテストの数です。 たとえば、レンダリング開始前に-40msと-21msの間にFirst Contentful Paintが発生した372のテストがあります。
このヒストグラムで、最初に気づくのは、レンダリングを開始する前にpaint timing metricsが頻繁に表示されることです。 これとは別に、FPやFCPは何かが画面に表示される前に記録されることがよくあります。 これは興味深い発見ですが、「複雑なレンダリングパイプライン」の警告と考えれば、まったく予想外のことではありません。
いくつかの百分位数(パーセンタイル)を計算することによって、このデータから人に優しい結論を出すことができます。
- 95％のFPと85％のFCPイベントは、Start Renderの前に発生します。
- FPおよびFCPイベントの50％は、Start Renderの90ms以内に発生します。
- FPおよびFCPイベントの80％は、200msのStart Render内で発生します。
このデータはロード時間が異なるページから来るため、Start Renderのパーセンテージとしてデルタを表示する方が便利かもしれません。
ヒストグラムの形はあまり変わっていませんが、今回はもう少し有用なスケールがあり、ほとんどの場合、Paint Timing metricsはStart Renderの10％内にあることがわかります。このデータからいくつかの人に優しい結論として
- FPおよびFCPイベントの50％は、Start Renderの4％以内で発生します。
- FPおよびFCPイベントの80％は、Start Renderの10％以内で発生します。
これに関連して、paint timing metricsとStart Renderの違いははるかに合理的です。
これらの数字をどうしたらいいのか？
10％が合理的な誤差マージンであると受け入れることができれば、このデータはFPとFCP時間の80％が最初のピクセルがユーザーの画面にレンダリングされたときの合理的に正確な表現であることを示しています。
ページ読み込みの残りの20％はどうですか？
10％の誤差の範囲外にあるFP値は、Start Render timeの前にあります。つまり、スクリーンがまだ空白になっている時点を表します。一方、外側のFCP値は、ほとんどがStart Render timeの後にあります。 私はこれがFirst Contentful Paintの効果がプラスに働いているところだと思います。これらの異常値は最初のレンダーを表していませんが、少なくとも何かがレンダリングされた時点を表しています。この違いが、FCPがFPよりもわずかに有用なメトリックになっているように感じます。少なくとも、ユーザーが画面上のfirst renderを見るときを表しています。
First Meaningful Paintはどうですか？
私はFirst Meaningful Paintも分析すると言いました。First Contentful Paintのように、FMPはStart Renderとは根本的に異なるメトリックを意図しています。First Meaningful Paintの「meaningful」の部分は、レイアウトオブジェクトの数、ページの高さ、およびWebフォントのようなヒューリスティックスから来ています。
したがって、FMPはStart Renderよりもはるかに後で発生することが予想されます。 Start RenderとFP、FCP、FMPの違いのヒストグラムを見てみましょう。
驚いたことに、FMPはStart Renderの前に定期的に発生するという点で、他の2つの測定基準と同じ問題を抱えていました。 FMPは高度な経験則のおかげで、画面上に実際にピクセルがある時点を表す可能性が非常に高くなります。
- FMPイベントの50％はレンダリングの開始前に発生します。
主な所見
この分析から重要な発見がいくつかあります
- Paint timing metricsが楽観的すぎます。 85〜95％は、ピクセルが実際にスクリーンにレンダリングされる前に記録されます。
- First Meaningful Paintは、他のメトリックよりも改善されていますが、複雑なレンダリングパイプラインの問題を抱えています。すべてのピクセルが実際にスクリーンに表示される前に、FMPイベントの半分が発生します。
- ユーザーが画面上で何を見ているかを真に表すメトリックが必要な場合は、WebPageTestなどの合成テストツールに限られます。このツールは、ページの読み込み中に画面のビデオをキャプチャします。 実際のユーザーの監視（RUM）では、独自のカスタム指標を使用して、ページの負荷の最も大きい部分を測定する方が良いでしょう。
最終的な免責事項：ウェブページの小さなサンプルから少量のデータを分析したことに留意することが重要です。 現代のWebページは非常に複雑で、まれに2ページも同じようにレンダリングされることがあります。 自分のWebページのデータを常に使用して、ページのユーザーエクスペリエンスを最もよく表しているものを判断する必要があります。
