クリティカル レンダリング パス: 概要と最適化方法

公開: 2023-04-27

ユーザーに超高速の Web エクスペリエンスを提供することについて話すとき、私たちはしばしば、Web サイトの所有者および Web 開発者として何をすべきかだけに焦点を当てます。

しかし、真実は次のとおりです。

高速な Web エクスペリエンスを提供するには、ブラウザーによる多くの作業も必要です。

HTML、CSS、および JavaScript ファイルを受け取り、特定の手順を実行して、それらを画面上のピクセルに変換します。

パフォーマンスを高速化する秘訣は、リソースを受け取ってからレンダリング ピクセルに変換する処理までの間に何が起こるかを理解することにあります。

このプロセスは、クリティカル レンダリング パス (CRP)とも呼ばれます。

この記事では、CRP について知っておく必要があるすべてのことと、レンダリングを高速化するために CRP を最適化する方法について説明します。

  • クリティカル レンダリング パスとは
  • クリティカル レンダリング パス シーケンスの説明
  • サイトのクリティカル レンダリング パスを最適化する方法
  • CRPを最適化する3つのWordPressプラグイン
  • CRP最適化チェックリスト

さぁ、始めよう！


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

クリティカル レンダリング パスとは、Web ブラウザーが HTML、CSS、および JavaScript コードをユーザーの画面上の視覚的表現に変換するために実行する一連の手順を指します。

Document Object Model (DOM) の構築、CSS Object Model (CSSOM) の生成、両者を組み合わせて Render Tree を作成するといった一連のプロセスが含まれます。 次に、Render Tree を使用してレイアウトを計算し、ユーザーの画面にピクセルを描画します。

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

一方、クリティカル レンダリング パスの最適化とは、ユーザーの現在のアクションに関連するコンテンツを優先しながら、シーケンスの各ステップを実行するために Web ブラウザーが費やす時間を削減することを指します。

最適化の取り組みを確実に成功させるには、シーケンスの各ステップを深く理解する必要があります。 したがって、次のいくつかの段落は不可欠であり、行動を起こす前にそれらを読むことを強くお勧めします.


クリティカル レンダリング パス シーケンスの説明

ページをレンダリングするときにブラウザーによって実行される手順の概要を次に示します。

  1. ブラウザーは HTML マークアップをダウンロードして解析し、DOM を作成します。
  2. 次に、CSS マークアップをダウンロードして処理し、CSS オブジェクト モデル (CSSOM) を構築します。
  3. 次に、DOM と CSSOM から必要なノードを組み合わせて、ページのレンダリングに必要なすべての可視ノードのツリー構造であるレンダリング ツリーを作成します。
  4. レイアウトプロセスを通じて、ページ上のすべての要素の寸法と位置を計算します。
  5. 最後に、ブラウザは画面上にピクセルを描画します。

それでは、各ステップに注目してみましょう。


DOM

ドキュメント オブジェクト モデル (DOM) は、HTML ドキュメントのブラウザの内部表現です。

Web ページが読み込まれると、ブラウザーは HTML を解析し、ドキュメント内の要素を表すノードのツリー状構造を作成します。 各ノードは HTML 要素に対応し、その属性、コンテンツ、およびツリー内の位置を説明するプロパティを持っています。

DOM ツリー

重要:ブラウザーは徐々に DOM を構築します。これにより、効率的な構造を構築し、過剰な DOM サイズを回避することで、ページのレンダリングを最適化できます。


CSSOM

DOM にはページのすべてのコンテンツが含まれますが、CSSOM には DOM のスタイル設定方法に関するすべての情報が含まれます。

CSSOM

DOM と CSSOM のもう 1 つの違いは、次のとおりです。

DOM の構築は段階的ですが、CSSOM はそうではありません。

Web サイトが読み込まれると、ブラウザは CSS を処理してスタイルを適用する必要があります。 少しずつ処理できる HTML とは異なり、CSS は一度に処理する必要があります。 これは、一部のスタイルが後で CSS ファイル内の別のスタイルによって上書きされる可能性があるためです。そのため、ブラウザーは、適用するスタイルを決定する前に、CSS ファイル全体を読み取るまで待機する必要があります。

これは、後で上書きされるスタイルを表示してリソースを浪費することを避けるために行われます。

簡単に言えば：

ブラウザーは、すべての CSS を受信して​​解析するまで、レンダリング プロセスをブロックします。

そのため、CSS はレンダリングをブロックするリソースと見なされます。


レンダー ツリー

レンダリング ツリーは、ブラウザーが Web ページの視覚的表現を作成するために使用する DOM と CSSOM の組み合わせです。

ブラウザは Render Tree を使用して、ペイント プロセスの入力としてノードの寸法と位置を計算します。

レンダリング ツリー

重要: Render Tree には、可視コンテンツのみがキャプチャされます。 通常、head セクションには目に見える情報が含まれていないため、除外されます。 さらに、要素にdisplay: noneプロパティがある場合、要素もその子孫もレンダリング ツリーに含まれません。


