rcmdnk's blog

Purify (The Ivory Solution Book 3) (English Edition)

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

Sponsored Links

PurifyCSS

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

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

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

$ npm install purify-css

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

$ npm install -g purify-css

とします。

ただし、現在npmでパッケージインストール出来るバージョンがちょっと古くて 1、 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が使えそうです。

Sponsored Links
  1. と言ってもパッケージが設定されたのが1週間前ですが、その次の日にコマンドラインツールに変更があります。

Sponsored Links

« Brew-fileでMacのパッケージを簡単に管理する octopress-common-partでOctopressを高速化 »