推奨されるウェブパフォーマンスのタイミング: 長すぎるとはどのくらいか

読み込みの目標

「1 秒未満」は読み込みの最適値としてよく言われますが、それはどういう意味でしょうか？1秒は、新しいコンテンツのリクエストが行われ読み込みが開始されたことをユーザーに示すための最大時点として考えてみるべきです。例えば、ブラウザーがページタイトルを表示したり、ページの背景色が表示されたりするまでの時間です。

リクエストから取得される最初の資産は通常 HTML 文書で、これが追加の資産を呼び出します。クリティカルレンダリングパス の説明にあるように、ブラウザーは HTML を受信するとすぐに処理を開始し、追加の資産の読み込みを待つことなく、受信した内容に応じてコンテンツをレンダリングします。

はい、読み込み 1 秒は目標ですが、達成しているサイトはほとんどありません。期待値は異なります。企業ネットワーク上の 'hello world' はミリ秒単位での読み込みが期待されますが、シベリア北部のエッジネットワーク経由で5年前の端末から猫の動画をダウンロードするユーザーにとっては、 20 秒のダウンロードでも速いと感じるでしょう。ユーザーに読み込み中であることを伝えず、進行状況も示さないまま 3 ～ 4 秒待たせると、一般的なサイトは潜在的な来訪者を失います。そして、そうした来訪者が再び訪れるには、たとえ戻ってきても長い時間がかかるでしょう。

パフォーマンス最適化においては、野心的な最初の読み込み目標を設定してください。例えばモバイル 3G ネットワークで 5 秒、オフィスの T1 回線では 1.5 秒といった目標です。さらに、サービスワーカーやキャッシュを活用し、後続のページ読み込みにはより野心的な目標を設定しましょう。ページの初期読み込みと追加の資産の読み込み、ユーザー操作への応答、滑らかなアニメーションを実現するために、推奨時間はそれぞれ異なります。

アイドル状態の目標

ブラウザーは単一のスレッドです（ただしウェブワーカーではバックグラウンドスレッドに対応して います）。これは、ユーザー操作、描画、スクリプトの実行がすべて同じスレッド上で行われるということです。スレッドが複雑な JavaScript の実行でビジー状態になると、メインスレッドはボタン押下などのユーザー入力に応答できなくなります。このため、スクリプトの実行は範囲を制限し、 50 ミリ秒以内で実行できるコードの塊に分割すべきです。これにより、ユーザーと対話するためのスレッドが利用できる状態になります。

アニメーションの目標

スクロールやその他のアニメーションを滑らかに表示し、応答性を感じさせるためには、コンテンツの再描画が 60 フレーム毎秒 (60fps)、つまり 16.7 ミリ秒ごとに発生する必要があります。この 16.7 ミリ秒にはスクリプティング、リフロー、再描画が記載されています。ドキュメントの1フレームレンダリングには約 6 ミリ秒かかるため、残りの処理には約 10 ミリ秒が割り当てられます。 60fps を下回る場合、特にフレームレートが不安定または変動すると、何らかの形でカクつきが現れます。

応答の目標

ユーザーがコンテンツを操作する際には、フィードバックを提供し、ユーザーのレスポンスや操作に応答することが重要です。この応答は 100 ミリ秒以内、できれば 50 ミリ秒以内に行う必要があります。 50 ミリ秒は即座に感じられます。ユーザー操作への応答は、ホバーやボタン押下など、多くの場合は即座に感じられるべきですが、それは完了後の応答が瞬時であるべきという意味ではありません。反応が 100ms を超えると、ユーザー操作と応答の間に違和感が生まれますが、 100 ～ 200ms の遷移で応答を表示すれば、メニューの表示など、操作が引き起こした反応をユーザーが認識しやすくなります。応答が完了するまでに 100ms 以上かかる場合は、操作が行われたことをユーザーに伝える何らかのフィードバックを提供してください。