カンタンにページで読み込まれる画像がわかる!Google Chromeのデベロッパーツールの「Networkパネル」を使ってみよう!

東京は4年振りの積雪でしたね!白銀に包まれる都会はなかなか見ることができないので、幻想的な感じでしたね!

さて、今回はGoogle Chromeをお使いの方であれば、今みているウェブページでどのくらいの画像が読み込まれているのかを調べる方法です。フロントエンドの表示にこだわる方は、ぜひぜひ試してみましょう!

Google Chromeのダウンロード

2018-01-25-chrome-network04.jpg

Chromeを利用していない方は、まずはダウンロードしましょう。

Google Chromeのデベロッパーツールを起動する

起動方法は3種類あります。

  1. ブラウザメニュー(ツールバー)から、「表示」>「開発 / 管理」>「デベロッパーツール」
  2. F12キー(Windowsのみ?)
  3. 右クリックから、「検証」

自分は右クリックから「検証」が多いです(Mac)。Windowsの時は問答無用でF12キーでした。

Networkパネルを開く

2018-01-25-chrome-network01.jpg

まずは上部にある「Network」をクリックします。他にも以下のパネルが存在します。

  1. Elements
  2. Console
  3. Sources
  4. Network(今回はこれ)
  5. Performance
  6. Memory
  7. Application
  8. Security
  9. Audits

パネルをひらいたら、ブラウザをスーパーリフレッシュします。WindowsであればCtrl+F5、MacであればComnd+Shift+Rです。ブラウザ上部のリロードボタンを長押しして、「キャッシュの消去とハード読み込み」をしても同じです。

Networkパネルで img 要素だけを調べる

2018-01-25-chrome-network02.jpg

次に、Networkパネルタブの下にある「img」をクリックします。そうすると、画像要素のみが項目として一覧になります。「All」がデフォルトになっていて、すべての要素が読み込まれた状態です。

下部にトータルのリクエスト数やダウンロード容量などが表示されています。それぞれ見ていきます。

  • 30 / 57 requests リクエスト数です。全57リクエストあり、そのうちの30が画像のリクエスト。
  • 483 KB / 4.2 MB transferred 転送量です。4.2MBのうち、483KBが画像の転送量。
  • Finish: 2.56 s ページが表示されるまでの時間です。
  • DOMContentLoaded: 806 ms HTMLの読み込みと解析が終わるまでの時間です。
  • Load: 2.17 s ページの読み込みが終わるまでの時間です。

Networkパネルの詳しい説明は、こちらがとても参考になります。

キャッシュされているかどうかは、リロードするとわかる

2018-01-25-chrome-network03.jpg

Sizeの列が以下になっているものは、それぞれブラウザやPCにキャッシュされています。

  • from disk cache
  • from memory cache

キャッシュが効いているので、リクエスト数も転送量も減っていることがわかります。表示も速くなっていますね。

最後に

いかがでしたでしょうか?Chromeブラウザは、閲覧も高速で、開発者にもよく使われているブラウザです。今回のように表示しているページのことを調べるにはとても便利なブラウザです。ぜひぜひ試してみましょう。

また、今回はこのブログのトップページを計測しました。このブログは、JPG最適化ツールのLightFileが導入されているので、サムネイルのサイズなどもかなり軽くなっています。ページ表示速度が気になる方は、画像の最適化も取り組みましょう。

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

まだまだ雪も残っていますし、路面が凍結しているところもあります。転ばないように、歩きスマホとかしないようにしましょう!では!

前へ

Ranklet活用ブログ(5):Rankletのサムネイル画像の最適化

次へ

PC向けとスマホ向けでこんなにファイルサイズがかわる?!トップページのスライダー画像を調べてみた