Wordpressで構築したサイトで読み込ませているCSSとJSがstyle.min.css
とmain.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 の構文とかよく解ってないので、もしかしたら、このままだと別の問題が発生するかもしれません。。。