mezzanine PageSpeed Insights の得点をdjango-compress を使って少し上げる
続きです。

django-comporessのドキュメント読んでいて、
これはやっておいたほうがいいのかなと思われる設定があったのでやってみました。

参考サイト


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サーバ側の設定変更で自サイトのjscssリクエストされた場合、
既に圧縮済のgzファイルを返すようにしてあげれば、圧縮によるCPU負荷を軽減することができます。

django-compress1つにまとまったファイルをgzip圧縮できないか調べたら、
django.conf.settings.COMPRESS_STORAGE設定変更で実現できそうだったので、
実行してみました。

gz作った後、HTTPサーバー側の設定変更も必要ですが、
こちら参考に設定しました。

初期設定

デフォルトだと、compressor.storage.CompressorFileStorage使われ、
javascriptcss複数ファイル存在する場合、
1つのファイルにまとめてくれます。
このフィルター定義を、compressor.storage.GzipCompressorFileStorage変更することで、
1つにまとまったjavascriptcss ファイルに、
元のファイルは残したまま、更に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
------------------

javascriptcss まとめられたファイルと同じ階層にgzファイルが出力されています。

CACHEが残っていて、gzファイルが生成されなかったので、CACHEを削除

HTTPサーバを再起動しても、gzファイルが生成されなかったので、
CACHEクリア方法を調べたところ、issueして上がっていました。

CACHE ディレクトリ配下の全削除と、

rm -Rf CACHE/*

HTTPサーバの再起動で、gzファイルが生成されました。

以上です。

コメント