前回のサイトのパフォーマンス/表示速度を調査する方法で調査した結果を元にブログの表示速度を改善していこうと思います。

まずは簡単にできるところから、ということで画像などのファイルをブラウザにキャッシュさせることで不要なファイルの読み込みを無くして行きます。

キャッシュとは

ところでキャッシュとはなんぞや?という人も居るかもしれません。
知ってる方は読み飛ばしてください。

使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。

要するに、日頃見ているページというのは表示に必要なファイルをサーバーからダウンロードして表示しているわけですが、このダウンロード時間が長いと表示速度も遅くなるわけです。

であれば、再利用可能なファイル(画像やcss、jsファイルなど)を一度読み込んだ時に保存しておいて再利用しようというのがキャッシュの目的です。

キャッシュ設定で不要なファイルの読み込みを短縮

Pagespeed Insight曰く「ブラウザのキャッシュを活用する」とのことです。

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

Apacheにはmod_expiresというモジュールがあるのでこれを利用します。

Apacheサーバーにmod_expiresを設定する

キャッシュを有効にするにはサーバーの設定が必要です。
※お使いのレンタルサーバーがmod_expiresをサポートしているかは確認してください。

.htaccessファイルにキャッシュの有効期限を記述します。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

ちなみに2592000秒は1ヶ月、604800秒は1週間です。
1 weeks, 1 monthsという書き方も可能です。

確認

Google Chrome にはデベロッパーツールというのが入っていてこういった確認に便利です。
またキャッシュとかの確認にはシークレットウィンドウを使うと効率が良いです。

デベロッパーツール

まずはデベロッパーツールで初回読み込みと二回目の読み込みの違いを確認します。
デベロッパーツールでは読み込みに掛かった時間も計測することができるのでついでに見ていきます。

下のloadを見ていると時間が7.68秒でした。遅いですね。
画像rp01.jpgのstatusは「200 OK」です。
これはダウンロードが正常に完了したというコードです。
cache check before

続いてHTTPレスポンスを確認します。
画像rp01.jpgをクリックするとHTTPの詳細を見ることができます。
cache-controlがさきほど指定した2592000になっていてexpiresは一ヶ月後に指定されています。
cache check response before

最後にページをリロードしてステータスをチェックします。
load時間は6.00秒、おぉ、少し改善しました!

statusは「304 Not Modified」ですね。
ちゃんとキャッシュが効いてる証拠です。
cache check after

最後にPagespeed InsightとGTMetrixでチェックします。

Pagespeed Insight

キャッシュの項目が修正対象から外れていますね!
cache pagespeed insight mobil

cache pagespeed insight PC

GTMetrix

こちらもキャッシュの項目が改善されているのが分かります。
cache GTMetrix after

まとめ

mod_expiresでキャッシュすることによって余計な通信パケットを無くすことができます。
ただし、サーバーの負荷状況によって遅くなることもあるので、あまり速度が変わらなくても気にしすぎないでくださいね。

いつもシェアありがとうございます!気に入ったらシェアしていただけたら幸いです。