.htacessでキャッシュを適用させる方法
以前書いた「スマホサイト作成の時に有効な「ページの軽量化」３つ！」ですが、今回は僕が実際に行った、.htacessを使ったキャッシュの適用方法を紹介したいと思います。
この方法を行えば
「PageSpeed Insights」での表示速度も改善されますし、
体感としても、表示速度はだいぶ早くなったように感じます。
ただ、.htacess等の知識が浅いと、
大きな失敗にも繋がる可能性があるので、
必ずバックアップを取りながら実践して下さいね。
今回は基本的な用語解説やFTPソフトの基本的な使い方は
すべてすっ飛ばしているので、各自で調べて実践して下さい。
.htacessのコードはこちら
まずは、僕がこのブログで適用している.htacessのコードは以下の通り。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
ExpiresDefault “access plus 1 days”
</IfModule>
このコードを.htacessファイルに貼り付けて、
後はFTPでアップロードすれば、キャッシュ適用は完了です。
.htacessファイルのコード内容を簡単に解説
コードの解説を簡単に説明（引用）すると、
mod_expires
「mod_expires」は、キャッシュ（cache）を設定することで同じファイルを何度も読み込む必要がなくなることで、画面表示を高速化するための仕組みを提供する Apacheのモジュールです。
引用元：SEO対策！.htaccessのmod_expiresでブラウザキャッシュで高速化
（「有限会社 エス技研」様より）
ExpiresActiveとExpiresByType
ExpiresActiveは、ファイルの期限切れ期間を設定する機能（キャッシュ機能）をオンオフするための記述です。
（中略）
ExpiresByTypeディレクティブは、何のデータをキャッシュさせたいかMIMEタイプによって設定するための記述で、特に効果的な記述例を下記に示します。
引用元：ExpiresActiveとExpiresByTypeの設定
（「電気設備の知識と技術」様より）
ExpiresDefault
「ExpiresDefault」は全てのファイルを対象にします。
引用元：「ExpiresDefault」と「ExpiresByType」の違い
（「OXY NOTES」様より）
access plus XX
キャッシュの適用期間を表します。
XX部分に、数字と日付を入力すれば、
「XX期間ごとにキャッシュをリフレッシュします」という指示になります。
僕は「days」と「weeks」しか使っていませんが、
使える単位は以下の通り。
・years
・months
・weeks
・days
・hours
・minutes
・seconds
ちなみに以前までは単位を「seconds」で統一する流れがあったらしいのですが、最近は「1days」を「86400 seconds」と表記しても特に問題ありません。
むしろ運営側としてはそっちの方が楽なので、
ぜひ「days」や「weeks」などで管理しましょう。
googleが推奨するキャッシュ設定は？
googleが推奨するキャッシュの設定方法は以下の通り。
静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティリソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:
Expires を 1 週間以上、できれば最大で 1 年間先に設定します。
（中略）
リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもかまいません。ただし、すぐに変更される可能性があるものの、変更時期がわからない場合は、長い有効期間を設定して、URL フィンガープリント（後述）を使用してください。
引用元：ブラウザのキャッシュを活用する
（「PageSpeed Insights」様より）
要は「基本は１週間に設定して下さい」らしいです。
ただ僕の場合、ブログの記事更新やCSSは頻繁に編集を行うので、
「text/css」キャッシュの設定は１日単位に更新される様に設定しています。
逆に、画像などはそんなに追加しないので、
googleが推奨する１週間で設定をしています。
この辺はさじ加減ですし「PageSpeed Insights」でも
推奨のキャッシュ設定が表示されるので、参考にしつつ設定されて下さい。
wordpressで.htacessを手動編集できない場合
wordpressで.htacessを手動で編集しても、
プラグインの設定やテーマの更新のたびに、.htacessが元に戻されてしまう。
そんな場合は、.htacessの書き場所が違うのが主な原因です。
間違いないのは、.htacessファイルの
「# END WordPress」より下の部分に書き足すようにしましょう。
このコードより上の部分は、
wordpress側で管理する部分になるので、手動で編集しても元に戻されてしまいます。
手動で.htacessを編集する時は、
コードの一番下に追記しておけば大体間違いありません。
.htacessでキャッシュ設定は面倒だけど効果は抜群！
今回は.htacessを使ったキャッシュ設定の方法の解説でした。
スマホページの軽量化に非常に効果的なのでおすすめです。
正直、僕もこれまでは「面倒なこと」として
先送りをしていましたが、やって良かったです。
特にトップページ（https://afi-blog.net）の表示速度が改善されたのは大きいです。
キャッシュ設定は、ペラサイトの量産では面倒かもしれませんが、
１サイト１サイトを大切に運営していく、
コンテンツ型のサイト運営では絶対にやった方が良いです。
面倒に感じるかもしれませんが、
やったらやっただけのメリットはあります。
ぜひチャレンジしてみて下さいね！
■追伸■
実はメルマガもやっています。
メルマガでは、ブログよりも濃い話をしているので、
あなたが本気でアフィリエイトで稼ぎたいのなら、
絶対に今すぐ登録することをおすすめします。
いつでもすぐに解除することができるので、
今すぐ登録して下さいね！
