DropCSSを利用して遅延ロードを最適化

DropCSSという未使用CSSを削除して最適化するツールがバズっていましたが、処理や実装的にもコンパクトで気になるツールでした。 これまで類似ツールとしてUnCSSを使っていましたが、scriptタグの評価なしに最適化でき高速なのは良いですね。 UnCSSだと外部scriptのValidation Errorに気を使う必要があったので、そのへんは使いやすくなった。

ただ現状では既にインライン化されているCSSは最適化の処理判定外になるので、HTMLとCSSは分離した開発が必須になります。 DropCSSの採用が増えれば、開発フェーズはより厳密化されるでしょうね。それともインラインCSSのサポートのほうが早いかな。


処理速度や圧縮効率より私が良いなと思ったのは、コードが簡素で改良が簡単な事です。 これを活かして、さっそく未使用CSSを削除するだけではなく、CSSの遅延ロード時に使えるCSSを生成できるようにしてみました。 遅延ロードしたいCSSの例は、ファーストビューでは不要と判定されてもセカンドビューなどで本当は必要で、後から読み込むべきCSSの事です。 詳しい説明はこちら。

実装すべき事は至極単純で、HTML上に対応するCSSがない場合に削除するのではなく残すようにすれば良いだけです。 これは以下のコードを書き換えるだけです。

# before
if (domSel == '' || CSSselect.selectOne(domSel, htmlAst.childNodes, {adapter}) || shouldDrop(sel) !== true)
# after
if (domSel == '' || !CSSselect.selectOne(domSel, htmlAst.childNodes, {adapter}) || shouldDrop(sel) !== true)
  pre.push(sel);

次に上記のコードを利用して以下の3つのCSSを生成します。

1. ファーストビューのCSS
2. ファーストビュー＋セカンドビューのCSS (--ignoreオプションなどを利用)
3. セカンドビューのCSS＝2のCSSに上記コードを適用したCSS

これまで1,2のCSSを構築する事は簡単でしたが、2は無駄が多かった。 しかし上記コードを用いれば効率の良い3を簡単に生成できるようになりました。 これによって削減できるデータ量のイメージは以下。 セカンドビューに含まれていた不要な10%のCSSが削減できる。

original: 100%
before: 25% = 10% + 15=(10+5)%
after:  15% = 10% +  5=(15-10)%

このような最適化をしやすいところが、DropCSSの一番の利点と言えるでしょう。