CORPORATE

技術情報

PurgeCSS による使用していないスタイルの削減

PurgeCSSとは、プロジェクト内で使用していないcssを削除するツールです。
Webサイトを長く運用していて改修が進んでいたり、CSSフレームワークを活用していると、使用していないcssスタイルが増えていくことが多くあります。
PurgeCSSを使用することで、拡張子を指定し(.html, .php, .jsなど)、指定した拡張子のファイル内で使われていないセレクタのcssを削除することが出来ます。

導入検討理由

少しでも通信容量の削減=表示速度の改善を行いたいと検討したいました。
消していいのか悪いのかわからないスタイルに手が止まることもあり、自動化できるのであればより効率的な作業が可能になるのではとPurgeCSSを試すことにしました。

削減対象例

使用していないmixinやhelper
ABテストなどで使用するか頻繁に切り替わるスタイル
特定のスタイルのみ使用されているライブラリ

手順

今回はPurgeCSSをそのまま使用します。

PurgeCSSにはnuxt-purgecssやgulp-purgecssのような、ビルドシステムに組み込むプラグインも存在します。
一度scssを保存した際のコンパイル・圧縮等に含めることも検討しましたが、保存の都度実行するとコンパイルに必要な時間が増大するため今回は組み込みません。

npm i -g purgecss
purgecss --css ./Css/Common.css --content ./**/*.{html,php,js} --output ./Css/minify/min.css
  • 不使用セレクタを削除するcssファイル：./Css/Common.csc
  • セレクタを使用しているか確認するファイル群： ./**/*.{html,php,js}
  • 削除後のcssを保存するファイル：./Css/minify/min.css

結果

今回、弊社で開発しているテンプレート用のcssが1.1MB → 310 KBとなり、800KB近く減少しました。

改善・課題点

アイコンフォント等の設定も削除されてしまっているため、設定等をより詰める必要があります。
過不足無く削除できるようにすれば、デプロイ時のフローに組み込むことで自動的にファイルサイズの削減につながるため、取り組む価値がありそうです。

ブログの著者欄

石田 優美

GMOインターネットグループ株式会社

GMOインターネットグループ株式会社2018年度新卒入社 / 事業統括本部Webプロモーション研究室フロントエンドチーム所属 / コーポレートや商材サイトに携わっています。

採用情報

関連記事

No.1&AI人財採用 新卒年収710万プログラム

KEYWORD

CATEGORY

TAG

もっとタグを見る

PICKUP

採用情報

SNS FOLLOW

GMOインターネットグループのSNSをフォローして最新情報をチェック

CATEGORY