mezzanine PageSpeed Insights の得点をdjango-compress を使って少し上げる
の続きです。
django-comporessのドキュメントを読んでいて、
これはやっておいたほうがいいのかなと思われる設定があったのでやってみました。
参考サイト
- Settings — Django Compressor 2.1 documentation
- Apacheサーバのgzip圧縮最適化: 3. 事前圧縮による最適化 - huguma’s blog (仮)
- A way to flush the template cache / remove old files · Issue #158 · django-compressor/django-compressor
django.conf.settings.COMPRESS_CSS_FILTERS の追加
初期設定
デフォルトのFilter として、compressor.filters.css_default.CssAbsoluteFilterが使われます。
こちらは、css内のurlの置換をしてくれますが、css自体の圧縮はしてくれません。
css 自体の圧縮を行うFilter の提供されており、それをON にすることで、css の圧縮をしてくれます。
Filter によっては、追加でインストールが必要だったりするので、
特に追加設定のいらないcompressor.filters.cssmin.rCSSMinFilter を追加しました。
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter','compressor.filters.cssmin.rCSSMinFilter']
Filter定義追加後の動作
上記Filterを定義をすると、以下の変換前のcssがあるとすると、
.codehilite .cm { color: #177500 } /* Comment.Multiline */
.codehilite .cp { color: #633820 } /* Comment.Preproc */
.codehilite .c1 { color: #177500 } /* Comment.Single */
.codehilite .cs { color: #177500 } /* Comment.Special */
コメント部と改行、スペースが削除されます。
.codehilite .cm{color:#177500}.codehilite .cp{color:#633820}.codehilite .c1{color:#177500}.codehilite .cs{color:#177500}
compressor.filters.cssmin.rCSSMinFilter を追加しないとこれをやってくれません。
ちなみに、javascript はデフォルトのFilter として、
compressor.filters.jsmin.JSMinFilter が使われているため、特に設定変更は行いませんでした。
javascriptだけ初期設定で圧縮ON なのは何故か?
javascriptだけ圧縮もするのはinlineで記述されることが多いからなのかもしれません。
css は基本は圧縮したものを使ってくださいね。ということなのかと思います。
圧縮の際に、筐体に負荷かかるわけですし、、
個人的に事前圧縮が面倒だったので、かけてしまえということで、設定変更しました。
django.conf.settings.COMPRESS_STORAGE の変更
事前圧縮したgzipを置いておく
HTTPサーバ側で、リクエストのたびにgzip圧縮をすると、CPU負荷がかかります。
HTTPサーバ側の設定変更で自サイトのjs、cssにリクエストされた場合、
既に圧縮済のgzファイルを返すようにしてあげれば、圧縮によるCPU負荷を軽減することができます。
django-compress で1つにまとまったファイルをgzip に圧縮できないか調べたら、
django.conf.settings.COMPRESS_STORAGE の設定変更で実現できそうだったので、
実行してみました。
gzを作った後、HTTPサーバー側の設定変更も必要ですが、
こちらを参考に設定しました。
初期設定
デフォルトだと、compressor.storage.CompressorFileStorage が使われ、
javascript、css が複数ファイル存在する場合、
1つのファイルにまとめてくれます。
このフィルター定義を、compressor.storage.GzipCompressorFileStorage に変更することで、
1つにまとまったjavascript、css ファイルに、
元のファイルは残したまま、更にgzip圧縮をかけてくれます。
COMPRESS_STORAGE = 'compressor.storage.GzipCompressorFileStorage'
仮に、django.conf.settings.COMPRESS_OUTPUT_DIR の設定がデフォルトの場合、
圧縮ファイルは以下のように出力されます。
ls -R CACHE
------------------
CACHE:
css js
CACHE/css:
86cc10229e48.css 86cc10229e48.css.gz
CACHE/js:
4462284b3590.js 4462284b3590.js.gz
------------------
javascript、css まとめられたファイルと同じ階層にgzファイルが出力されています。
CACHEが残っていて、gzファイルが生成されなかったので、CACHEを削除
HTTPサーバを再起動しても、gzファイルが生成されなかったので、
CACHEのクリア方法を調べたところ、issue として上がっていました。
CACHE ディレクトリ配下の全削除と、
rm -Rf CACHE/*
HTTPサーバの再起動で、gzファイルが生成されました。
以上です。
コメント