ブラウザのスロットリング：遅いインターネットとCPU fをシミュレートする

ウェブサイトを開発する場合、すべてのデバイスで見栄えがすることが重要です。あなたのウェブサイトは、ブロードバンド接続のパワフルなコンピューターでは素早く読み込まれるかもしれませんが、3Gのスマートフォンやインターネット接続の遅いコンピューターではどのように見えるでしょうか？実際の環境でウェブサイトやウェブアプリをテストするには、ブラウザのスロットルを下げて低速なネットワークやデバイスをシミュレートすることができます。 この wikiHow 記事では、Chrome DevTools を使用してウェブブラウザをスロットルしてテストする 3 つの簡単な方法を説明します。

知っておくべきこと

• プリセットを選択して CPU とネットワーク速度の両方をすばやく調整するには、.NET Framework を使用します。
• 遅いインターネット接続をシミュレートするには、.
• を使用して、遅いプロセッサを搭載したデバイスでウェブサイトをシミュレートします。
• これらの手順は、Microsoft Edgeを含むChromiumベースのブラウザでも動作します。

デバイスモードの使用

1. Chrome DevToolsを開きます。Chrome DevTools の "デバイスモード" を使用すると、ネットワークと CPU の両方を同時にスロットルして、3G 接続の低速デバイスをすばやくエミュレートできます。ブラウザでDevToolsを開くには、Ctrl + Shift + i（WindowsまたはLinux）またはCmd + Option + i（Mac）を押します。

   • テストしたいページを右クリックし、 をクリックすることもできます。
   • デバイスモードには、基本的なテスト用に2つのスロットリングプリセットしかありません。カスタムネットワークのスロットリング速度を指定する必要がある場合は、代わりにこの方法を使用してください。
2. 左側のパネルを展開して、すべてのツールバーオプションを表示します。デフォルトでは左パネル上部のツールバーからいくつかのオプションが非表示になっているので、それを展開する必要があります。左パネルと右パネルを分割する中央の垂直バーにマウスカーソルを合わせ、二重矢印カーソルが表示されるまでバーを右にドラッグし、左パネルの上に「スロットリングなし」メニューが表示されるまでバーを右にドラッグします。
3. ビューポートプロファイルを選択します。まず、DevToolsの左パネルの上に、"Dimensions "メニューで始まるツールバーが表示されていない場合、Ctrl + Shift + M (PC) または Cmd + Shift M (Mac) を押して、デバイスツールバーをオンに切り替えます。 次に、左上隅の "Dimensions "メニューからデバイス・プロファイルを選択します。

   • デフォルトでは、DevToolsのビューはモバイルです。コンピュータユーザーをエミュレートしたい場合は、モバイルに設定されているメニューをクリックし、デスクトップを選択してください。
   • Samsung Galaxy A51/71やiPhone 5/SEなど、さまざまなモデルのプロファイルから選択できます。
   • お探しのデバイスが表示されない場合は、Dimensionsメニューをクリックし、Editを選択します。次に、追加したいデバイスの横にあるチェックボックスをオンにするか、カスタムデバイスを追加をクリックして独自のビューポートプロファイルを追加します。
   • このオプションは、画面寸法を選択したデバイスに変更するだけです。そのデバイスのハードウェアを完全にエミュレートすることはできません。
4. No throttling "メニューからオプションを選択します。これは左パネル上部の最後のメニューです。ここには2つのオプションがあります：

   • ミッドティアモバイル：このオプションは、高速3G接続をシミュレートする一方で、CPUを通常の4倍遅くスロットリングします。
   • ローエンドモバイル：このオプションを選択すると、低速の3G接続をシミュレートし、CPUのスロットルを通常の6倍遅くします。
   • どちらのスロットルオプションも、お使いのコンピュータのCPUに相対的なものです。つまり、超高速のCPUを搭載したコンピュータでこれらのオプションのいずれかを選択すると、低速のコンピュータで同じテストを行うよりも速い結果が得られます。
5. ネットワーク」タブをクリックします。右のパネルの一番上にあります。
6. "キャッシュを無効にする "の隣にあるボックスにチェックを入れる。これはツールバーの "ネットワーク "の下にあります。これにより、このサイトのキャッシュがオフになり、新しいバージョンを読み込むことができます。
7. ブラウザをスロットルするためにページを更新します。Chromeの上部にある矢印をクリックするか、Ctrl + R（PC）またはCmd + R（Mac）を押してページを更新します。左側のパネルに、スロットルされたバージョンのページが表示されます。

   • 各要素のロード時間は、合計ロード時間と転送されたデータ量とともに、右パネルのNetworkタブに表示されます。

ネットワークのスロットル

