「ボタンをクリックしたら画面がフリーズする」
「スクロールがカクつく」
「なぜかこのページだけ表示が遅い」
——こうした問題に直面したとき、あなたはどう対処していますか?
Webパフォーマンスの問題は、ユーザー体験を大きく損なう要因です。Chromeデベロッパーツールのパフォーマンスタブは、こうした問題の原因を特定し、改善するための強力なツールです。
この記事では、パフォーマンスタブの基礎知識から、Lighthouseとの使い分け、パフォーマンス指標の見方まで、実務で役立つ知識を解説します。
Webパフォーマンスとは何か
Webパフォーマンスとは、Webサイトやアプリケーションがどれだけ速く、スムーズに動作するかを示す指標です。パフォーマンスが悪いと、以下のような問題が発生します:
- ユーザー体験の悪化: ページの読み込みが遅い、操作に対する反応が鈍い
- 離脱率の増加: Googleの調査によると、ページ読み込みが3秒を超えると53%のユーザーが離脱
- SEOへの悪影響: Core Web VitalsがGoogleの検索順位に影響
- コンバージョン率の低下: Amazonの調査では、ページ速度が0.1秒遅くなると売上が1%減少
つまり、パフォーマンス改善は単なる技術的課題ではなく、ビジネスに直結する重要な要素なのです。
パフォーマンスタブで測定できること
Chromeのパフォーマンスタブでは、以下の項目を詳細に測定できます:
JavaScript実行時間
スクリプトの実行にどれだけ時間がかかっているかを測定します。重い処理や非効率なアルゴリズムが原因で、メインスレッドがブロックされている時間を特定できます。
// 重い処理の例
function heavyCalculation() {
let result = 0;
for (let i = 0; i > 10000000; i++) {
result += Math.sqrt(i);
}
return result;
}
このような処理が実行されると、その間ブラウザは他の処理(ユーザー入力への応答、レンダリング等)を行えません。
レンダリング時間
ブラウザが画面を描画するまでの時間を測定します。レンダリングプロセスは以下のステップで構成されます:
- スタイル計算(Recalculate Style): CSSルールを要素に適用
- レイアウト(Layout): 要素の位置とサイズを計算
- ペイント(Paint): ピクセルを描画
- コンポジット(Composite): レイヤーを合成
これらの処理が頻繁に発生すると、画面のカクつきの原因となります。
ネットワーク待ち時間
リソース(画像、CSS、JavaScriptファイル等)の読み込みにかかる時間を測定します。ただし、ネットワークの詳細分析にはネットワークタブの方が適しています。
メモリ使用量
JavaScriptヒープのメモリ使用量を測定できます。メモリリークの疑いがある場合に有効です。
重要なパフォーマンス指標を理解する
Webパフォーマンスを評価する際、いくつかの重要な指標があります。これらを理解することで、パフォーマンスタブの結果をより効果的に分析できます。
FPS(Frame Per Second)
FPSは1秒間に描画されるフレーム数を示します。スムーズなアニメーションやスクロールのためには、60FPSを維持する必要があります。
60FPSを維持するには、1フレームあたり約16.67ミリ秒以内に処理を完了させる必要があります。パフォーマンスタブでは、FPSが低下している箇所が赤く表示されるため、問題を素早く特定できます。
// スクロールイベントでのパフォーマンス問題の例
window.addEventListener('scroll', function() {
// 悪い例: 毎回レイアウト計算が発生
const scrollTop = document.documentElement.scrollTop;
document.querySelector('.header').style.top = scrollTop + 'px';
});
Core Web Vitals
GoogleがSEOの評価基準として採用している3つの指標です:
LCP(Largest Contentful Paint)
ページ内で最も大きなコンテンツ(通常はメイン画像やヒーローセクション)が表示されるまでの時間です。
- 良好: 2.5秒以内
- 改善が必要: 2.5〜4.0秒
- 不良: 4.0秒以上
INP(Interaction to Next Paint)
2024年3月にFID(First Input Delay)に代わって採用された指標で、ユーザーの操作(クリック、タップ等)から次の画面描画までの時間を測定します。
- 良好: 200ミリ秒以内
- 改善が必要: 200〜500ミリ秒
- 不良: 500ミリ秒以上
// INPが悪化する例
button.addEventListener('click', function() {
// 重い同期処理がINPを悪化させる
heavyCalculation();
updateUI();
});
// 改善例: 処理を分割
button.addEventListener('click', function() {
requestIdleCallback(() => {
heavyCalculation();
});
updateUI(); // UIは先に更新
});
CLS(Cumulative Layout Shift)
ページ読み込み中に要素が予期せず移動する「レイアウトシフト」の累積値です。
- 良好: 0.1以下
- 改善が必要: 0.1〜0.25
- 不良: 0.25以上
/* CLSを防ぐ: 画像に明示的なサイズを指定 */
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* 読み込み前にスペースを確保 */
}
ブラウザのレンダリングプロセスを理解する
パフォーマンスタブの結果を正しく解釈するには、ブラウザがどのように画面を描画しているかを理解する必要があります。
クリティカルレンダリングパス
ブラウザがHTMLを受け取ってから画面に表示するまでの流れを「クリティカルレンダリングパス」と呼びます:
- HTML解析: HTMLをパースしてDOM(Document Object Model)を構築
- CSS解析: CSSをパースしてCSSOM(CSS Object Model)を構築
- レンダーツリー構築: DOMとCSSOMを組み合わせて、実際に表示する要素のツリーを作成
- レイアウト: 各要素の位置とサイズを計算
- ペイント: ピクセル単位で描画
- コンポジット: 複数のレイヤーを合成して最終的な画面を生成
メインスレッドとレンダリングブロッキング
JavaScriptはシングルスレッドで実行されるため、JavaScript実行中は他の処理(レンダリング、ユーザー入力への応答等)がブロックされます。これを「レンダリングブロッキング」と呼びます。
// レンダリングをブロックする例
function processLargeData() {
const data = getLargeArray(); // 10万件のデータ
const result = [];
// この処理中、ブラウザは固まる
for (let i = 0; i < data.length; i++) {
result.push(data[i] * 2);
}
return result;
}
// 改善例: 処理を分割
async function processLargeDataAsync() {
const data = getLargeArray();
const result = [];
const chunkSize = 1000;
for (let i = 0; i < data.length; i += chunkSize) {
const chunk = data.slice(i, i + chunkSize);
for (let item of chunk) {
result.push(item * 2);
}
// メインスレッドを解放
await new Promise(resolve => setTimeout(resolve, 0));
}
return result;
}
強制同期レイアウト(Forced Synchronous Layout)
JavaScriptでスタイルを変更した直後にレイアウト情報(offsetHeight、scrollTop等)を読み取ると、ブラウザは即座にレイアウト計算を実行します。これが繰り返されると、パフォーマンスが大きく低下します。
// 悪い例: 強制同期レイアウトが発生
function resizeElements() {
const elements = document.querySelectorAll('.box');
elements.forEach(el => {
el.style.width = '100px'; // 書き込み
const height = el.offsetHeight; // 読み取り → レイアウト再計算
el.style.height = height + 'px'; // 書き込み
});
}
// 良い例: 読み書きを分離
function resizeElementsOptimized() {
const elements = document.querySelectorAll('.box');
// 先に全て読み取る
const heights = Array.from(elements).map(el => el.offsetHeight);
// その後書き込む
elements.forEach((el, i) => {
el.style.width = '100px';
el.style.height = heights[i] + 'px';
});
}
Lighthouseとパフォーマンスタブの違いと使い分け
Chromeデベロッパーツールには、Lighthouseという別のパフォーマンス測定ツールもあります。この2つのツールは目的が異なるため、適切に使い分ける必要があります。
Lighthouseを使うべき時
Lighthouseはページ読み込み全体の総合評価に適しています:
- 初回訪問時のページ読み込みパフォーマンスを測定したい
- Core Web Vitalsのスコアを確認したい
- SEO、アクセシビリティ、ベストプラクティスも同時にチェックしたい
- 改善提案を自動で得たい
Lighthouseは自動化されたテストとして優れていますが、特定の操作やインタラクションのパフォーマンスは測定できません。
パフォーマンスタブを使うべき時
パフォーマンスタブは詳細な分析と特定操作の調査に適しています:
- ボタンクリックやスクロールなど、特定の操作が重い原因を調べたい
- どの関数で時間がかかっているか、ミリ秒単位で特定したい
- フレームレート(FPS)の低下を調査したい
- JavaScriptの実行フローを詳細に追いたい
併用する方法
実務では、以下のように両方のツールを組み合わせると効果的です:
- Lighthouseで全体評価: まずLighthouseでページ全体のスコアを確認
- 問題箇所を特定: スコアが低い項目や警告を確認
- パフォーマンスタブで深堀り: 具体的な関数やタイミングを特定
- 改善後に再測定: Lighthouseで効果を確認
なぜパフォーマンス計測が重要なのか
パフォーマンス改善は、技術的な満足感だけでなく、実際のビジネス成果につながります。
ユーザー体験の向上
ページの読み込みが速く、操作への反応が素早いサイトは、ユーザーにストレスを与えません。特にモバイル環境では、ネットワーク速度やデバイス性能が限られているため、パフォーマンス最適化の効果が顕著に現れます。
SEOへの影響
2021年以降、GoogleはCore Web VitalsをSEOのランキング要因として採用しています。パフォーマンスの良いサイトは、検索結果で上位に表示されやすくなります。
離脱率の改善
モバイルユーザーの調査では、ページ読み込みが:
- 1秒から3秒に増えると、離脱率が32%増加
- 1秒から5秒に増えると、離脱率が90%増加
- 1秒から10秒に増えると、離脱率が123%増加
わずか数秒の違いが、ユーザーの行動に大きく影響します。
コンバージョン率への影響
ECサイトやSaaSなど、コンバージョンが重要なビジネスでは、パフォーマンス改善が直接収益に影響します:
- Pinterestが認知されたレイテンシを40%削減したところ、検索エンジントラフィックとサインアップが15%増加
- AutoAnythingがページ読み込み時間を半減させたところ、売上が12〜13%増加
パフォーマンスタブの基本的な使い方
パフォーマンスタブを使い始めるための基本的な手順を紹介します。
パフォーマンスタブを開く
Chromeデベロッパーツールを開く方法:
- Windows/Linux:
F12またはCtrl + Shift + I - Mac:
Cmd + Option + I - 右クリック → 「検証」
デベロッパーツールが開いたら、上部のタブから「パフォーマンス」を選択します。
記録の種類
パフォーマンスタブでは、2種類の記録方法があります:
ページの再読み込みを記録
ページ読み込み全体のパフォーマンスを測定します。左上の更新アイコンをクリックすると、ページがリロードされ、読み込みプロセス全体が記録されます。
特定の操作を記録
ボタンクリックやスクロールなど、特定の操作のパフォーマンスを測定します:
- 記録ボタン(●)をクリック
- 測定したい操作を実行
- 停止ボタン(■)をクリック
記録結果の基本構成
記録が完了すると、いくつかのセクションが表示されます:
- 概要: FPS、CPU、ネットワークのグラフ
- メイン: メインスレッドの詳細なタイムライン
- フレーム: 各フレームの情報
- タイミング: 重要なイベントのタイミング
次のステップ: 実践的なパフォーマンス改善へ
ここまで、パフォーマンスタブの基礎知識、パフォーマンス指標、レンダリングの仕組み、そしてLighthouseとの使い分けについて解説してきました。
しかし、これらの知識を実際の問題解決に活かすには、具体的なボトルネックの特定方法や改善手法を学ぶ必要があります。
次の実践編では、以下の内容を詳しく解説します:
- パフォーマンスタブでの記録の取り方(詳細設定を含む)
- 記録結果の詳しい見方と分析方法
- ボトルネックの特定手順
- 実務でのパフォーマンス改善事例
- よくあるハマりポイントと対処法
実践編では、具体的なコード例とともに、実際の問題をどのように解決するかを学んでいきます。
まとめ
Chromeデベロッパーツールのパフォーマンスタブは、Webパフォーマンスの問題を詳細に分析するための強力なツールです。
重要なポイントをおさらいしましょう:
- Webパフォーマンスはユーザー体験、SEO、ビジネス成果に直結する
- FPS、Core Web Vitals(LCP、INP、CLS)などの指標を理解することが重要
- ブラウザのレンダリングプロセスを理解すると、問題の原因が見えてくる
- Lighthouseは全体評価、パフォーマンスタブは詳細分析と使い分ける
- メインスレッドのブロッキングや強制同期レイアウトに注意
次の実践編では、これらの知識を実際の開発現場でどのように活用するかを学んでいきましょう。
