かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Wordpress gzip化したcss, jsが404で読み込まれない

Wordpressで構築したサイトで読み込ませているCSSとJSがstyle.min.cssmain.min.jsだたっとします。
少しでも表示を高速化するためにgzip化したstyle.min.css.qz, main.min.js.gzを読みこませようとした場合、
.htaccessに下記のような記述をします。

RewriteEngine On   "# 書き換えエンジンを有効に"
RewriteCond %{HTTP:Accept-Encoding} gzip  "# gzipが許容されていれば"
RewriteCond %{REQUEST_FILENAME} !\.gz$  "# 拡張子が「.gz」でなければ次へ"
RewriteCond %{REQUEST_FILENAME}\.gz -s  "# 元のファイルの末尾に「.gz」を付与したファイルが存在すれば次へ"
RewriteCond %{REQUEST_FILENAME} \.js$ [OR]  "# JavaScript ファイルまたは"
RewriteCond %{REQUEST_FILENAME} \.css$  "# CSS ファイルの場合"
RewriteRule .+ %{REQUEST_URI}.gz  "# URIの末尾に「.gz」を付与"
 
<FilesMatch "\.js\.gz$">  "# FileMatchでファイル毎に MIME-TYPE と gz エンコードを指定"
    ForceType application/x-javascript
    AddEncoding x-gzip .gz  
</FilesMatch>
 
<FilesMatch "\.css\.gz$">
    ForceType text/css
    AddEncoding x-gzip .gz
</FilesMatch>

参考: ページの表示速度を改善する方法 | Web Design Leaves

これで問題なくcss.gzとjs.gzが読み込まれるはずなのですが、
cssとjsのStatus Codeが404 Not Foundとなってしまい読み込めませんでした。Content-Typeがtext/htmlとなっていてcss, jsと認識されていないようです。

Wordpressパーマリンク設定を変更した際にWordpress.htaccessに書き加えた処理が原因でした。どううやら、Wordpressが追加した処理より先にgzipを読み込ませる設定を記述しているとWordpressの処理に書き換えられてるっぽい!?

# 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

# gzipを読み込む処理をwordpressの処理の下に移動
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteCond %{REQUEST_FILENAME} \.js$ [OR]
RewriteCond %{REQUEST_FILENAME} \.css$
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch "\.css\.gz$">
  ForceType   text/css
  AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.js\.gz$">
  ForceType   application/x-javascript
  AddEncoding x-gzip .gz
</FilesMatch>

いったんはWordpressが追加した処理より下に上の記述を移動させることで解決しましたが、.htaccess の構文とかよく解ってないので、もしかしたら、このままだと別の問題が発生するかもしれません。。。