未使用のCSSを削除しよう！軽量化ツールPurgeCSSの使い方

web開発におけるパフォーマンスの最適化は、UXの向上だけじゃなくSEOにも大きな影響があります！

特にwebサイトの読み込み速度はユーザーの離脱率を大幅に低下させるため、SEOの観点からも重要な要素です。

今回はCSSファイルの最適化を行うツール「PurgeCSS」の使い方について解説します！

PurgeCSSとは

PurgeCSSとはシンプルに、「不要なCSSを削除」するためのツールです！

不要なCSSを削減するとwebサイトの読み込み時間を短縮することができます。

本番環境で不要なCSSが削除されるとページの読み込み速度が向上し、結果的にSEOのパフォーマンスも向上します！

PurgeCSSのインストール方法

それでは早速、プロジェクトファイルにPurgeCSSをインストールしましょう！

ターミナルで次のコマンドを実行します。

npm install --save-dev purgecss

このコマンドによりPurgeCSSが開発環境にインストールされます。

インストールの確認

ターミナルに下記のコマンドどちらかを打ち込むと、インストールされているか確認することができます。

npm list
npm ls

上記をターミナルに入力すると僕のMacの場合は下記の内容が返ってきます🙌

Last login: **** on console
****@MacBook-Pro-2 ~ % npm list
katsuwataa15co.jp@ /Users/****
├── purgecss@5.0.0
└── ****

****@MacBook-Pro-2 ~ % 

PurgeCSSの設定方法

設定方法は2種類ありCLI(コマンドラインインターフェース)とJavaScript APIがあります。

今回は初心者の方でも簡単に実装できため、CLIを使用して設定を進めていきます。

まずは「purgecss.config.js」というファイルをプロジェクトのルートディレクトリに作成しましょう。

全てのディレクトリと特定のディレクトリの場合で使用する2パターンのコードをご紹介します。

全てのディレクトリの場合

こちらの設定は全ての.htmlと.jsファイルに対してCSSの使用状況をチェックします。

module.exports = { 
  　// スキャンするファイルのパスを指定します
    content: ['**/*.html', '**/*.js'], 
    css: ['**/*.css'] 
}

特定のディレクトリの場合

module.exports = { 
    content: ['./src/**/*.html', './src/**/*.js'], 
    css: ['./src/**/*.css'] 
}

上記の設定はsrcディレクトリ(およびそのサブディレクトリ)内の.htmlと.jsファイルに対してCSSの使用状況をチェックします。

ほとんどの場合は全てのディレクトリを対象にしたコードを使用すると思いますが、contentオプションを使用して複数のファイルやディレクトリを指定することも可能です。

これでPurgeCSSはプロジェクト内の複数のファイルタイプや、ディレクトリの使用されていないCSSを解析することができます。

PurgeCSSの実行

PurgeCSSの実行方法はかなりシンプルで、先ほどPurgeCSSをインストールしたディレクトリで下記のコードを入力してください。

npx purgecss --config purgecss.config.js --output ./dist

このコマンドを使用すると、使用されていないCSSが削除された新しいCSSファイルがdistディレクトリと共にに生成されます。

ですが、使用していないCSSを全て削除してしまうと思わぬ不具合が発生する場合もありますよね。

その場合はwhitelistというオプションを追加して、特定の文字列が削除されないよう設定できます！便利ですよね！

それではwhitelistオプションを使用する方法をご紹介します！

オプションの設定方法

whitelistのオプションも簡単に実装できるので、追加されたコードを見ていきましょう。

module.exports = {
    content: ['**/*.php'],
    css: ['**/*.css'],

    // CSS内の特定のセレクタをホワイトリストに追加することもできます
    whitelist: ['l-header', 'u-btn'],

    // セレクタ名の一部をホワイトリストに追加することもできます
    whitelistPatterns: [/color$/],

    // JavaScriptで動的に生成されるクラス名などをホワイトリストに追加するための関数
    whitelistPatternsChildren: [/^toggle/, /^opne/, /^close/]
}

コメントアウトにも書いてありますが簡単に解説していきます！

whitelist

特定のCSSセレクタを指定することでそのセレクタを削除しないようにできます。

module.exports = {
    content: ['**/*.php'],
    css: ['**/*.css'],

    whitelist: ['l-header', 'u-btn'],
}

こうすることで.l-headerと.u-btnのセレクタは削除されません。

wehitelistPatterns

セレクタの一部を指定することで削除しないようにできます。

例えばcolorの入ったセレクタを指定したい場合は下記になります。

module.exports = {
    content: ['**/*.php'],
    css: ['**/*.css'],

    whitelistPatterns: [/color$/],
}

こうすることでcolorという文字列を含むセレクタは削除されないようになります。

whitelistPatternsChildren

javascriptに使用されている動的なセレクタも削除されないようにできます。

whitelistPatternsChildrenを動作させるためにはPurgeCSSの設定方法でjsファイルを指定している必要があるので、注意してくださいね。

navのjavascriptで頻繁に使用される動的なセレクタを指定すると下記のようになります。

module.exports = {
    content: ['**/*.php'],
    css: ['**/*.css'],

    whitelistPatternsChildren: [/^toggle/, /^opne/, /^close/]
}

こうすることでjsで使用されているセレクタを除外することができます。

まとめ

webサイトの読み込み速度はSEOだけでなくUXにも大きく影響します。

PurgeCSSを使用することでCSSファイルの容量を削減でき、webサイトのパフォーマンスを向上させることができます。

使用方法や設定も比較的簡単なので、古いCSSファイルでコードがごちゃついてる場合や、

Page Speed Insightsで「レンダリングを妨げるリソースの除外」でCSSが表示される場合はぜひ試してみてください！

それではまた！webデザイナーになるなる！