Chrome DevToolsのPerformanceタブで遅いWebサイトの原因を特定する

Chrome DevToolsのPerformanceタブを使うことで、Webサイトのレンダリング遅延やスクリプト実行の重い処理を視覚化し、具体的な改善ポイントを数分で特定できます。本記事では、実務で今日から使える実践的な手順を解説します。

Chrome DevToolsのPerformanceタブとは

Performanceタブは、ページロード時のJavaScript実行、レンダリング処理、ペイント処理など、ブラウザが実行するすべての処理をタイムライン形式で記録するツールです。FPS（フレームレート）の低下、メモリ使用量の急増、長時間実行されているスクリプトなど、ユーザーが感じるパフォーマンス低下の原因を数値化できます。

DevTools内の他のツール（Network、Elementsタブなど）と異なり、Performanceタブは実際のユーザー体験に基づいたボトルネック分析に特化しており、最適化の優先順位をつけるために不可欠です。

Performanceタブを開いて計測を開始する

基本的な計測方法

Chrome DevToolsのPerformanceタブにアクセスする手順は以下の通りです：

1. Chrome ブラウザで対象のWebサイトを開く
2. F12キーまたはCtrl+Shift+I（Windows）/ Cmd+Option+I（Mac）を押してDevToolsを起動
3. Performanceタブをクリック
4. 画面上部の丸いRecord ボタン（●）をクリックして計測開始
5. ページを操作する（スクロール、クリック、フォーム入力など）
6. 再度 Record ボタンをクリックして計測停止

計測が完了すると、タイムライングラフが表示されます。このグラフを読み取ることがパフォーマンス最適化の第一歩です。

ページ全体のロード計測（リロードから完了まで）

より正確に計測したい場合は、DevTools起動後に Record ボタンをクリック → ページをリロード → 自動停止 という方法が推奨されます。この方法なら、ブラウザキャッシュを無視した実測値が得られます。

計測中にCtrl+Shift+Deleteでキャッシュをクリアしながらリロードすると、初回訪問ユーザーの体験をシミュレートできます。

タイムラインデータを読み解く重要な指標

Core Web Vitals と Performanceタブの関係

Performanceタブに表示される以下の指標は、Google が定義する Core Web Vitals と密接に関連しています。これらを改善することが SEO ランキングにも直結します：

• LCP（Largest Contentful Paint）：ページの最大要素が表示されるまでの時間。目標は2.5秒以内
• FID（First Input Delay）：ユーザーの最初の操作に対するブラウザの応答遅延。目標は100ミリ秒以内
• CLS（Cumulative Layout Shift）：ページレイアウトがどれだけずれるか。目標は0.1以下

Performanceタブの上部には、これらの指標が自動検出されたマーカーとして表示されます。

フレームレート（FPS）の確認

グラフの上部に表示されるFPS バーの色に注目してください。緑色が高フレームレート、赤色が低フレームレートを意味します。スクロールやアニメーション中に赤くなる場合、JavaScriptまたはCSSのアニメーションに重い処理が混在している可能性があります。

具体的な改善手順：

1. 赤いFPS バーの時間帯をクリック
2. 下部のMain Threadグラフを確認
3. 長いタスク（黄色い棒グラフ）を特定し、その関数名をメモ

実践例：重いJavaScript処理を特定するワークフロー

シナリオ：ボタンクリック後に画面が固まる

以下は、クリック後にリスト描画が遅い典型的なパフォーマンス問題です。Performanceタブで原因を特定します。

// 問題のあるコード（メインスレッドをブロック）
document.getElementById('loadButton').addEventListener('click', () => {
  // 大量のDOM操作を同期処理で実行
  const items = [];
  for (let i = 0; i < 10000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    items.push(li);
  }
  document.getElementById('list').append(...items);
});

このコードをPerformanceタブで計測すると、クリック直後に黄色い長いタスクが表示されます。

改善方法：requestAnimationFrame と バッチ処理

// 改善版（メインスレッドをブロックしない）
document.getElementById('loadButton').addEventListener('click', () => {
  const list = document.getElementById('list');
  const items = [];
  const batchSize = 100;
  
  async function renderInBatches(totalItems) {
    for (let i = 0; i < totalItems; i += batchSize) {
      const batch = [];
      for (let j = i; j < i + batchSize && j < totalItems; j++) {
        const li = document.createElement('li');
        li.textContent = `Item ${j}`;
        batch.push(li);
      }
      list.append(...batch);
      
      // 次のバッチまで制御を返す
      await new Promise(resolve => requestAnimationFrame(resolve));
    }
  }
  
  renderInBatches(10000);
});

この改善版をPerformanceタブで計測すると、長いタスクが複数の短いタスクに分割され、ユーザーが操作できる時間が確保されます。

ボトルネック特定のチェックリスト

計測後、以下の手順で原因を絞り込みます：

1. Main Threadグラフで50msを超えるタスクを探す
2. 該当タスク上で右クリック → Show in DevToolsをクリック
3. Sources タブで実行中の関数と行番号が表示される
4. その関数内のループ、DOM操作、複雑な計算を見直す

メモリリークと長時間実行スクリプトの検出

メモリグラフの読み方

PerformanceタブのMemory グラフに注目してください。計測中に メモリ使用量が右肩上がりで増え続ける場合、メモリリークの可能性があります。

特に以下のパターンは危険です：

• ページ操作を止めているのに、メモリが増え続ける
• 同じ操作を10回繰り返すと、メモリが10倍になる
• ページを閉じてから他のタブを見ても、全体のメモリが減らない

メモリリークを詳しく調べるには、PerformanceタブではなくMemory タブの Heap Snapshot 機能を併用します。

Long Task の自動検出

Performance タブに Long Task

実測環境と最適化のガイダンス