スタイル再計算イベント中の CSS セレクタのパフォーマンスを分析する

Sofia Emelianova
Sofia Emelianova
GitHub

[Performance] パネルの右上に赤い三角形が表示され、[Summary] タブに警告が表示されます。これは、実行に時間がかかり、パフォーマンスが遅いメインスレッドでの処理を示しています。

[Summary] タブに赤い三角形と警告が表示された長いタスク。

パフォーマンスの録画では、長時間実行タスクの一部が Recalculate Style イベントになることがあります。スタイルの再計算イベントは、ブラウザが次の処理を行うのにかかる時間をトラッキングします。

  • ページ上の DOM 要素を反復処理し、特定の要素に一致する CSS スタイルルールをすべて見つけます。
  • 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。

次のような場合に CSS ルールの適用範囲が変更された場合は、必ず CSS スタイルを再計算する必要があります。

  • DOM への要素の追加または削除。
  • クラスの値や ID 属性の値など、要素の属性が変更された。
  • ユーザーがマウスの移動や要素のフォーカスの変更などの入力を行うと、:hover ルールに影響する可能性があります。

Recalculate Style イベントを長時間実行すると、パフォーマンスの問題が生じる可能性があり、表示が長時間かかる原因となり、ウェブサイトの Interaction to Next Paint（INP） に影響する可能性があります。実行時間が長い [Recalculate Style] イベントがある場合は、[セレクタの統計データ] タブを使用して、どの CSS セレクタが最も時間がかかってパフォーマンスが低下しているかを把握できます。

[セレクタの統計データ] タブには、パフォーマンス記録内の 1 つ以上の [スタイルを再計算] イベントに関与した CSS ルールセレクタに関する統計情報が表示されます。

セレクタの統計データをオンにしてパフォーマンス トレースを記録する

長時間にわたる [Recalculate Style] イベント中に CSS ルールセレクタの統計情報を表示するには、[Selector Stats] キャプチャ設定をオンにしてパフォーマンス トレースを記録します。

セレクタ統計情報を使用してパフォーマンス トレースを記録するには:

  1. ウェブページ（フォト ギャラリー デモページなど）を開きます。

  2. DevTools を開き、[Performance] パネルに移動します。

  3. [パフォーマンス] パネルで、settings の [キャプチャ設定] ボタンをクリックし、check_box [CSS セレクタの統計データを有効にする] をオンにします。

    [CSS セレクタの統計データを有効にする] をオンにしました設定されます。

  4. radio_button_checked 録画をクリックし、改善したいシナリオを実行してから、radio_button_checked 停止をクリックします。

次に、次のセクションで説明するように、CSS セレクタの統計情報を表示します。

単一イベントの CSS ルールセレクタの統計情報を表示する

1 つの [スタイルを再計算] イベントに関係する CSS ルールセレクタの統計情報を表示するには:

  1. セレクタの統計機能をオンにしてパフォーマンス トレースを記録する。

  2. パフォーマンスの録音で [Recalculate Style] イベントを見つけてクリックします。

  3. [パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。

セレクタの統計データタブです。

[セレクタの統計] タブの CSS セレクタの表

[セレクタの統計データ] タブには、CSS セレクタの表が表示されます。この表には、各 CSS セレクタについて次の情報が示されています。

列 説明
経過時間（ミリ秒） ブラウザがこの CSS セレクタの照合に費やした時間です。この時間はミリ秒（ms）で表されます。1 ms は 1/1000 秒です。
マッチング試行回数 ブラウザ エンジンがこの CSS セレクタとのマッチングを試みた要素の数。
一致数 ブラウザ エンジンがこの CSS セレクタと一致させた要素の数です。
遅いパスの不一致の割合（%） ブラウザ エンジンがマッチングを試みた要素のうち、マッチングに最適化されていないコードをブラウザ エンジンが使用しなければならなかった要素のうち、この CSS セレクタに一致しなかった要素の割合。
セレクタ 一致した CSS セレクタです。
スタイルシート CSS セレクタを含む CSS スタイルシート。

完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[CSS セレクタの統計データを有効にする] check_box をオフにします。

複数のイベントの CSS ルールセレクタの統計情報を表示する

複数の [Recalculate Style] イベントに関係する CSS ルールセレクタの集計データを表示するには、以下のように、複数の [Selector Stats] テーブルをスプレッドシートにコピーします。

  1. セレクタの統計機能をオンにしてパフォーマンス トレースを記録する。

  2. 目的の [Recalculate Style] イベントを見つけてクリックします。

  3. [パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。

  4. セレクタの統計データテーブルを右クリックし、[テーブルをコピー] を選択します。

    [テーブルのコピー]オプションを選択します。

  5. Google スプレッドシートなどのスプレッドシートに表を貼り付けます。

  6. 目的の別の [Recalculate Style] イベントで前の手順を繰り返します。

完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[CSS セレクタの統計データを有効にする] check_box をオフにします。

フル記録の CSS ルールセレクタの統計情報の集計を表示します

パフォーマンスの記録全体に関連する CSS ルールセレクタの集計統計情報を表示するには:

  1. セレクタの統計機能をオンにしてパフォーマンス トレースを記録する。

  2. フレームチャートの空白の領域をクリックすると、選択可能なイベントの選択を解除できます。

  3. 録音範囲全体を選択します。これを行うには、[Performance] パネルの上部にある CPU グラフをダブルクリックします。

  4. [パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。すべてのセレクタの合計のデータを含む新しい行が上部に表示されます。

すべてのセレクタの統計情報の合計。

完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[CSS セレクタの統計データを有効にする] check_box をオフにします。

CSS セレクタの統計情報を分析する

[Selector Stats] 表のデータを昇順または降順で並べ替えるには、列ヘッダーをクリックします。たとえば、最も時間がかかっている CSS セレクタを確認するには、[経過時間（ミリ秒）] 列ヘッダーをクリックします。

経過時間の降順で並べ替えられたデータ。

ウェブページのパフォーマンスを向上させるには、次のような CSS セレクタに注目してください。

  • 計算に時間がかかった（経過時間（ミリ秒）の値が大きくなる）。
  • ブラウザが何度も一致を試行した（[Match Attempts] の値が高い）。
  • ブラウザが実際には多くの要素と照合しなかった要素（Match Attempts の値と比較して [Match Count] の値が低い）
  • これは、遅いパスの不一致の割合が高いことです。

たとえば、前のスクリーンショットでは、次のようになります。

  • 最初の CSS セレクタ（html body .ps[tooltip...）で時間がかかっていました。
  • ブラウザ エンジンはこの CSS セレクタとの照合を 1, 104 回試みましたが、どの要素にも一致しませんでした。

したがって、この CSS セレクタは最初に改善すべき候補となります。

CSS セレクタを変更して、計算にかかる時間を減らし、ページ上の要素数を減らすようにしてください。CSS セレクタを改善する方法は、ユースケースによって異なります。

このチュートリアルの手順を繰り返して、変更によって [Elapsed (ms)] 列の [Recalculate Style] イベント期間が短縮されたことを確認します。