1. マニュアル
  2. デザイン

ページで読み込んでいるファイルのサイズ、ページサイズ合計、読み込み速度等を確認する方法（表示速度改善）

DevToolsについて

Google ChromeのDevToolsを利用してページで読み込んでいる、ファイルのサイズ / 合計ページサイズ / 読み込み速度等を確認することができます。
ランディングページのページサイズが大きな状態で広告を出稿されますと、エンドユーザーの回線速度が遅い場合ページが読み込まれずにページ離脱やコンバージョン低下にもつながります。
広告出稿前にこちらの手順でページサイズを確認することをおすすめします。

LPページの推奨サイズは5MBです。

また、jpeg画像が非圧縮の状態(品質・画質100%)の場合、画像サイズが非常に大きくなってしまいますので、jpeg画像は劣化が目立たない程度(目安: 品質・画質80%前後)の設定で保存されることをおすすめします。


Chromeでの確認手順

STEP1.　 Google Chromeにて目的のページを表示

ページサイズを確認したいサイトにアクセスしてください。

STEP2. 　キーボードの「F12」を押してDevToolsを起動し、「Network」タブを選択

STEP3. 　「Disable cache」にチェックを入れる


通常のページ更新(F5)の場合、2回目以降のアクセス時にキャッシュ画像を読み込んでしまいます。
そのためページサイズが実際よりも小さく表示されるので(ブラウザのデフォルト設定の場合)、「Disable cache(キャッシュを無効化)」にチェック入れキャッシュを無効にします。

STEP4. 　キーボードの「F5」を押下し、ページを更新

「transferred」にぺージサイズの合計が表示されます。

Size 押下するとサイズ降順で並び替えします。
ページで読み込まれているサイズの大きなファイルを確認することができます。
Time 押下すると時間降順で並び替えします。
ページの読み込みに時間がかかっているファイルを確認することができます。
Load 読み込みが完了した時間が表示されます。

上記を参考に、速度改善を行ってください。



DevToolsの表示変更

画面の表示変更について
画面右上の点がある箇所を押下して「Dock side」の選択でデベロッパーツールの表示を変更できます。

左から全画面、左寄せ、下寄せ、右寄せとなります。
※全画面は、別ウィンドウでデベロッパーツールが開きます。
それ以外は、目的のページの指定した個所にデベロッパーツールが表示されます。
表示文字の日本語化
STEP1.　 画面右上の歯車アイコンを押下

STEP2.　 「Language」を日本語に設定


日本語に変更したら、右上の×を押下して画面を閉じてください。

STEP3.　 「Reload DevTools」を押下

STEP4.　 日本語に表示変更


変更されない場合はページを更新してください。

この記事の目次

  1. DevToolsについて

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

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

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

件名：

お問い合わせ内容：

閉じる

© RPST Inc.