purifycssで不必要なCSSを探す

この前 CSSの読み込み負担を下げるの所でちょっとCSSの見直しをしましたが、別のPurifyCSSという別のツールを見つけたのでそれについて。

PurifyCSS

PurifyCSS

PurifyCSSは指定したCSSの中から特定のページの中で使っているものだけを抜き出してくれるツールです。

Node.jsでライブラリとして使うか、コマンドラインツールとして使う事が出来ます。

Node.jsで特定のプロジェクト内で使う場合には

$ npm install purify-css

コマンドラインで使うためにシステムにインストールするには

$ npm install -g purify-css

とします。

ただし、現在npmでパッケージインストール出来るバージョンがちょっと古くて ¹、 GitHubのレポジトリにある最新版を取ってきたかったので

$ npm install -g https://github.com/purifycss/purifycss

としてレポジトリから直接インストールします。

コマンドラインでは

$ purifycss  ~/test/public/stylesheets/screen.css ~/test/public/index.html --out purified.css

とすると、元のscreen.cssの中から ~/test/public/index.htmlの中で使われてるものだけを抜き出してくれます。

--outでその出力先を指定。(指定がない場合は標準出力に出ます。)

さらにまた、--minオプションを付けると出力時にCSSをminifyしてくれます。 (インプットがminifyされたものであっても、--minを付けないと一行ずつminifyされてない状態で出力されます。)

実際どれ位削減されたのか知りたい場合は--infoを付けると

$ purifycss --info  ~/test/public/stylesheets/screen.css ~/test/public/index.html --out purified.css
##################################
Before purify, CSS was 61537 chars long.
After purify, CSS is 32163 chars long. (1.9 times smaller)
##################################
This function took:  459 ms

みたいな感じで削減前と削減後の文字数を表示してくれます。

さらに--rejectedを加えると削除した方の値を表示してくれます。この--rejectedオプションが今のnpmパッケージだと使えないので GitHubから直接取ってくる必要があります。

$ purifycss --rejected  ~/test/public/stylesheets/screen.css ~/test/public/index.html --out purified.css
##################################
Rejected selectors:
applet
object
iframe
h2
h3
h4
h5
h6
blockquote
html .gist .gist-file .gist-meta
.serif
...

みたいな感じ。

この部分が CSSの読み込み負担を下げるのとこで使ってみた UnCSS と比べてかなり便利な点です。

どちらもサイト全体ではなくて特定のページについてなので削減されたものを直接使うのは他で使われてるものも落とされてる可能性が高いので出来ません。

逆に必要ない、といったものを表示してくれるとこれを目安に。不必要な物を削除していく事が出来ます。

実際に実行してみた結果、上のinfoのところでも出てますが、 6万文字が3万文字程度まで半分位になっています。

これはUnCSSでやった結果も出力側が同じくらいだったので大体同じ様な感じかな、と。

UnCSSの方はインプットの指定の仕方が Webで公開されてるページを指定して、 CSSについては自動で読み込まれるだけなので、外部のCSSとかも大量に読み込まれてその結果なのかな、と思ってましたが、そうでも無いのかも？(か、外部のもので使ってる部分が少ないので結果的に出力は同じ位になってるだけ、ということかも。)

一方PurifyCSSの方はGitHubのREADMEを見ると、 JavaScriptで作られる要素もきちんと見ぬくよ、と言う所がかなり強調されてます。

いずれにしろこの手のツールで直接削減してしまうのは間違ってしまう可能性もありますが、削除できそうな物を探す手段としてはかなり有用だと思うので PurifyCSSが使えそうです。