【WordPress】.htaccessでキャッシュの管理と圧縮設定をする

1 キャッシュの設定とgzip圧縮の設定
- 1.1 注意点
2 設定は簡単「.htaccess」に追記するだけ

キャッシュの設定とgzip圧縮の設定

現在はcPanelで設定できるサーバー側の圧縮設定と、プラグイン「LiteSpeed Cache」を使用していますが、サーバー移転前まではこの方法でキャッシュと圧縮の設定をしていました。

以前使用していた無料テーマ「Luxeritas」に付属していたサンプルと同じもので、開発者様のブログで各項目の説明等が詳しく書かれています。

参考 .htaccess の見直しでWebページ高速化Thought is free

注意点

注意

Apacheの「mod_deflate」というモジュールを使用するので、Apacheウェブサーバー（完全互換のLiteSpeedウェブサーバーも可）でしか使えません。

mod_deflate はサーバー側で各コンテンツを自動で圧縮してくれるモジュールです。アクセスがある度にサーバーで gzip圧縮を行います。
サーバの負荷が高くなるため、サーバーによっては（Apacheであっても）このモジュールを提供していない場合もありますのでご注意ください。

以前使っていたサーバーでは、この方法でgzip圧縮を行うと、PageSpeed Insightsで「サーバーの応答時間を短縮する」が毎回出ていました。
サーバーの負荷を軽減する対策としては、事前に自分で .gzファイルを用意し、「mod_deflate」ではなく「mod_rewrite」を使用するなどの方法もあります。

設定は簡単「.htaccess」に追記するだけ

テキストエディタやサーバーのファイルマネージャーなどで、ドメイン直下にある「.htaccess」ファイルに以下を追記します。

.htaccess

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化（1秒に設定）
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/js "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>