サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス

ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築

[akatakun]

Critical Rendering Path: ブラウザがページの最初のペイントを実行するために必要とするこのシーケンス

[bleu-bleut]

DOMツリー、CSSOMツリー、JavaScriptの実行、レンダリングツリー（display:noneは含めない）、レイアウトの生成（幅とかの計算？）、ペインティング。

[kenzy_n]

起筆