【サイト表示高速化】.htaccessでブラウザのキャッシュを有効化する

making-cache-by-htaccess

前回の記事に続いて、サイトの表示速度を改善しています。

今回は.htaccessブラウザのキャッシュを有効化する方法です。

PageSpeed-insight

.htaccessの編集

FTPソフトで.htaccessをダウンロードして、ローカルで編集しましょう。下記の記述を追加して、キャッシュさせるファイルの拡張子とキャッシュの期間を指定します。

ExpiresActive On
ExpiresByType text/css "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"

 「CSSはしょっちゅう変更するよー」って方は、CSSの行を下記の記述にすると、一日分しかキャッシュされなくなるのでオススメです。

ExpiresByType text/css "access plus 1 days"

前々回からのhtaccessの編集を踏まえると、以下のようになりました。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# 2014-12-14、HTTP転送圧縮のために下記を追加
<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
 
 # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 
 # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
 
 # htmlやcssなどは圧縮
 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 application/x-javascript
 AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

# キャッシュ設定

ExpiresActive On
ExpiresByType text/css "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"

もし、

  • WordPressユーザー
  • さくらのレンタルサーバーを使っている
  • 独自のリダイレクト設定は行っていない
  • でもサイトの高速化は行いたい

って方には、もしかしたら参考になる部分もあるかもしれません。

.htaccessでブラウザのキャッシュを有効化した結果

after-set-htaccess

無事、「ブラウザのキャッシュを有効化する」がなくなり、「修正が必要」の警告がなくなりました。

その他の提案についても随時、さくらサーバースタンダードプランの環境が許す限りは最適化を進めていきたいと思います。