レンダリング パフォーマンス

サイトやアプリがうまく機能しないとユーザーは気づくので、レンダリング パフォーマンスを最適化することが非常に重要です。

今日のウェブのユーザーは、アクセスするページがインタラクティブでスムーズであることを期待しているため、この点に時間と労力を集中させる必要があります。ページの読み込みは速いだけでなく、ライフサイクル全体を通じてユーザー入力にすばやく応答できることも求められます。ユーザー エクスペリエンスのこの側面は、Interaction to Next Paint(INP)指標が正確に測定したものです。適切な INP は、ページがユーザーのニーズに対して一貫して確実に応答していることを意味します。

ページを軽快に感じられるようにするための重要な要素は、ユーザーの操作に応じて実行する JavaScript の量に関係しますが、ユーザーが期待するのは、ユーザー インターフェースの視覚的な変化です。ユーザー インターフェースの視覚的な変化は、複数の種類の処理(まとめてレンダリングと呼ばれることもあります)の結果です。この作業は、ユーザー エクスペリエンスが高速で信頼できると感じられるように、できるだけ迅速に行う必要があります。

ユーザーの操作にすばやく反応するページを作成するには、HTML、JavaScript、CSS がブラウザによってどのように処理されるかを理解し、記述するコード、および組み込む他のサードパーティ コードをできる限り効率的に実行する必要があります。

デバイスのリフレッシュ レートに関する注意事項

スマートフォンでウェブサイトを操作するユーザー。
ユーザー入力に反応しやすいウェブサイトを構築する際には、ディスプレイのリフレッシュ レートが重要な検討事項となります。

昨今のほとんどのデバイスは、画面を 1 秒に 60 回更新します。更新のたびに視覚的な出力が生成され、一般にフレームと呼ばれます。次の動画では、フレームのコンセプトを示しています。

Chrome DevTools のパフォーマンス パネルに表示されるフレーム。上部のフィルムストリップ上でカーソルをスクラブすると、モバイル ナビゲーション メニューがアニメーションで「開いた」状態になり、ツールチップ内に各フレームが拡大表示されます。

デバイスの画面は常に一定のレートで更新されますが、デバイスで実行されるアプリが必ずしも、そのリフレッシュ レートに一致するのに十分なフレームを生成できるとは限りません。たとえば、アニメーションや遷移が実行されている場合、ブラウザはデバイスのリフレッシュ レートに合わせて、画面が更新されるたびに 1 フレームを生成する必要があります。

一般的なディスプレイは 1 秒間に 60 回更新される場合、簡単な計算により、ブラウザが各フレームを生成するために必要な時間は 16.66 ミリ秒であることがわかります。しかし実際には、ブラウザにはフレームごとに独自のオーバーヘッドがあるため、すべての作業は 10 ミリ秒以内に完了する必要があります。この予算を超えないと、フレームレートが低下し、画面上でページ コンテンツが揺れてしまいます。この現象はしばしばジャンクと呼ばれます。

ただし、目標は実行する処理の種類に応じて変わります。画面上のオブジェクトが 2 点間の一連のフレームにわたって補間されるアニメーションでは、10 ミリ秒のしきい値を満たすことが非常に重要です。ユーザー インターフェースの個別の変更、つまり、間に動作を持たずに別の状態に移行する場合は、ユーザーがすぐに感じられる時間内にそのような変更を行うことをおすすめします。このようなケースでは 100 ミリ秒がよく挙げられますが、さまざまな機能を持つ幅広いデバイスに対応するために、INP 指標の「良好」しきい値は 200 ミリ秒以下です。

ジャンクを避けるためにアニメーションに必要なフレームを大量に作成する場合でも、ユーザー インターフェースに個別の視覚的変化をできるだけ早く表示するなど、目標が何であれ、ブラウザのピクセル パイプラインの仕組みを理解することが重要です。

ピクセル パイプライン

ウェブ デベロッパーとして仕事を進めるうえで、知っておくべき 5 つの主な領域があります。この 5 つの領域はユーザーが最も制御できる領域で、それぞれがピクセルからスクリーンへのパイプラインにおけるキーポイントを表します。

