2024年3月30日土曜日

drop-inline-css でインライン化レベルを最適化する

CSS 最適化ツール drop-inline-css を更新し、drop-inline-css でインライン化レベルを最適化できるようにしました。 一部分だけ不要 CSS をチェックしたり、一部分だけはチェックをせずそのまま inline 化できたりします。 めちゃくちゃ便利な気がしますが、まあ私だけかな…。

drop-inline-css

どんなことができるなったかというと、こんな感じの HTML を、 
<html>
  <head>
    <link class="drop-inline-css" rel="stylesheet" href="inefficient.css"></link>
    <link class="inline-css" rel="stylesheet" href="efficient.css"></link>
    <link rel="stylesheet" href="keep.css"></link>
  </head>
  <body>
    <p>styled</p>
  </body>
</html>
こんな感じに inline 化します。drop-inline-css クラスは HTML 構造を見ながら不要な CSS を drop するように最適化し、inline-css クラスはそのままインライン化し、keep.css には適用しないようにしました。 
<html>
  <head>
    <style>p { text-decoration: underline; }</style>
    <style>pre { color: red; }</style>
    <link rel="stylesheet" href="keep.css"></link>
  </head>
  <body>
    <p>styled</p>
  </body>
</html>
なぜこのような実装を入れたか。 CSS は最適化を考えた時、最適化の可能性は大まかに 3種類に分けられます。
  1. 静的な HTML から要不要が判断できる CSS
  2. 動的な HTML ではあるものの事前記述で要不要が判断できる CSS
  3. JavaScript をよく見ないと要不要が判断しにくかったり設定が面倒な CSS
私が作っているアプリの例を上げると、以下が例として当てはまります。
  1. Bootstarp の CSS だけで動く大部分のコード
  2. Bootstrap の JavaScript が必要なコンポーネント
  3. autocompletr や simple-keyboard などのライブラリ
1-2 は drop-inline-css を適用し、3 は平凡に inline 化するのが良いと思われます。 うまく最適化すれば Bootstrap などは 1/10 以下のサイズで利用できます。

また上記 2-3 の CSS は遅延ロードが可能で、その最適化は 3種類に分けられます。
  1. <link rel="stylesheet" href="base.css" media="print" onload="this.media='all';this.onload=null;">
  2. template タグ内で style を load
  3. template タグ内で link タグを load
1 は昔なら有名なテクニックでしたが外部ファイルが必要で小さな CSS に適用しにくいです。 今は Shadow DOM がサポートされたので、 2 が処理を後回しにしながら inline 化でき小さな CSS に適用しやすいです。 3 なら通信も後回しにできるので大きな CSS にも適用できる利点があります。

こうして考えてみると、CSS の最適化には (1) drop-inline-css する、(2) drop-inline-css した上で遅延ロード1する、 (3) inline 化する、(4) 何もしないの 3つが考えられ、それらを選択できる必要があります。 これまで drop-inline-css では 1,2 ばかり考えていたのですが、 2 は実装がやや面倒なので deprecated でも良さそうで、 代わりに 3,4 ができると嬉しいなと思って実装してみました。

具体的には link タグに drop-inline-css クラスがある時には drop-inline-css し、 inline-css クラスがある時には平凡にインライン化し、何もないときは何もしないようにしました。 この改良によっていくつかのアプリの実装がかなりシンプルになるとわかりました。 破壊的変更で更新が大変でしたが…。

Labels:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)