1. Chrome DevTools を開きます。ネットワーク スロットリングを使用すると、低速のインターネット接続でのウェブサイトの読み込み速度を確認できます。ネットワークをスロットルすることで、CPU をスロットルすることなく、任意のネットワーク速度でブラウザでウェブサイトをテストできます。DevToolsを開くには、Ctrl + Shift + i（WindowsまたはLinux）またはCmd + Option + i（Mac）を押します。

   • また、テストしたいページを右クリックし、Inspect Elementをクリックすることもできます。
2. ビューポートプロファイルを選択します。DevToolsの左パネルの上に「Dimensions」メニューで始まるツールバーが表示されていない場合は、Ctrl + Shift + M（PC）またはCmd + Shift M（Mac）を押して、デバイスツールバーをオンに切り替えます。次に、エミュレートしたいデバイスまたは画面の寸法を選択します。

   • 電話やタブレットの画面サイズをエミュレートするには、左上隅にある「寸法」メニューからプロファイルを選択します。Surface DuoやGalaxy Note IIIなど、さまざまなモデルのプロファイルから選択できます。これらのプロファイルはビューポートサイズにのみ影響し、デバイスの実際のハードウェアには影響しないことに注意してください。
   • デフォルトでは、ビューはモバイルです。デスクトップ版のサイトをテストしたい場合は、モバイルに設定されているメニューをクリックし、デスクトップを選択してください。このオプションが表示されない場合は、2つのパネルを分割する中央の縦棒にマウスカーソルを合わせ、バーが表示されるまで右にドラッグしてください。
   • お探しの画面サイズやデバイスが表示されない場合は、他のデバイスプロファイルを追加（またはカスタムプロファイルを作成）することもできます。これを行うには、Dimensionsメニューをクリックし、Editを選択します。次に、追加したいデバイスの横にあるチェックボックスをオンにするか、［カスタムデバイスを追加］をクリックして独自の寸法を追加します。
3. Networkタブをクリックします。右側のパネルの "Sources" と "Performance" の間にあります。
4. カスタムネットワークスロットリングプロファイルを追加します（オプション）。右パネルの上部付近に、デフォルトで "No Throttling "に設定されているメニューがあります。使用できる速度プリセットもありますが、独自のカスタムプロファイルを追加して、ダウンロードとアップロードの速度を指定してネットワークをスロットリングすることもできます：

   • "スロットリングなし "メニューをクリックし、"カスタム "の下にある "追加 "を選択します。
   • カスタムプロファイルを追加]をクリックします。
   • カスタムプロファイルの名前を入力し、テストしたいダウンロードとアップロードの速度を入力します（単位はkb/秒）。
   • ウェブサイトをテストするには、テストしたい待ち時間を入力します（単位はms）。
   • Add（追加）をクリックしてプロファイルを作成します。
5. ネットワークのスロットリングオプションを選択します。右パネル上部のNo throttlingメニューをクリックし、プリセットを選択します。

   • ビルトインのプリセットは、Fast 3G、Slow 3G、またはOfflineです。
   • カスタムネットワークスロットリングプロファイルを作成した場合は、"カスタム "から選択できます。
6. "キャッシュを無効にする "の隣にあるボックスにチェックを入れます。デフォルトでは、キャッシュされたバージョンのサイトが読み込まれ、一般的なネットワーク状況よりも速く読み込まれます。初めてあなたのサイトを訪れる人はキャッシュからサイトを読み込まないので、右パネルの一番上にあるこのボックスをチェックすることで、ユーザーの初回訪問をエミュレートします。
7. スロットルされた環境でページをリロードします。Ctrl + R（PC）またはCmd + Rでページを更新できます。また、各要素の読み込みにかかった時間が「Time」列に表示され、要素リストの一番下にある「Load」の横に合計読み込み時間が表示されます。

   • また、ビューポート領域でページを操作して、サイトの各要素がスロットル接続によってどのような影響を受けるかを確認することもできます。
   • カスタムネットワークスロットリング設定をCPUスロットリングにも使用したい場合は、 をご覧ください。

CPU スロットリング

1. Chrome DevTools を開きます。消費電力の低い CPU でウェブサイトをテストする場合は、Chrome DevTools に組み込まれている CPU スロットリング ツールを使用できます。 DevTools を開くには、Ctrl + Shift + i キー（Windows または Linux）または Cmd + Option + i キー（Mac）を押します。

   • また、テストしたいページを右クリックし、「要素を検査」をクリックすることもできます。
   • インターネット接続とCPUの両方をスロットルしたい場合は、方法のステップを完了してから、 にスキップします。
