WordPressにhtaccessキャッシュをプラグインなしで設定
WordPressやWebサイトでは、キャッシュを使用するとサイトの表示速度が高速になります。
何度もサイトやブログを訪れるときにキャッシュが無ければ毎回ページを読み込まなければなりません。低速な通信環境では、中々ページが表示されずにイライラしてしまうと思います。
何よりも、サイトにアクセスしてくれる方に気持ち良く観覧して貰うためにもキャッシュは必須です。
以下は、キャッシュを使用しなかった場合のGoogleのPageSpeed Insightsです。
点数はモバイルが60点でパソコンが70点で修正が必要です。
次にキャッシュを設定しました。
モバイルは68点まで上がり、パソコンは81点まで上昇しました。
表示速度が良くなりましま。
WordPressでは、プラグインを使う方法もありますが、エラーも起こることもあります。そのため、基本的な.htaccessを使用しています。
このページでは、ブラウザ圧縮とHTTP圧縮を紹介します。
ブラウザキャッシュ
ブラウザキャッシュを設定すると、次のアクセスからキャッシュが利用できます。そのため、サイトやブログのページを素早く表示できます。
.htaccessにブラウザキャッシュを設定すると、サーバー側で有効期限が指定されます。
そのため、有効期限の間はキャッシュが利用されます。
以下のコードを.htaccessに記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access 1 weeks" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/font-woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-eot "access plus 1 year" </IfModule> |
上記では、cssの有効期限が1週間に、画像、Javascriptの有効期限が1ヶ月、フォントの有効期限を1年に指定しました。
これで、基本的なブラウザキャッシュが設定されます。
HTTP圧縮
次にHTTP圧縮を利用します。HTMLファイルなどは、GZIP圧縮でデータ量を大幅に削減できます。サーバーのHTTP圧縮機能を設定すると、HTMLファイルなどを自動的に圧縮して高速化が可能です。
以下のコードを.htaccessに追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE image/svg+xml </IfModule> |
基本的にhtml、css、Javascript、SVGなどがHTTP圧縮できます。
なお、HTTP圧縮はアクセスの度に圧縮処理が行われるため、サーバーに負担が掛かります。
そのため、利用できる場合と不可の場合があるため、レンタルサーバーで確認が必要です。
無料サーバーは使用できないと思います。
まとめ
ブラウザキャッシュとHTTP圧縮を利用すると、見違える程にサイトが素早く表示されます。
サイトやブログの運営においてキャッシュは、必ず設定しておきたいです。
なお、他にもフォントなどキャッシュできる種類もありますが、あまりに過度に設定しても仕方ないです。
WEB制作会社などでは基本的にブラウザキャッシュとHTTP圧縮を利用していました。
また、ブラウザキャッシュがあるとcssを変更した場合に変更した表示部分が確認できません。
GoogleChromeはブラウザをリロードしても変わりません。しかし、Firefoxはブラウザをリロードすれば、cssが変わるため制作作業に良いです。
ブラウザキャッシュとHTTP圧縮を利用して、サイトやブログを高速化させましょう。