CSSの最適化アプローチ。インライン化、圧縮、そして削除

公開日：2020/8/27更新日：2023/1/21

見た目に関するファイルである「CSS」を最適化するには、主に以下の3つのアプローチがあります。

  1. CSSのインライン化
  2. 圧縮
  3. 使われていないCSSの削除

インライン化する

管理のしやすさ（とキャッシュの関係で）、外部ファイルとして読み込むことが多いCSSですが、以下のようにheadタグでインラインで読み込む方がページが速く表示されます。

<head>

 <style>
  h2 {
   color: red;
   font-size: 24px;
  }
 </style>

</head>

ページ表示の高速化に通じる話ですが、最初に読み込まれた画面に必要なCSSは限られているため、すべてのCSSを最初に読み込むのではなく、後で読み込んでも良いものは後で読み込もう、という非常にシンプルな話です。

ただ、必要なCSSと不要なCSSを別々に読み込むのは正直面倒ですし、表示速度に与える影響も微々たる差になることが多いので、すべてインラインで読み込んでも特に問題ありません。

ただし、すべてインラインで読み込む場合は、後述する「圧縮」と「不要なCSSの削除」は必要不可欠です。

圧縮する

CSSの圧縮方法はいくつもあります。

オンラインで手軽に圧縮

執筆時点で、https://syncer.jp/css-minifierが検索上位のCSS圧縮ツールです。

このツールも含め、CSS圧縮ツールの手順は以下の通りです。

  1. 未圧縮のCSSを貼り付けて変換
  2. 圧縮済みのCSSをコピーする

手軽に圧縮できる反面、CSSを修正する度にツールを使う必要があるので、開発者は後述する方法を使ってください。

コードエディタ上で圧縮

Visual Studio Code（VS Code）に、Atomに、コードエディタもたくさん数がありますが、拡張すればコードエディタ上で圧縮が可能です。

例えば、VS CodeにはMinifyのプラグインがあります。

使い方は簡単で、圧縮したいCSSファイル上で shift + ⌘ + P をクリックし、「Minify」を選択するだけ。

VS CodeのプラグインでMinifyをする

これで圧縮されたCSSファイルが完成です。

圧縮されたCSSファイル

他のコードエディタにおいても基本的には同じ流れです。「CSS Minify」のキーワードで拡張機能やプラグインを探せるはずです。

node.jsを使う

コードエディタの拡張機能でCSSを圧縮している方も多いと思いますが、以下のデメリットもあります。

  • コードエディタが重くなる
  • 圧縮設定をプロジェクトごとに決められない（もしくは手間がかかる）
  • コードエディタに依存するため、開発環境がバラバラなチームでの開発に不向き

これらの理由から、コードエディタの拡張機能ではなく、プログラムとして圧縮処理をするのがモダンなやり方になっています。

例えば、node.jsツールであるCSSNANOがそうです。

node.jsでの開発環境が整っていれば、例えば、本番環境用のファイルを用意するタイミングでCSSを圧縮（最適化）するなど、開発者フレンドリーな環境になります。

使われていないCSSを削除する

最後のCSS最適化アプローチは、不要なCSSの削除です。

自分で1からCSS設計する場合は不要かもしれませんが、Bootstrapに代表される「CSSフレームワーク」を使っている場合は事実上必須な工程です。

なぜなら、これらのフレームワークには「mb-2」や「mt-4」など、予め定義されたCSSが大量にあるのですが、そのほとんどが使われないので（開発時にだけ必要なので）、大量の無駄なCSSがファイルに含まれるからです。

この問題を解決するには、PurgeCSSを使います。

PurgeCSSは、ページで使われていないCSSを解析して削除してくれるツールで、CSSフレームワークとの相性は抜群です。

上記のCSSNANOと同じく、node.jsツールになるため、インストールが必要です。