1. マニュアル

Chrome DevToolsを使ったページサイズの確認方法

Google ChromeのDevToolsを使用することで、ページサイズを確認することが可能です。



STEP1.  Chrome DevToolsを開く

Windows: 「F12」キーを押すか、ページ上の任意の場所で右クリックし、コンテキストメニューから「検証」を選択します。
※ノートPCなどで「F12」キーがファンクションキーとして動作しない場合は、「Fn + F12」キーを押してください。

macOS: 「Option + Command + I」キーを押すか、ページ上の任意の場所で右クリック(またはControlクリック)し、コンテキストメニューから「検証」を選択します。


STEP2.  Chrome DevToolsの日本語設定

日本語表示に変更するには、右上の歯車アイコンをクリックし、 「 Preferences」タブ内の「Appearance > Language」で 「 Japanese - 日本語」を選択してください。


STEP3.  「Network(ネットワーク)」タブを選択

DevToolsウィンドウ上部のタブバーから「Network(ネットワーク)」タブをクリックします。


STEP4.  キャッシュを無効化

「Network(ネットワーク)」タブ内で「Disable cache(キャッシュを無効化)」のチェックボックスにチェックを入れます。

キャッシュが有効なままですと、ブラウザが一部のデータを保存した状態で読み込むため、実際よりもページサイズが小さく見えてしまいます。

これは2回目以降のアクセス時の動作に近く、初回訪問時に近い通信量を正しく把握できなくなります。 特に広告出稿前は、エンドユーザーの初回アクセス時と同じ条件でページサイズを確認することが重要です。


STEP5.  スマートフォンでアクセスしたように確認する場合

DevTools左上にある、スマートフォンとタブレットの形をしたアイコン(デバイスツールバー)をクリックします。
以下のショートカットキーでも同様の操作が可能です。

Windows: 「Ctrl + Shift + M
macOS: 「Cmd + Shift + M

※PCとスマートフォンではユーザーエージェント(UA)が異なるため、リピストにおいては、表示されるページの内容やページサイズが変化する可能性があります。
そのため、両方のUAでアクセスし、それぞれの表示内容やページサイズを確認することを推奨します。


STEP6.  ページを再読み込み

Windows: 「Ctrl + R」キーを押すか、アドレスバーの横にある再読み込みボタンをクリックします。
macOS: 「Command + R」キーを押すか、アドレスバーの横にある再読み込みボタンをクリックします。


STEP7.  転送されたデータ量を確認

ページが完全に読み込まれると、「Network(ネットワーク)」タブのリソース一覧に、各リソースの読み込み情報が表示されます。
ページ全体の合計転送サイズは、リストの最下部に表示される「◯◯ MB transferred(◯◯ MB 転送されました)」 という項目で確認できます。


この値が3MB〜5MB程度であれば、広告出稿時にもパフォーマンス的に安心できる状態といえます。

5MBより大きいようであれば、ページサイズを減らす対応を行ってください。

トラフィックを減らす(ページを軽くする)には?




補足事項

「Size(サイズ)」列

圧縮やその他の最適化が行われる前のリソースの元のサイズが表示されます。
「Size(サイズ)」をクリックすることで昇順、降順に並び替え可能となり、サイズが大きなリソースを確認しやすくなります。





この記事の目次

  1. Chrome DevToolsを使ったページサイズの確認方法(Windows / macOS 共通)
  2. - 補足事項

ありがとうございました。
よろしければ、ご意見をお聞かせください。

件名、コメントをご入力いただき、『送信』ボタンをクリックしてください。

ご意見を送られない場合は、『閉じる』ボタンをクリックしてください。

件名:

お問い合わせ内容:

閉じる