このページを正しく表示するにはJavascriptを有効にしてください。
css-optimization で不要な CSS を削除して軽量化してみた
こちらの記事を参考に「css-optimization」を試してみました。
## 使い方
* CSS 最適化前の Web サーバーを用意
* デフォルトでは描画されないパーツを表示するよう Puppeteer の操作を YAML で記述
* css-optimization を実行
このステップで CSS が最適化されたものに置き換わりました。
## 最適化結果
トップページの Lighthouse のスコアが 「3」 から 「16」 にあがりました。
CSS だけで結構変わるものですね。
ただスマホの解像度の対応とかログインが必要な管理画面まわりのへん YAML で記述できていないのでこのへん対応する必要がありそうです。
Puppeteer で描画されなかった CSS はそっくり消されてしまうので漏れなく操作を載せないといけないのはけっこう大変…。