CPIのシェアードプランのgzipではまった件

近頃は、サイトの速度向上化が求められるようになりました。Googleがサイトの表示速度をランキング要素に入れたことや、回線の細いスマホでのアクセスが多くなったことなどが原因でしょう。

ただ、当のGoogleが、ページスピードに関する非常に良いページを作ってくれているので助かっています。

PageSpeed Insights

developers.google.com

最近、クライアントからこの点をつっこまれてしまうケースがあり、上記ツールで良い点を取れるような施策を行いました。
その中で、gzipに関してちょっとはまったのでメモ。

そもそも、サーバーがdeflateに対応していなかったので

高速化関連では有名な、
ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
を読み返してみると、サーバー側で圧縮処理してもらえば楽ということを思い出しました。

んで、.htaccessに、以下を記述。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
</IfModule>

しかし、何も変わらず。
IfModuleのところを外してみても、Internal Server Errorが発生orz
つまり、deflateに対応していなかったのです（ちなみに、CPIのシェアードプラン）。

レンタルサーバーでは、負荷を避けるためにそういった設定もやむなしかもしれません。
……と思ったら、CPIシェアードプランは2015年9月にサービス改定のメールが来たのですが、Apache1.3系だった模様。
だからdeflateに未対応だったのですね。。

自分でやってみる

しかたがないので、自分で圧縮ファイルを作りました。
その方法は長くなるので別で書けたらと思いますが、とにかく圧縮ファイルを作ってサーバーにアップ。

圧縮ファイルは、CSSならfilename.css.gz、JavaScriptならfilename.js.gzとしました。

そして、拡張子.cssと.jsの場合は、圧縮ファイルを読み込むようにmod_rewriteを設定。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(css|js)$"
#RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
</IfModule>

ただし、これだと圧縮画像がCSSやJavaScriptと認識してくれなかったので、ForceTypeも指定を追加。

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

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

最終版

てなわけで、下記が最終版です。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(css|js)$"
#RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]

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

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

</IfModule>

おまけ: gzipがキャッシュされなくなった

……というおまけが付いてしまったので、gzもキャッシュされるように設定しておきました。これが一番の解決策かは分かりませんが、とりあえずこちらでキャッシュしてくれました。下記は、一ヶ月キャッシュします。

<FilesMatch "\.(jpg|gif|png|css|js|gz)$">
	ExpiresActive On
	ExpiresDefault "access plus 1 month"
</FilesMatch>