つの画像から始めましょう。ウォーターフォールを確認します。分析に適していません。ついてをご覧ください。ミリ秒かかっています。バイトを受信してからダウンロードを終了する時間を示しています。回のラウンドトリップでファイル全体を取得できます。この時間の半分はネットワーク上で待機しており、残りの半分はサーバーの応答を待っています。ms)が表示されています。これは、青色の縦線に相当します。ツリーを構築するのにかかった所要時間であり、今回の場合、数ミリ秒にすぎません。イベントをブロックしていない点にも注目してください。ツリーを構築し、ページを描画することもできます。高速化するうえで、すべてのリソースが重要であるわけではありません。レンダリングをブロックしませんが、できる限り早く画像がレンダリングされるように配慮する必要はあります。呼ばれます)は画像によってブロックされます。時点でレポートされています。イベントは、ページに必要なすべてのリソースのダウンロードと処理が完了した時点を示すことを思い出してください。この時点で、ブラウザの読み込み中スピナー(ウォーターフォールの赤い縦線)の回転が停止します。サンプル」ページは、一見するとシンプルに見えますが、内部ではさまざまな処理が実行されています。以外の要素も必要になります。以上のスクリプトを組み込んで、ページに相互作用を追加することはよくあります。この両者をサンプルに追加して、どうなるか見てみましょう。つのリクエストがウォーターフォールに追加されます。ブラウザは、ほぼ同時にすべてをディスパッチしています。イベントのタイミングの差は大幅に縮まっています。構築する必要があります。イベントはブロックされます。ファイルがダウンロードされるまでブロックする必要があります。構築されるまで、ブラウザはスクリプトを実行できません。スクリプトの方がページのレンダリングが高速になるでしょうか。試してどうなるか見てみましょう。タイミングは実質同じです。インラインであっても外部ファイルであっても、大きな違いはありません。構築されるまで待機します。ブラウザによって同時にダウンロードされ、ほぼ同時にダウンロードが完了していました。コードをインライン化してもあまり役に立ちません。ページのレンダリングを高速化する方法はいくつかあります。属性を追加してパーサーのブロックを解除できることを思い出してください。インライン化を元に戻して、試してみましょう。ブロック(外部)JavaScript:非同期(外部)JavaScript:よくなりました。解析された直後に呼び出されます。構築も並行して進められます。両方をインライン化するというアプローチもあります。時間は、前のサンプルとほぼ同じです。両方を直接ページにインライン化しています。ページが大きくなりますが、ブラウザが外部リソースの取得を待機する必要がないというメリットがあります。パスの最適化は容易ではありません。異なるリソース間の依存関係グラフを理解し、どのリソースが「クリティカル」であるかを特定する必要があります。最適な戦略を特定するには、このようなプロセスを自身で実践する必要があります。パターンを特定してみましょう。マークアップのみで構成されています。構築して、最後に画面にレンダリングする必要があります。間の時間は、ネットワークとサーバーの処理時間をキャプチャします。トリップでドキュメント全体を取得します。転送プロトコルの仕組み上、必要なラウンドトリップ数が増える可能性があります。往復(最低)となります。ファイルを使用するケースを検討しましょう。ファイルも必要であることがわかります。取得する必要があります。回のラウンドトリップが発生します。ファイルは複数回のラウンドトリップを必要とする場合があるため、「最小値」が強調されています。パスを説明する際に使用する用語をいくつか示します。ページの最初のレンダリングをブロックする可能性のあるリソース。リソースを取得するために必要な合計時間。ページの最初のレンダリングに必要なバイト数の合計。リソースの転送ファイルサイズの合計です。文書そのものの転送サイズだけでした。パス特性と比較してみましょう。