このページは Cloud Translation API によって翻訳されました。

Chrome ユーザーエクスペリエンスレポートでの初回入力遅延に関するテスト

Rick Viscomi

このコースでは、 Chrome ユーザーエクスペリエンスレポートウェブコミュニティが実際のコンテンツの分布と進化について理解し、向上させることができますこれまでは、ペイントとページ読み込みの指標に重点を置いてきました First Contentful Paint（FCP）や Onload（OL）といったウェブサイトがユーザーにとっての視覚パフォーマンスをどのように把握するか。まず、 2018 年 6 月のリリースでは、ユーザー中心の指標をウェブページのインタラクティビティに重点を置いています。 First Input Delay （FID）。この新しい指標を導入することでユーザー入力から始まります

FID は最近、オリジントライアルウェブサイトでこの新しいウェブプラットフォームのテストにオプトインできます機能。同様に、FID は Chrome UX レポートで 試験運用版の指標であるため、別の「試験運用」バージョン内のオリジントライアルNamespace があります。

FID の測定方法

では、FID とは何でしょうか。ここでは、Terraform モジュールで First Input Delay 発表のブログ投稿:

First Input Delay（FID）は、ユーザーが初めて操作を行ってからの経過時間を測定（例: ユーザーがリンクやボタンをタップしたとき、カスタムの JavaScript ベースの制御など）を、ブラウザが実際にそのやり取りに反応します。

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> ビジー状態のメインスレッドがです。

これは、ドアホンが鳴ってから応答するまでの時間を計測することに似ていますできます。時間がかかる場合は、さまざまな原因が考えられます。たとえば人がドアから遠く離れているか、すぐに動けないこともあります。同様に、ウェブページが他の処理を行っているときにビジー状態か、ユーザーのデバイスが遅くなります。

Chrome UX レポートで FID を調べる

何百万ものオリジンから 1 か月に取得された FID データには、すでに豊富にある注目すべきインサイトがたくさんあります。実際に実行されているクエリを BigQuery の Chrome UX レポートからこれらの分析情報を抽出する方法を実演しています。

まず、developers.google.com の高速 FID エクスペリエンスの割合をクエリします。高速エクスペリエンスは、FID が 100 ミリ秒未満のエクスペリエンスと定義できます。 RAIL の推奨事項に従い、遅延が 100 ms 以上であれば、ユーザーは即座に応答していると感じるはずです。

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

結果によると、このオリジンにおける FID エクスペリエンスの 95% が即座に検索されます。とてもいいように思えますが、他のオリジンと比べてどうでしょうかどうすればよいでしょうか。

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

このクエリの結果は、FID エクスペリエンスの 84% が 100 ミリ秒未満であることを示しています。 developers.google.com は平均以上です

次に、このデータをスライスして、2 つの値に差異があるかどうかをパソコンと比較した高速 FID の割合ある仮説はデバイスの FID 値が遅くなっています。これは、デバイスの FID 値がデスクトップパソコンです。CPU の処理能力が低いと、長時間ビジーになる可能性が FID エクスペリエンスが遅くなります。

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor

form_factor	fast_fid
デスクトップ	96.02％
電話	79.90％
タブレット	76.48％

結果はこの仮説を裏付けています。パソコンの方が累積密度が高いスマートフォンやタブレットのフォームファクタよりも高速の FID エクスペリエンスです。理由を理解するたとえば CPU パフォーマンスに違いがある場合は、Google Cloud の外部で A/B テスト Chrome UX レポートの対象です。

オリジンの FID エクスペリエンスが高速かどうかを確認する方法を説明したので、パフォーマンスが特に高いオリジンをいくつか見てみましょう

例 1: http://secretlycanadian.com

secretlycanadian.com の WebPageTest フィルムストリップ

このオリジンは 98% 100 ミリ秒未満の FID エクスペリエンスの割合。その方法組み込みの分析 WebPageTest WordPress のイメージはかなり多いことがわかりますが、そのサイズは 168 KB です。ラボのマシンで約 500 ミリ秒で実行される JavaScript。これはあまり HTTP Archive に基づく多くの JavaScript このページは 28 パーセンタイルです

secretlycanadian.com の AWebPageTest ウォーターフォール

2.7 ～ 3.0 秒に及ぶピンク色のバーは、HTML の解析フェーズです。実施中ページがインタラクティブではなく、視覚的に不完全な時間（「3.0 秒」を参照））。その後に処理の必要がある時間のかかるタスクがあればメインスレッドが休止状態を維持できるように分割されます。ピンク色の線が 11 行目は、JavaScript の処理が短時間で分散していることを示しています。

例 2: https://www.wtfast.com

このオリジンには 96% のインスタント FID がある体験できます267 KB の JavaScript（HTTP アーカイブの 38 パーセンタイル）が読み込まれ、ラボマシンで 900 ミリ秒間処理されます。フィルムストリップを見ると背景のペイントに約 5 秒、ペイントにさらに約 2 秒かかりますできます。

結果で特に興味深い点メインスレッドがビジー状態の間は 3 ～ 5 秒に設定します。ページの FCP の遅れが原因となって FID が改善されます。これは、多くの指標を使用することの重要性を示す良い例です。ユーザーエクスペリエンスを表現します

探索を始める

FID について詳しくは、今週の「The State of the Web」のエピソードをご覧ください。

Chrome UX レポートで FID を確認できれば、ベースラインを確立できるインタラクティブなエクスペリエンスを提供しますこのベースラインを使用すると、個々のオリジンのベンチマークを実施できます。これから自社サイトのフィールド測定で FID を収集する場合、オリジン bit.ly/event-timing-ot にアクセスして、トライアルを作成します。 [イベントのタイミング]機能を選択しますそしてもちろんこちらからこのデータセットから、ウェブ上のインタラクティビティの状態に関する興味深い知見を得ることができます。これはまだ試験運用版の指標ですので、ぜひフィードバックをお寄せください。 Chrome UX レポートのヘルプグループで分析してくださいまたは Twitter の @ChromeUXReport をご覧ください。