レイアウト

レンダー ツリーが構築されたら、次のステップはレイアウトです。 レイアウトは、寸法、位置、および相互関係を定義することによって、ページ上の各要素の配置と向きを確立します。

しかし、ここに問題があります：

レイアウトのパフォーマンスは DOM の影響を受けます。

言い換えると：

DOM ノードの数が多いほど、レイアウト プロセスに時間がかかります。


ペイント

最終段階では、ピクセルを画面にペイントします。これは、レンダー ツリーとレイアウトの作成に続きます。

最初は、ロード プロセス中に画面全体が描画されます。 その後、ブラウザは必要な領域のみを再描画するように設計されているため、画面の影響を受ける部分のみが再描画されます。

ペイント ステージの所要時間は、Render Tree に実装されている更新の性質によって異なることに注意してください。

次に、ブラウザを支援し、一部のプロセスを高速化するために適用できる最適化を見てみましょう。


サイトのクリティカル レンダリング パスを最適化する方法

ブラウザーがプロセス全体を実行するのに必要な時間はさまざまです。 クリティカル パスの長さに寄与する多くの可動部分があります。

  • 原稿サイズ
  • リクエスト数
  • ユーザーデバイス
  • 適用されたスタイル

それにもかかわらず、CRP 最適化に関しては、頼りになるオプションと見なされる 3 つの手法があります。

  1. 重要でないリソースを延期するか、それらを完全に排除することにより、重要なリソースの数を最小限に抑えます
  2. 必要なリクエスト数と各リクエストのファイル サイズを最適化する
  3. 重要なアセットのダウンロードを優先して、クリティカル パスの長さを短縮します。

推奨される各最適化戦略を実装する方法をもう少し詳しく見てみましょう。


レンダリングをブロックする CSS および JS リソースを最適化する

ブラウザーがレンダリングをブロックする CSS および JS リソースに遭遇した場合、レンダリングを含む他の処理を行う前に、それらをダウンロード、解析、および実行する必要があることは既にご存じでしょう。

レンダリング ブロック リソースのレンダリングへの影響

CSS の最適化に関しては、次の手法を実装できます。

  • 重要な CSS。 Web ページの表示部分をレンダリングするために必要な CSS ルールの最小限のセットを識別し、完全なスタイルシートをロードするのではなく、インライン CSS としてブラウザーに配信します。 スクロールせずに見えるコンテンツに必要な CSS のみを読み込むことで、ブラウザーはページをより迅速にレンダリングし、ユーザー エクスペリエンスを向上させることができます。 これは、ブラウザーがページをレンダリングする前にスタイルシート全体が読み込まれるのを待つ必要がないためです。
  • CSS ファイルを結合します。 CSS 連結は、複数の CSS ファイルを 1 つのファイルに結合するプロセスです。 この手法は、ウェブページの読み込みに必要な HTTP リクエストの数を減らすことでパフォーマンスを向上させます。これは、ブラウザが複数の CSS ファイルではなく 1 つの CSS ファイルをダウンロードして解析するだけで済むためです。

JavaScript ファイルに関しては、次のことができます。

  • JS の読み込みを遅らせます。 JS 読み込みの延期は、HTML ドキュメントの読み込みと解析が完了するまで JavaScript ファイルの読み込みを遅らせることで、サイトを高速化する手法です。 JS ファイルを参照するscriptタグでdefer属性を使用できます。 複数の遅延スクリプトがある場合、実行順序が予測できない可能性があるため、遅延属性は、読み込み時にすぐに実行する必要がない JS ファイル (特定のページでのみ使用されるファイルなど) にのみ使用する必要があることに注意してください。使用されています。
  • JS を非同期にロードします。 一部の JS ファイルでは、async 属性の使用が必要な場合があります。これにより、HTML ドキュメントの解析とは非同期にファイルをロードおよび実行できます。

CSS と JavaScript の両方に適用できるいくつかの最適化があります。

  • 縮小。 縮小には、空白、コメント、改行などの不要な文字を CSS および JavaScript ファイルから削除することが含まれます。 このプロセスにより、ファイルの機能や外観に影響を与えることなく、ファイルのサイズを大幅に縮小できます。
  • 未使用の CSS と JS を削除します。 未使用の CSS と JS は、特定のページで使用されていないが、まだ読み込まれている特定のルールを指します。 ファイルのこれらの部分を削除すると、ブラウザーがレンダリング ツリーを構築する速度に直接影響します。

自動操縦でレンダリング ブロック リソースを最適化します。 ニトロパックをインストール →


ファイルのサイズを小さくする

ブラウザーがダウンロードする必要があるデータの量を減らすために、HTML、CSS、および JavaScript リソースの縮小、圧縮、およびキャッシュなどの手法を採用できます。

