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

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

Google Chromeのダウンロード

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

• Google Chrome

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

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

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

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

Networkパネルを開く

まずは上部にある「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 要素だけを調べる

次に、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パネルの詳しい説明は、こちらがとても参考になります。

• リソース読み込み時間の測定 - CHROME DEVTOOLS

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

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

• from disk cache
• from memory cache

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

最後に

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

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

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

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

https://core.lightfile.net/

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