JavaScript、スタイル、レイアウト、ペイント、コンポジットの 5 つのステップを含む、完全なピクセル パイプライン。
フルピクセル パイプラインを示す図。
  • JavaScript: JavaScript は通常、ユーザー インターフェースを視覚的に変化させる処理を処理するために使用されます。たとえば、jQuery の animate 関数、データセットの並べ替え、ページへの DOM 要素の追加などです。視覚的な変更をトリガーするために JavaScript は厳密に必要なわけではありませんが、CSS アニメーションCSS 遷移Web Animations API を使用すると、ページ コンテンツをアニメーション化できます。
  • スタイルの計算: マッチング セレクタに基づいて、どの CSS ルールがどの HTML 要素に適用されるかを把握するプロセスです。たとえば、.headline は、headline のクラスを含む class 属性値を持つすべての HTML 要素に適用される CSS セレクタの例です。そこから、ルールが判明するとルールが適用され、各要素の最終スタイルが計算されます。
  • レイアウト: ブラウザは要素に適用されるルールを認識すると、ページのジオメトリ(要素が占めるスペースの大きさや画面上の場所など)の計算を開始できます。ウェブのレイアウトモデルでは 1 つの要素が 他の要素に影響を与える可能性がありますたとえば、<body> 要素の幅は通常、その子要素のツリーの上下全体に影響するため、ブラウザにとってこのプロセスはかなり複雑になる可能性があります。
  • ペイント: ペイントはピクセルで塗りつぶすプロセスです。これには、ページ上のレイアウトが計算された後に、テキスト、色、画像、境界線、シャドウなど、基本的にすべての視覚的要素を引き出す作業が含まれます。通常、描画は複数のサーフェス(レイヤと呼ばれることもあります)で行われます。
  • 複合: ページの一部は複数のレイヤに描画される可能性があるため、ページが期待どおりにレンダリングされるように、正しい順序で画面に適用する必要があります。要素同士が重なっている場合、このことは特に重要です。誤りがあると、ある要素が別の要素の上に誤って重なって表示される可能性があるためです。

ピクセル パイプラインのこれらの各部分は、ユーザー インターフェースの個別の視覚的変化であっても、アニメーションにジャンクを導入したり、フレームの描画を遅らせたりする可能性を表します。したがって、コードがトリガーするパイプラインの部分を正確に把握し、ピクセル パイプラインのレンダリングに必要な部分のみに変更を制限できるかどうかを調査することが重要です。

「ラスタライズ」という用語を「ペイント」と一緒に使ったことがあるかもしれません。これは、ペイントが実際には次の 2 つのタスクであるためです。

  1. 描画呼び出しのリストを作成する。
  2. ピクセルの埋め込み

後者は「ラスタライズ」と呼ばれ、DevTools でペイント レコードを見るときは常に、ラスタライズを含むと考える必要があります。一部のアーキテクチャでは、描画呼び出しとラスタライズのリストの作成が別のスレッドで行われますが、これはデベロッパーが制御することはできません。

必ずしもすべてのフレームでパイプラインのすべての部分にアクセスできるわけではありません。実際、JavaScript、CSS、Web Animations API のいずれかを使用して、視覚的な変更を行ったときに特定のフレームでパイプラインが通常どのように動作するかは 3 つあります。

1. JS / CSS > スタイル > レイアウト > ペイント > コンポジット

ステップが省略されていない、完全なピクセル パイプライン。

幅、高さ、位置などの要素のジオメトリ(left または top CSS プロパティなど)を変更するような「レイアウト」プロパティを変更した場合、ブラウザは他のすべての要素をチェックして、ページを「リフロー」する必要があります。影響を受ける領域は再ペイントする必要があり、ペイントされた最終的な要素をまとめて合成し直す必要があります。

2. JS / CSS > スタイル > ペイント > コンポジット

レイアウト ステップが省略されたピクセル パイプライン。

CSS で要素の「Paint-only」プロパティ(background-imagecolorbox-shadow などのプロパティ)を変更した場合、レイアウト ステップでページの視覚的な更新を commit する必要はありません。可能であれば、レイアウト ステップを省略することで、次のフレームの生成で大幅なレイテンシの原因となる、コストのかかるレイアウト作業を回避できます。

3. JS / CSS > スタイル > 複合

レイアウトとペイントのステップが省略されたピクセル パイプライン。

レイアウトもペイントも必要としないプロパティを変更すると、ブラウザは合成ステップに直接移動できます。これは、アニメーションやスクロールなど、ページのライフサイクルの中で負荷の高いポイントに対して、ピクセル パイプラインを通る最も低コストで望ましい方法です。豆知識: Chromium では、可能な限りコンポジタ スレッド内でのみスクロールが行われるようにページのスクロールが最適化されます。つまり、ページが応答していなくても、ページをスクロールして、以前に画面に描画された部分を表示できます。

ウェブ パフォーマンスとは、作業を回避し、必要な作業の効率を可能な限り向上させる技術です。多くの場合 問題はブラウザであれ 対抗的なものではありませんなお、パイプラインでこれまでに示した作業は、計算コストの点で異なります。タスクによっては、本質的に他のタスクよりもコストがかかります。

パイプラインのさまざまな部分を詳しく見ていきましょう。一般的な問題と、その診断方法と修正方法について説明します。

ブラウザのレンダリングの最適化

Udacity コースのスクリーンショット

パフォーマンスはユーザーにとって重要です。ウェブ デベロッパーは、優れたユーザー エクスペリエンスを構築するために、ユーザーの操作にすばやく反応し、スムーズにレンダリングするウェブサイトを構築する必要があります。パフォーマンスのエキスパートである Paul Lewis が、ジャンクの除去と 60 フレーム/秒のパフォーマンスを維持するウェブアプリの作成をサポートします。アプリのプロファイリングや、レンダリング パフォーマンスの低下の原因の特定に必要なツールをこのコースで学習します。また、ブラウザのレンダリング パイプラインを調べて、ユーザーが楽しく使用できる高速なウェブサイトを簡単に構築するためのパターンを明らかにします。

これは Udacity から提供される無料コースで、いつでも受講できます