WordPressならブラウザキャッシュを設定してページ表示速度を高速化する方法

みなさん、学校のテストはいつも何点取っていましたか？
私はいつも100点……！と言いたいところですが、いつも80点取るのがやっと。
学校の勉強は苦手でした。
ですが、WordPressでは表示速度スコアというのは非常に大事！なるべくならこの点数を改善していきましょう！

さて、今回はページ表示速度高速化 第二弾！
ブラウザキャッシュを組み込む方法です。

第一弾はこちら
Gzip圧縮による設定です。やってない方はこちらも効果が高いのでやってみてくださいね。

ページ表示速度の高速化をしてSEO対策！Gzip圧縮の設定

この設定することで、読み込みスピードが改善され、ユーザーに優しい作りになりますよ。
カンタンなのでぜひやってみましょう！

キャッシュとは

キャッシュとはお金のこと……ですが、ここで言うキャッシュはページの再読み込みを防ぐ、表示高速化の仕組みのことです。
キャッシュを設定していない場合、ページのデータを読み込まれる度に作るようになってしまい、動作が遅くなります。

しかし、キャッシュを設定しておけば、一度読み込んだ時に作っておいたデータを残しておけるので、まったく同じデータを要求された時、すでに作ってあるデータを提供でき、表示速度の改善が期待できます。

キャッシュの種類について

一口にキャッシュと言っても、実はいろいろなキャッシュがあります。
先程の画像ではサーバーがキャッシュデータを渡していましたが、これはページキャッシュと言います。

ブラウザキャッシュ

Safari、Google Chromeなどインターネットを閲覧するブラウザのキャッシュデータ。ブラウザキャッシュがあれば、もう一度同じページを開く時の時間が短くなる。

ページキャッシュ

サーバー側で保持しているキャッシュデータ。設定した期間キャッシュデータを保持し、キャッシュしておくことで生成の時間がなくなる。

データベースキャッシュ

データベースの返答結果のキャッシュデータ。一般的には記事情報を保持することが可能。

オブジェクトキャッシュ

PHPなどのプログラミング言語に使う変数のキャッシュデータ。キャッシュしておくとプログラムの工数が少なくなる。

今回設定するのは1のブラウザキャッシュです。

ブラウザキャッシュを設定しよう

ブラウザキャッシュは何も設定しないままでは有効になりません。
しかし、コピペするだけでカンタンに設定できるので、ぜひやってみましょう！

.htaccessの設定

ブラウザキャッシュはサーバー側で設定をするので、.htaccessファイルにて設定を行います。
ウェブサイトの肝となるファイルなので、編集の際はバックアップを取り、十分に気をつけながら設定するようにしてください。
編集作業は自己責任でお願いします。

エックスサーバーのFTPの設定方法が分からない方はこちらをチェックしてみましょう。

FTPソフトの設定について

まず、FTPソフトで.htaccessを探しましょう。
[サイト名フォルダ] → [public_html]にあります。

この.htaccessをダウンロードし、下記のコードをファイルの一番下にコピペしましょう！
※不安なら書き込む前の.htaccessをバックアップしておきましょう。

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
#フォントのcontent-typeの追加
# ブラウザキャッシュ
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 days"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>
# ブラウザキャッシュ
# フォントキャッシュ
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#フォントキャッシュ

コピペでOKです。

このコードでは、ブラウザキャッシュだけでなく、フォントもキャッシュしています。

ブラウザの保持期間を自分で設定したい人は…
daysは日、weeksは週、yearは年の単位でキャッシュを保持する期間を設定します。
あまりに短いとpagespeedで警告が出ますので、少し長めにします。
長すぎても新しいデータがキャッシュされなくなってしまうので、大体1週間くらいが良いかと思います。

ちなみに text/javascript の一文は昔のブラウザにも対応するために記述しています。
コードを書き込んだら保存して、.htaccessをサーバにアップロードしましょう！

サイト表示速度のスコアを確認

ここでサイト表示速度のスコアを確認できます。

Google PageSpeed

ぐにらぼはキャッシュをしたことによって……
3点アップ！

※サイトによって効果は違います

学校でのテストは80点でダメダメでしたが、Google PageSpeedスコアでは85点を目標にしてみましょう！

まとめ

こういう設定はコピペで簡単に設定できる上に効果が高いので、ぜひ取り組んでみてください。
生成動作が抑制されることでサーバの負荷も軽減でき、優しいサイト作りができます。

ちなみにこういう高速化設定は一気に取り組むよりも、一つずつ確実に改善を図っていきましょう。
なぜかというと、ミスをした時にどこが間違っていたのか分かりにくくなってしまうからです。
ではでは！