キャッシュを無効にしてページ表示速度を計測する方法

時間
最近の私はページ表示速度のチューニングが趣味である。
どうすればもっと表示速度を早くできるか? を、

  • メシを食っているとき
  • 車の運転をしているとき
  • ジムでトレーニングをしているとき
  • 布団に入って寝るとき

など、常に考えている。
寝る直前に考えていた影響で、夢の中でそのチューニング作業をしていたことさえある。
(起きてPCに向かったら、その作業がまったく完了していなくてガッカリした)

ここまで熱心に取り組むヤツもそういないため、このサイトの表示の速さは他社の追随を許さないレベルに仕上がっていると自負しています。

表示速度を早める作業をするには、現在どのぐらいの速度でページが表示されるかを正しく計測する必要があります。
その時、キャッシュが有効な状態での表示速度を計測してもあまり意味がありません。

というわけで、このページではキャッシュの仕組みや、キャッシュを無効にしてページ表示速度を計測する方法を解説します。

なぜキャッシュが無効の状態での表示速度が重要なのか?


このサイトのトップページにも書いてあるように、ブラウザは一度閲覧したページのデータを「キャッシュ」と呼ばれる形で保存します。

そして、次回からの閲覧の際はそのキャッシュを使用してページを表示させるため、キャッシュがある分のデータはダウンロードが省略され、本来よりも短時間でページを表示することが可能になります。

しかし、初めて閲覧する人はそのページのキャッシュを事前に保存していないので、キャッシュのない本来の表示速度が問われることになります。

つまり、最初の1ページ目の表示が最も時間がかかり、そして重要なのです。
最初の1ページ目の表示に時間がかかれば、あなたのサイトは1ページも見てもらうことすらできずに見込み客を逃すことになってしまうのです。

モバイルからのアクセスでは「ページが完全に表示されるまでに3秒以上かかると、53%の人はページを離れる」というGoogleの2017年の調査結果もあるなど、表示速度というのはWebサイトを人に見てもらうためのとても重要な要素なのです。

見てみようかな、と思ってアクセスしたサイトの表示が遅いとき、

  1. 検索結果ページに戻る。
  2. 別のサイトをクリックする。

と、たった2クリックするだけで、簡単に競合他社のサイトに移動できてしまうのがインターネットなのです。

履歴とキャッシュの違い

ブラウザには「履歴」というデータがあります。
「履歴」と「キャッシュ」は違うものです。

ブラウザの履歴とは、「それまでに閲覧したURL」のことを意味します。
キャッシュとは、「それまでに閲覧したページを表示させるためのデータ」を意味しています。
それは画像データであったり、CSSファイルやJavaScriptファイルだったりします。

例えば、今ご覧になっているこのサイトの以下の部分はすべてのページで共通しています。(トップページ以外)
ページ共通部分
このような共通した部分の画像データは、別のページに移動した際にはキャッシュのデータを使って表示させれば済むので、わざわざサーバーからダウンロードする必要がなくなるのです。

それと同様に、CSSやJavaScriptもページごとに共通したファイルを使用していれば、そのファイルのダウンロードは省略されます。

現在のPCやスマホの性能はWebページを画面に表示させるには充分過ぎるほどの性能があるので、表示速度の最大のネックになるのは通信(ダウンロード)の「量」や「速度」と思われます。

キャッシュがあればダウンロードの「量」を減らせるため、表示速度はかなり短縮されることになります。

キャッシュを無効にしてページ表示速度を計測する方法

キャッシュを無効にしてページの表示速度を計測するには、まずPCのブラウザでシークレットウインドウを開きます。(以下からの画像はChromeでの表示です)
シークレットモード
ブラウザによっては「シークレットタブ」や「プライベートウインドウ」のような名称かもしれません。

そう、それはキン肉マンの兄貴のことを「キン肉アタル」と呼ぶのか、それとも「キン肉マンソルジャー」と呼ぶのかの違いと同じです。(呼び方が違うだけという意味)

キン肉アタル – Wikipedia

厳密に言えば、シークレットウインドウにするのはキャッシュを無効にするためというよりも、ブラウザの拡張機能(アドオン)の動作によって正確な表示速度が計測できなくなるのを防ぐため、拡張機能を無効にするのが目的です。

次に、何もない部分で右クリックメニューを表示させ、「検証」を選択します。(Firefoxの場合は「要素を調査」)
検証

ウインドウの下半分ぐらいに「デベロッパーツール」のウインドウが表示されます。(Firefoxの場合は「開発ツール」と呼びます)
デベロッパーツール

その中で「Network」タブを開き、その中にある「Disable cache」のチェックボックスにチェックを入れます。
Disable cache

この状態で何らかのページを表示させると、ページ表示にかかった時間が以下の部分に表示されます。(sは「秒」、msは「ミリ秒」)
ページ読み込み時間
上記画像では3つの速度が表示されていますが、この中で重要なのは青文字のDOMContentLoadedと赤文字のLoadの時間です。

このLoadの時間が3秒を超えているようなら遅いと言えるでしょう。

再読み込みのボタンを長押しすることでキャッシュを無効にする方法

Chromeのデベロッパーツールを開いた状態で再読み込みのボタンを長押しすると、以下のように「キャッシュの消去とハード再読み込み」という選択肢が出て、これを選択すればキャッシュを無効にした状態での再読み込みができます。
キャッシュの消去とハード再読み込み
しかし、上記の「Disable cache」のチェックボックスにチェックを入れていれば、普通に再読み込みボタンを押すだけでも常にキャッシュは無効になるので、毎回長押しをする手間を省くことができます。

キャッシュがある状態での読み込み時の表示

キャッシュがある状態でページを読み込んだとき、デベロッパーツールの表示はどのように変わるかを紹介しておきます。

Disable cache」のチェックボックスのチェックを外し、ページの再読み込みのボタンを押すと、以下のように「Size」の欄に「memory cache」や「disc cache」と表示され、「Waterfall」の欄にゲージが存在しなくなります。
メモリやディスクからのキャッシュ
つまり上記の部分のデータはPCのメモリや記憶媒体(ハードディスクやSSD)にあるキャッシュから表示させたため、ダウンロードしなかったことを示しています。

提供サポートなど