[Performance] パネルの右上に赤い三角形が表示され、[Summary] タブに警告が表示されます。これは、実行に時間がかかり、パフォーマンスが遅いメインスレッドでの処理を示しています。
![[Summary] タブに赤い三角形と警告が表示された長いタスク。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/long-task.png?authuser=3&hl=ja)
パフォーマンスの録画では、長時間実行タスクの一部が 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] キャプチャ設定をオンにしてパフォーマンス トレースを記録します。
セレクタ統計情報を使用してパフォーマンス トレースを記録するには:
ウェブページ（フォト ギャラリー デモページなど）を開きます。
DevTools を開き、[Performance] パネルに移動します。
[パフォーマンス] パネルで、settings の [キャプチャ設定] ボタンをクリックし、check_box [CSS セレクタの統計データを有効にする] をオンにします。
![[CSS セレクタの統計データを有効にする] をオンにしました設定されます。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/selector-stats-setting.png?authuser=3&hl=ja)
radio_button_checked 録画をクリックし、改善したいシナリオを実行してから、radio_button_checked 停止をクリックします。
次に、次のセクションで説明するように、CSS セレクタの統計情報を表示します。
単一イベントの CSS ルールセレクタの統計情報を表示する
1 つの [スタイルを再計算] イベントに関係する CSS ルールセレクタの統計情報を表示するには:
パフォーマンスの録音で [Recalculate Style] イベントを見つけてクリックします。
[パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。
[セレクタの統計] タブの CSS セレクタの表
[セレクタの統計データ] タブには、CSS セレクタの表が表示されます。この表には、各 CSS セレクタについて次の情報が示されています。
| 列 | 説明 |
|---|---|
| 経過時間（ミリ秒） | ブラウザがこの CSS セレクタの照合に費やした時間です。この時間はミリ秒（ms）で表されます。1 ms は 1/1000 秒です。 |
| マッチング試行回数 | ブラウザ エンジンがこの CSS セレクタとのマッチングを試みた要素の数。 |
| 一致数 | ブラウザ エンジンがこの CSS セレクタと一致させた要素の数です。 |
| 遅いパスの不一致の割合（%） | ブラウザ エンジンがマッチングを試みた要素のうち、マッチングに最適化されていないコードをブラウザ エンジンが使用しなければならなかった要素のうち、この CSS セレクタに一致しなかった要素の割合。 |
| セレクタ | 一致した CSS セレクタです。 |
| スタイルシート | CSS セレクタを含む CSS スタイルシート。 |
完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[CSS セレクタの統計データを有効にする] check_box をオフにします。
複数のイベントの CSS ルールセレクタの統計情報を表示する
複数の [Recalculate Style] イベントに関係する CSS ルールセレクタの集計データを表示するには、以下のように、複数の [Selector Stats] テーブルをスプレッドシートにコピーします。
目的の [Recalculate Style] イベントを見つけてクリックします。
[パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。
セレクタの統計データテーブルを右クリックし、[テーブルをコピー] を選択します。
![[テーブルのコピー]オプションを選択します。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/copy-table.png?authuser=3&hl=ja)
Google スプレッドシートなどのスプレッドシートに表を貼り付けます。
目的の別の [Recalculate Style] イベントで前の手順を繰り返します。
完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[CSS セレクタの統計データを有効にする] check_box をオフにします。
フル記録の CSS ルールセレクタの統計情報の集計を表示します
パフォーマンスの記録全体に関連する CSS ルールセレクタの集計統計情報を表示するには:
フレームチャートの空白の領域をクリックすると、選択可能なイベントの選択を解除できます。
録音範囲全体を選択します。これを行うには、[Performance] パネルの上部にある CPU グラフをダブルクリックします。
[パフォーマンス] パネルの下部で、[セレクタの統計] タブを開きます。すべてのセレクタの合計のデータを含む新しい行が上部に表示されます。
完了したら、[パフォーマンス] パネルで [設定] [キャプチャ設定] を開き、[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] イベント期間が短縮されたことを確認します。