【CSS】レガシーサービスにおけるパフォーマンス改善 – 使われていないCSSを削除してくれるCLIを作った話 | プロマリ | プログラミング教室 | リモートワーク | 港区

以下の記事はQiitaの@toshi1127さんが記述した「レガシーサービスにおけるパフォーマンス改善 – 使われていないCSSを削除してくれるCLIを作った話」の紹介記事です。

リクルートテクノロジーズ でフロントエンドエンジニアをしている@SW20_Toshiです。
本記事はRecruit Engineers Advent Calendar 2019 – Adventar 20日目の記事です。

皆様はウェブのパフォーマンスを気にしていますか？
おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？
今回は、レガシーサービスにおけるパフォーマンス改善として、Puppeteerを使って不要なCSSを削除する取り組みを行いました。
ツールはOSSとして公開しているので使ってみてください！

サイボウズ株式会社のこちらの記事には大変お世話になりました！
ありがとうございました！

きっかけ

10年近くABテストや機能追加を繰り返してきたWebサービス….

1画面に大量のCSSファイルが読み込まれていて、カバレッジ関しては目も当てられない酷さ

パフォーマンス・開発者観点で、次のような問題があげられます。

パフォーマンス観点

-カバレッジが低いファイルが複数あり、描画速度が遅くなる
– CSSの解決のされ方についてはこの記事がわかりやすいです
– minifyもconcatもできていない

開発者観点

CSSが3万行以上あるため、影響範囲がわからない。
案件に入る前に、リファクタリングが必要なことも…

やったこと

css-optimizationというツールを開発し、結果としてCSSを180KBの削減に成功しました