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

クリティカル レンダリング パスの最適化は、ページのパフォーマンスを高める上で極めて重要な意味を持ちます。目標は、ユーザーがページ上で行う中核的操作に関係するコンテンツを優先して表示させることです。

高速のウェブ エクスペリエンスを実現するには、ブラウザが大量の処理を行う必要があります。この処理の大半は、ウェブ デベロッパーの見えないところで行われます。ウェブ デベロッパーがマークアップを記述すると、すてきなページが画面に現れます。ただし、HTML や CSS、JavaScript を基にブラウザが画面上にピクセルをレンダリングする仕組みを理解しておくことは重要です。

パフォーマンスの最適化とは、結局、HTML や CSS、JavaScript のバイトの取得からピクセルとしてレンダリングする必須処理までの間の中間段階で何が起きているのか理解することとほぼ同義です。この中間段階を「クリティカル レンダリング パス」と呼びます。

ページ レンダリングのプロセス

クリティカル レンダリング パスを最適化することで、最初にページがレンダリングされる時間を大幅に改善することができます。また、クリティカル レンダリング パスに対する理解は、優れたインタラクティブ アプリケーションを構築する基盤にもなります。インタラクティブ アップデートの処理プロセスも結局同じことであり、連続的なループの中で、理想的には 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