5.3 スロットリング

スロットリングの概要

なぜスロットリングが必要か

• 開発環境は高速な有線接続が多い
• 実際のユーザーはモバイル回線や低速Wi-Fiを使用
• 遅いネットワークでの体験を事前に確認
• パフォーマンス最適化の効果を実感

シミュレートできる要素

スロットリングの使い方

Networkパネルから設定

Performanceパネルから設定

Performanceパネルの設定（歯車アイコン）からもNetwork throttlingを設定可能。パフォーマンス計測と組み合わせて使用する場合に便利。

Command Menuから設定

Ctrl+Shift+P → 「throttle」で検索 → プリセットを選択

プリセット一覧

DevToolsには一般的なネットワーク環境のプリセットが用意されている。

カスタムプロファイル

プリセット以外の条件でテストしたい場合、カスタムプロファイルを作成できる。

作成方法

設定値の目安

プロファイルの管理

Settings → Throttling で、作成したプロファイルの編集・削除が可能。

オフラインモード

ネットワーク接続を完全に遮断するモード。Service Workerのオフライン対応をテストする際に使用。

設定方法

• Networkパネル: ドロップダウンから「Offline」を選択
• Applicationパネル: Service Workers → 「Offline」チェックボックス

テストシナリオ

• オフライン時のフォールバックページ表示
• キャッシュからのリソース提供
• オフライン時のエラーハンドリング
• 接続復帰時の再同期

CPU スロットリング

Performanceパネルでは、CPUの処理速度も制限できる。低スペックデバイスをシミュレート。

設定方法

プリセット

複合テスト

NetworkとCPUの両方を制限することで、より現実的なモバイル環境をシミュレートできる。

推奨テストパターン

Device Modeとの連携

Device Mode（レスポンシブデザインモード）と組み合わせると、モバイルデバイスの総合的なシミュレートが可能。

Device Modeを開く

Ctrl+Shift+M、またはツールバーのデバイスアイコン

Device Modeでのスロットリング

Device Modeのツールバーにもスロットリングのドロップダウンがある。デバイスプリセット（iPhone、Pixel等）を選択すると、画面サイズと共にネットワーク条件も設定される場合がある。

テスト項目

• 画面サイズ: レスポンシブレイアウト
• タッチ操作: クリック→タップの変換
• ネットワーク: 低速回線
• CPU: 低スペックデバイス

活用シーン

ローディング表示の確認

高速回線では一瞬で完了する読み込みも、低速回線では数秒かかる。スピナーやスケルトンスクリーンが適切に表示されるか確認。

タイムアウト処理のテスト

Slow 3Gでリクエストを発行し、タイムアウト処理が正しく動作するか確認。

画像の遅延読み込み

低速回線で画像の遅延読み込み（lazy loading）が正しく機能し、ユーザー体験を向上させているか確認。

プログレッシブエンハンスメント

JavaScript読み込み前のHTML/CSSのみの状態でも、基本的なコンテンツが表示されるか確認。

バンドルサイズの影響

JavaScriptバンドルが大きいと、低速回線では読み込みに時間がかかる。コード分割の効果を確認。

テストのTips

Disable cacheと併用

「Disable cache」を有効にして、初回訪問時の体験をテスト。キャッシュがあると本来の読み込み時間が分からない。

複数回テスト

ネットワークは変動するため、複数回テストして平均的な体験を把握。

実機でも確認

スロットリングはシミュレーション。最終確認は実際のモバイルデバイスと実際のネットワーク環境で行う。

スロットリング解除を忘れずに

テスト後は「No throttling」に戻す。スロットリングが有効なまま開発を続けると、パフォーマンスの判断を誤る可能性がある。