ミニフィケーションが何を意味するかは既に知っているので、残りの 2 つに注目しましょう。

  • 圧縮。 圧縮は、アルゴリズムを適用して、ファイルのバイナリ コードを元のコードよりも少ないビット数で書き換える技術です。 その結果、ファイルのサイズが大幅に小さくなり、ページの読み込み時間と帯域幅の使用量が削減されます。
  • キャッシング。 キャッシングは、すべてのブラウザーに実装されている HTTP キャッシュを利用します。 効果的なキャッシュを確保するには、各サーバーの応答が正しい HTTP ヘッダーを提供し、要求されたリソースをキャッシュするタイミングと期間をブラウザーに指示する必要があります。

最先端のキャッシング メカニズムに依存します。 今すぐ NitroPack を入手 →


重要なアセットのダウンロードを優先する

一般に、ブラウザは最も重要なリソースに優先順位を付けて最初にフェッチすることに長けています。 ただし、場合によっては、最も重要なリソースに手動で優先順位を付けることで、サイトの読み込みをさらに高速化することができます.

リソース ヒントを使用して、特定のリソースまたは Web ページの処理方法をブラウザーに伝えることができます。

主なものは次の 3 つです。

  • リンク rel=プリフェッチ。 プリフェッチは優先度の低いリソース ヒントであり、後で必要になる可能性のあるリソースをブラウザーがフェッチして、ブラウザーのキャッシュに保存できるようにします。

リンク rel プリフェッチの説明

  • リンク rel = 事前接続。 preconnect ディレクティブは、ブラウザが最初のリクエストをサーバーに送信する前に初期接続を確立するのに役立ちます。

リンクありとなしの違い rel=preconnect

  • リンク rel=プリロード。 プリロードは、ページにとって重要であるため、ブラウザがリソースを検出するよりも早くリソースをダウンロードするようブラウザに強制するために使用されます。

重要:プリフェッチとプリコネクトはリソース ヒントであり、ブラウザーが適切と判断したときに実行されます。 preload ディレクティブは、ブラウザーに必須のコマンドです。 リソース ヒントを実装する方法の詳細については、こちらをご覧ください。

クリティカル レンダリング パスの最適化を処理する方法がわかったので、プロセスを自動化できる WordPress プラグインをいくつか見てみましょう。


クリティカル レンダリング パスを最適化する 3 つの WordPress プラグイン

上記の最適化はすべて手動で行うことができます。 ただし、プロセス中にサイトを壊さないようにするために、技術的な知識が必要なものもあります。

すべての WordPress ユーザーにとって幸いなことに、CRP の最適化に役立つプラグインがあります。 私たちの意見では、上位 3 つの候補を確認してみましょう。


NitroPack - オールインワン ソリューション

ニトロパックのホームページ

NitroPack は、35 以上の Web パフォーマンス機能を組み合わせた、業界をリードするオールインワンのサイト速度最適化ソリューションです。 クリティカル レンダリング パスの最適化に関しては、NitroPack は次のような最適化を自動的に処理します。

  • 重要な CSS
  • CSS と JS の縮小
  • CSS および JS 圧縮
  • キャッシング
  • JS の読み込みを遅らせる
  • 未使用の CSS と JS を削除する

しかし、最適化機能はこれだけではありません。 完全なパフォーマンス ツールキットも入手できます。

  • 組み込み CDN
  • 完全な画像最適化スタック
  • フォントの最適化
  • e コマース カートのキャッシング
  • 年中無休のサポート

ウェブサイトを自動的に高速化します。 今すぐ NitroPack を入手 →


WP Super Cache - キャッシュ専用プラグイン

WP スーパーキャッシュ

WP Super Cache は、主にキャッシング機能と HTTP 圧縮を提供するキャッシング プラグインですが、リソースの縮小と async および defer 属性を使用した JavaScript の最適化には不十分です。

最も注目すべき機能は次のとおりです。

  • すべての訪問者のキャッシュを有効にする
  • ログインした訪問者のキャッシュを無効にする
  • ページを圧縮して、訪問者により迅速に提供されるようにする
  • キャッシュの再構築


迅速なパフォーマンス

迅速なパフォーマンス

Swift Performance は、最適化された CRP の追求に役立つ別のプラグインです。 その機能のいくつかは次のとおりです。

  • CSS および JavaScript ファイルの縮小
  • 重要な CSS
  • キャッシング
  • 画像の最適化


クリティカル レンダリング パスの最適化 [チェックリスト]

この記事では多くのことを取り上げましたので、言及したすべての最適化の便利なチェックリストを以下に示します。

  • 重要な CSS を生成する
  • CSSファイルを結合する
  • JavaScript の読み込みを遅らせる
  • JavaScript を非同期で読み込む
  • CSS と JavaScript を縮小する
  • CSS と JavaScript を圧縮する
  • 未使用の CSS と JavaScript を削除する
  • 縮小を適用
  • 圧縮を適用する
  • キャッシュを使用する
  • リンク rel=preload を実装する
  • リンク rel=prefetch を実装する
  • リンク rel=preconnect を実装する

CRP最適化チェックリストをダウンロード →

最後になりましたが、最適化の前後にテストすることを忘れないでください。