WordPress .htaccessでCache-Controlヘッダーによるブラウザキャッシュの設定方法

キャッシュ時間を任意の時間で設定する

レンタルサーバーのブラウザキャッシュ機能では有効期限の期間設定が行えない場合があります。今回は.htaccessにて有効期限や各種拡張子ごとに設定を変更します

Google Developers サイト 効率的なキャッシュ ポリシーを使用して静的アセットを提供する

有効期限の時間指定の例

画像は同一ファイル名で更新しない場合(差し替え時はファイル名を変更)

# 画像ファイルを1年間ブラウザにキャッシュさせる
<FilesMatch "\.(jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>

キャッシュさせたくない場合

<FilesMatch "\.(css|js)$">
Header set Cache-Control no-cache
Header set Pragma no-cache
</FilesMatch>

任意のタイミングでキャッシュを削除できるようにしておく

上記ページ内の修正でcss,javascriptファイルのパラメーターに日付を付けてキャッシュを簡単に更新できるようにしておくと便利です。

キャッシュクリアをパラメーターで設定できる環境の場合

# 画像ファイルを1年間ブラウザにキャッシュさせる
<FilesMatch "\.(jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>
# css,javascriptファイルを1週間ブラウザにキャッシュさせる
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>