クリティカル レンダリング パス

クリティカル レンダリング パスの最適化は、現在のユーザー操作に関連するコンテンツ表示の優先順位付けを意味します。

高速なウェブ エクスペリエンスを実現するためには、ブラウザで大量の処理を行う必要があります。この処理の大部分は、ウェブ デベロッパーからは見えません。ウェブ デベロッパーがマークアップを記述すると、美しいページが画面に表示されます。

では、ブラウザはどのようにして HTML、CSS、JavaScript を取り込み、画面上にピクセルをレンダリングしているのでしょうか。

パフォーマンスの最適化とは、HTML、CSS、JavaScript のバイトの受信から、これらをピクセルとしてレンダリングするために必要な処理までの中間段階で行われている内容を理解することです。これがクリティカル レンダリング パスです。

プログレッシブ ページ レンダリング

クリティカル レンダリング パスを最適化することで、ページが初めてレンダリングされるまでの時間を大幅に改善できます。 さらに、クリティカル レンダリング パスについて理解することは、高性能でインタラクティブなアプリケーションを構築するための基盤にもなります。

インタラクティブな更新プロセスも同様に、連続的なループの中で処理を行います。1 秒あたりのフレーム数は 60 fps が理想的です。まずは、ブラウザでシンプルなページを表示する方法の概要を説明します。

Critical Rendering Path

You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This is a free course offered through Udacity

Take Course