以下の記事は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の削減に成功しました









Related posts:

【ニュース】プログラミングしないエンジニアが急増中! 日本初のNoCode専門サロン「NoCodeCamp」募集開始
【ニュース】日本で活躍する外国人エンジニア向けコミュニティ”CodeGate”発足のお知らせ
【ニュース】STEM教育に最適!直感的に組み立てるだけで200種類以上のアクションが楽しめるプログラミングロボット「Clicbot」
【特集記事】ITエンジニアに必要な基礎スキル6つ|おすすめの勉強法を紹介!
【ニュース】無料のプログラミング学習プラットフォーム「LINE entry」、ゲーム感覚でプログラミングを学べる「ミッション」をリリース
【Kotlin】Unit Testing Firebase with Kotlin
【Analytics】Native Analytics on Apache Cassandra with Knowi: Tutorial
【Column】99% of Successful Software Engineers Practice These 10 Habits and Skills
【Swift】7 Awesome Open Source SwiftUI Projects to Inspire You (Part 2)
【Swift】7 Awesome Open Source SwiftUI Projects To Inspire You
【機械学習】Machine Learning: Google Colab- Why, When and How to Use it
【Column】The Future of Code Is in Your Browser
【Firebase】Top 3 open-source Firebase alternatives for 2020
【Docker】TIME TO SAY BYE BYE DOCKER !!! Era of Docker is over...
【JavaScript】The webpack plugin I can't live without
【ニュース】プロのシェフをレンタルできる!?VMGで初!「フレンチシェフ出張サービス」を開始!!
【ニュース】「Re就活」UIターン特集のアクセス数が4月比6.25倍に!UIターンでの転職ニーズは顕著に。
【ニュース】スマホでレッスン予約サイト作成「GoodPage」が、オンラインレッスンの予約・決済の自動化に対応!月額無料キャンペーンも開始
【ニュース】オンライン料理教室「テレクック」6月6日(土)より受講者へ事前食材配送サービスを開始
【ニュース】オンライン飲み会サービス『たくのむ』、オンライン店舗をオープンできる「お店プラン」を無料で提供開始
【ニュース】地域のパン屋さんと消費者をつなぐ「パンフォーユー」、パン屋さんが簡単にEC参入できる新システム「パンスクモット」を提供開始
【ニュース】クラウドファンディングランキング 支援額第1位(掃除機部門)の超小型コードレスハンディクリーナー「AutoBot VX」が記録更新中!
【ニュース】Web面接ツールコストパフォーマンスNo.1【playse web面接】が新機能「面接日程調整機能」を2020年5月27日にリリース
【ニュース】初期費用なしで始められる同棲サービス「おためし同棲」、サービス正式開始につき、1ヶ月プレゼントキャンペーンをtwitterで開始
【特集記事】プログラミングスクールで「飛躍成長」する方法論【失敗を極力回避】
【特集記事】プログラミング初心者が知っておきたいサイト
【コラム】低学年でもプログラミングでモノづくりの楽しさを体験できる「プログラミングゼミ」とは?
【ニュース】ドラッグアンドドロップでプログラミングを学べる——STEM教育向けロボット「STEMBoT 2」
【JavaScript】6 Reasons Why You Should Learn JavaScript
【Node.js】Node.jsでサーバーサイドJavascriptに挑戦