Google ChromeだけでOK!遅いインターネット接続をシミュレートしてサイト表示速度をテストする方法

自宅のパソコンでは、私のウェブサイトは瞬く間に読み込まれます。しかしそれは、Verizon FIOSの100/100Mbpsという高速インターネットプランを利用しているからこそです。スマートフォンでアクセスした場合も、4G LTEの電波強度が常に4〜5本あるため、サイトは驚くほど速く表示されます。

ところが、Google Analyticsでサイトの実際の読み込み時間を確認してみると、自分の環境での1〜2秒ではなく、5秒、7秒、場合によっては10秒という大幅に高い数値が記録されていました。考えてみれば当然で、超高速なブロードバンド回線を使ってサイトを閲覧しているユーザーはごく一部にすぎません。

実際の読み込み時間がなかなか把握できなかったため、パソコン上で意図的に低速な接続を再現し、どの要素の読み込みに時間がかかっているのかを確認したいと思うようになりました。ネットで検索すると、プロキシや高機能なデバッグツールを紹介する記事が多数見つかりますが、その中には有料のものも少なくありません。

しかし実は、この課題には完全無料で、はるかに手軽な解決策があります。パソコンにGoogle Chromeがすでにインストールされていれば、低速ネットワークのシミュレートに必要なものはすべて揃っているのです。

この記事では、Chromeのデベロッパーツールを使って、ネットワーク接続速度を好きな速度に制限(スロットリング)する方法を詳しく解説します。

Chromeで低速ネットワーク接続をシミュレートする手順

1. デベロッパーツールを開く

まだChromeをインストールしていない場合は、あらかじめインストールしておいてください。準備ができたら新しいタブを開き、「CTRL + SHIFT + I」を押してデベロッパーツールを起動します。メニュー(縦3点アイコン)から「その他のツール」→「デベロッパーツール」を選択しても開けます。

デベロッパーツールのウィンドウは、初期状態では画面右側にドッキングされて表示されることが多いです。より多くのデータを一度に確認できるため、筆者は画面下部へのドッキングをおすすめします。変更するには、ウィンドウ右上の縦3点アイコンをクリックし、中央のドック位置を選択しましょう。

2. Networkタブでスロットリング速度を選択する

次に「Network(ネットワーク)」タブをクリックします。右側に「No Throttling(スロットリングなし)」というラベルが表示されているはずです。

このラベルをクリックすると、低速接続のシミュレートに使える事前設定済み速度のドロップダウンリストが表示されます。

選択肢は「Offline(オフライン)」から「WiFi」まで幅広く用意されており、各プリセットにはレイテンシ(Latency)・ダウンロード(Download)・アップロード(Upload)の数値が定義されています。最も遅いのは「GPRS」で、以降は「Regular 2G」「Good 2G」「Regular 3G」「Good 3G」「Regular 4G」「DSL」「WiFi」の順に速くなります。

任意のオプションを選んだら、表示中のページを再読み込みするか、アドレスバーに別のURLを入力してテストします。このとき必ず、デベロッパーツールが開いている同じタブ内で操作してください。スロットリングは有効化したタブにのみ適用されます。

なお、デベロッパーツール左上のスマートフォン型アイコン(デバイスツールバー)をクリックしてモバイル端末のエミュレーションを組み合わせると、モバイル回線を想定した表示テストも同時に行えるので便利です。

3. カスタムプロファイルを追加する(任意)

プリセット以外の独自の速度でテストしたい場合は、「Custom(カスタム)」セクションの「Add(追加)」ボタンをクリックします。続いて「Add Custom Profile(カスタムプロファイルを追加)」を選択すれば、レイテンシや帯域を自由に指定した新しいプロファイルを作成できます。

実際に試してみると、最も遅い「GPRS」設定では、www.google.comの読み込みになんと16秒もかかりました。このように体感差は歴然で、低速回線ユーザーの視点を理解するのにとても役立ちます。

Chromeに標準搭載されたこの機能は、追加ツールや費用を一切かけずに、低速回線環境でのウェブサイトの読み込み時間をテストできる優秀なツールです。サイトの表示速度改善やページ容量の見直しに、ぜひ活用してみてください。質問がある場合は、お気軽にコメント欄でお知らせください。