ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

ブラウザキャッシュを利用したブログ表示スピードの改善

先日、PageSpeed Insightsというツールを知りました。

PageSpeed Insightsとは、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるGoogle Developersのツールです。

早速、僕のブログも試してみたところ、速度がさんざんな結果になりました。

photo by DAVID MELCHOR DIAZ

スポンサーリンク
レクタングル(大)広告

PageSpeed Insightsでのテスト結果

モバイルのテスト結果、43点。

モバイルのテスト結果

パソコンのテスト結果、61点。

パソコンのテスト結果

「これはいけませんぞ!」と思いましたが、とりあえず、いきなり全ての問題を一度に解決するのは不可能なので、まずはパソコンの方から修正していくことにしました。

パソコンの修正提案の概要

PageSpeed Insightsでは、サイトの表示スピードが高速になるように修正箇所を提案してくれます。

当ブログが今回受けたデータ修正提案は以下。

パソコンの修正提案の概要

修正が必要なもの

  1. CSS、JS、画像などのブラウザのキャッシュを活用する
  2. CSSやJSファイルなどリソース圧縮を有効にする

とりあえず、一度に行うのは大変なので「1.ブラウザのキャッシュを活用する」から対策していくことにしました。2は、のちのちやっていきたいと思います。

修正を考慮したほうがいいもの

  1. スクロールせずに見えるコンテンツのレンダリングブロックJavaScript/CSSを排除する
  2. 画像を最適化する
  3. サーバーの応答時間を短縮する
  4. CSSを縮小する
  5. JavaScriptを縮小する
  6. HTMLを縮小する

これらもいずれ対策したいと思います。

ブラウザキャッシュを活用する方法

まずはブラウザキャッシュを利用する方法です。どうやら一般的な方法は「.htaccess」を設定する必要があるようです。

.htaccessとは以下のようなことができる設定ファイルです。

ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル。

具体的には、CGIやSSIなどを実行するための宣言(命令)や、拡張子ごとにファイルタイプを指定するMIMEタイプの設定、ユーザ認証、IPアドレスやドメイン単位でのアクセス制限などを書き込むことができる。

.htaccessとは – 意味/解説/説明/定義 : IT用語辞典

簡単に言うと、.htaccessというテキストファイルに書き込むだけで、サーバーを制御できてしまう強力な設定ファイルです。

一つ注意しないといけないのは、強力な設定ファイルのだけに、この設定を誤ると運営者が意図しない不具合を起こしてしまうので編集には最新の注意が必要です。とはいう僕も先日、設定をヘマして数時間サイト全体が表示されないという失敗をしています。

XSERVERで.htaccessの設定をヘマしブログ全体エラーで顔面蒼白になった経緯と解決方法

で、肝心のブラウザキャッシュを利用する方法なんですけど、設定自体は簡単です。

.htaccessファイルに下記を追加すればOKです。

以下を参考にさせていただきました。

参考 そろそろ本気で WordPress の高速化に取り組んでみる | WordPressに感謝だ!

僕の使用しているエックスサーバーだと.htaccessがある場所は、「/[あなたのドメイン]/public_html 」にあります。(詳しい人は好きな場所に新しく作ってもいいけど)

エックスサーバーでWordpressをドメイントップにインストールしている場合だと、.htaccessの編集後は次のようになります。

[サーバID]と[ドメイン]は、元から設定が書き込まれているので特にいじる必要ないと思います。(XSERVERの場合)

ブラウザキャッシュの設定では、キャッシュの有効期限を設定しています。

期限について詳しく言うと、CSSはは頻繁に変更をすることがあるので1日に設定。

他の、画像ファイル(gif、jpeg、png)とJavaScriptファイル(js)は、ブラウザキャッシュの有効期限を1週間に設定してあります。

ブラウザキャッシュ設定前のスピードテストの値

一応設定後、どのくらい効果があったか確認するために、キャッシュ設定前のスピードテスト結果を事前に記録しておきます。

PageSpeed Insights

PageSpeed Insights設定前の結果

リソースに、有効期限を設定しなさいといっぱい出ています。

ブラウザキャッシュを活用する設定前

GTmetrix

GTmetrix設定前

こちらも、ブラウザキャッシュのグレードはF(34)ランク。

GTmetrixブラウザキャッシュ設定前

Website speed test

Website Speed Test設定前

こちらもブラウザキャッシュのグレードは29と最も低い値。

Website Speed Testブラウザキャッシュ設定前

ブラウザキャッシュ設定後のスピードテストの値

さて、ブラウザキャッシュ設定後はどうなったでしょうか。

PageSpeed Insights

警告色の赤から注意色の黄色になり点数も、61→65になりました。

PageSpeed Insights設定

まだ、ブラウザキャッシュの活用しなさいと出ますが、詳細を見るとアクセス解析やら、Twitterやら、各種WEBツールのリソースなのでこれ以上はどうしょもないようです。

ブラウザキャッシュ設定後

GTmetrix

ページスピードグレードは、84%→85%に。YSlowグレードは、64%→65%になりました。

GTmetrix設定後

ブラウザキャッシュのグレードは、F(34)→C(71)に改善しました。

GTmetrixブラウザキャッシュ設定後

Website speed test

こちらもグレードが81→82になりました。

Website Speed Test設定後

ブラウザキャッシュのグレードは、29→66に大幅に改善しました。

Website Speed Testブラウザキャッシュ設定後

本来なら、ブラウザキャッシュのグレードも100近くに行きたいところですが、当ブログでは、以下のWEBサービスを利用しているので、これらのリソース(画像など)を使っている限り、これ以上は無理そうです。

  • Twitter
  • Facebook
  • はてなブックマーク
  • Google アナリティクス
  • AddThis
  • ヒートマップツール User Heat

まとめ

とりあえず今回は、ブラウザキャッシュの活用する設定について僕にできることはしました。

テスト結果を見る限り、多少なりとも効果はあったようなので、今回はこれで良しとします。

今回は、ブラウザキャッシュの設定のみしましたが、リソースの圧縮など改善提案が出ているところや、グレード評価の悪いところを、今後一つ一つ修正していきます。

一度に何個も修正を行うと、不具合が出たときに、どこが原因の特定か分りづらくなるし、ブログに書くのが面倒なので、時間ができたら一つ一つやっていきたいと思います。

今回利用したスピード計測サイトは以下です。