2. デバイスツールバーを表示する（表示されていない場合）。DevToolsを開くと、現在のページのビューが縦に分割されます。左側のパネルには、テストしているサイトが表示されます。DevToolsの左上に "Dimensions "メニューで始まるバーが表示されていない場合は、Ctrl + Shift + M (PC)またはCmd + Shift M (Mac)を押して、Device Toolbarをオンにしてください。
3. ビューポートプロファイルを選択します。デフォルトでは、DevToolsのビューはモバイルです。スマートフォンやタブレットの画面サイズをエミュレートしたい場合は、DevToolsビューの左上にある "Dimensions "メニューからデバイスを選択できます。ビューポートはデフォルトで "Responsive "に設定されていますが、Galaxy FoldやiPhone Proなど、さまざまなモデルのプロファイルから選択できます。

   • パソコンユーザーをエミュレートしたい場合は、モバイルに設定されているメニューをクリックし、デスクトップを選択してください。左のパネルにこのメニューが表示されていない場合は、中央の仕切りバーにマウスカーソルを合わせ、カーソルが二重矢印に変わるまで右にドラッグしてください。
   • 探しているデバイスや寸法が表示されない場合は、Dimensionsメニューをクリックし、Editをクリックします。リストに追加したいデバイスのボックスをチェックするか、Add custom device...をクリックしてテストしたいデバイスを指定します。
4. パフォーマンス・タブをクリックする。右側のパネルの一番上にあります。
5. Capture Settingsツールバーの歯車アイコンをクリックします。実際には、右パネルに2つの歯車アイコンが表示されます。1つは一番上のツールバーにあり、もう1つはそのすぐ下のツールバーにあります。2番目の歯車アイコンをクリックします。この歯車アイコンは、録画ボタン（丸印）と同じ行にあります。右側のパネルにオプションが表示されます。
6. CPU throttling" メニューからオプションを選択する。4倍速スローダウンはCPUを通常の動作速度の4倍遅くし、6倍速スローダウンはCPUを通常の動作速度の6倍遅くします。

   • CPUのスロットリングは、自分のCPUとの相対的な関係であることに留意してください。言い換えると、通常のCPU速度より6倍遅くすると、最新のIntel i9プロセッサーではCeleronより速い負荷がかかります。
   • あなたのウェブアプリがnavigator.hardwareConcurrencyプロパティを使用してユーザーのデバイスのプロセッサ数を読み取る場合、オプションで "Hardware concurrency "の横のボックスをチェックし、エミュレートする数を入力することができます。
7. キャッシュを無効にする。スロットリング中にブラウザがキャッシュされたバージョンのウェブサイトを読み込まないようにするには、右パネルの一番下にあるNetwork conditionsタブをクリックし、"Disable cache "の隣にあるボックスをチェックします。
8. ネットワークスロットルを有効にする（オプション）。CPUをスロットリングしながらネットワークもスロットリングしたい場合は、"Network conditions "タブに "Network throttling "メニューが表示されます。Fast 3G か Slow 3G を選択して、CPU とインターネット速度の両方を同時にスロットルしてテストできます。
9. Ctrl+⇧ Shift+E (PC) または ⌘ Cmd+⇧ Shift+E (Mac) を押します。あるいは、右パネル上部の小さな曲がった矢印をクリックすることもできます。これは "Start profiling and reload page" オプションで、ページをリフレッシュし、スロットリングテストの結果を表示します。ページの読み込みが終了すると、各要素の読み込みにかかった時間と、各要素のシミュレーションCPUへの負荷の詳細が表示されます。

   • ページロード以外のテストも行いたい場合は、右パネル上部の Record ボタンをクリックし、左パネルでユーザーと同じようにページを操作します。テストが終了したら、Stopをクリックして、右のパネルにレポートを表示します。

なぜブラウザをスロットルするのですか？

1. 訪問者の体験をエミュレートするウェブサイトが実際の環境でどのように動作するかを知ることは重要です。インターネットユーザーの半数以上がモバイルデバイスでウェブにアクセスしているため、常にさまざまな画面サイズ、ネットワーク速度、CPUでサイトをテストする必要があります。 スマートフォンの所有者の中には、5GやWi-Fiの高速接続を使用している人もいますが、多くの人が低速の3G携帯電話ネットワークを使用しているため、訪問者をイライラさせる可能性があります。ブラウザのスロットリングは、あなたのウェブサイトがこれらの遅い接続やデバイスでどのくらい速く表示されるかを知ることができ、訪問者の満足のために変更を加えることができます。
2. ページの読み込み速度はGoogle検索ランキングに影響します。Googleはウェブサイトのモバイルコンテンツをインデックスとランキングに使用するため、ウェブサイトのモバイルバージョンはすべてのデバイスで素早く読み込まれる必要があります。 携帯電話接続を使用するAndroidとiPhone向けにウェブサイトを最適化することは、あなたのサイトの重要な部分であるべきです。 サイトを公開する前に、ブラウザのネットワークとCPUスロットリングを使用して、ウェブサイトのどの要素がさまざまな条件で読み込みに時間がかかるかを確認します。そうすれば、必要に応じてウェブサイトのモバイル版（またはモバイル版）を調整することができます。

この記事は、" Browser Throttling： この記事は、CC BY-NC-SAの下で公開された " Simulate Slow Internet & CPU for Testing " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。