「CSS の最小化」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「CSS の最小化」とはどういう意味か、また診断結果を改善する方法についても解説します。

「CSS の最小化」とは？

ソースコードを書く際は、読みやすいように改行やスペース（ホワイトスペース）、コメントなどを入れるのが一般的です。しかし、このホワイトスペースやコメントはデータ量に含まれるため、webサイトの表示速度に影響を及ぼします。

表示速度を改善するためには、余分なホワイトスペースやコメントなどを除きファイル容量を小さくするわけですが、これをCSSの最小化といいます。ただし、CSSを最小化するとソースコードが読みにくくなるため、運用面も考慮しながら行うようにしましょう。

CSSを縮小する代表的な方法を、以下に3つ紹介していきます。いずれも手軽に利用できるサービスですので、好みの方法を選んで実践してみてください。

まずは、現時点の表示速度を「PageSpeed Insights」で確認しましょう。速度を調べたいURLを入力して分析ボタンを押すと、100点満点中の何点なのか診断結果が表示されます。80点以上になるのが理想です。改善が必要な場合には、点数の下に修正すべき項目がリストアップされます。

診断結果の画面下の方にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます」というリンクから、CSSの最小化が可能です。ダウンロードしたZIPファイルを展開するだけで、最適化されたCSSファイルを簡単に入手できます。

余分なホワイトスペースやコメントなどを手動で削除することも可能ですが、便利に使えるオンラインツールも提供されています。CSSファイルをドラッグしたり、あるいはコピーしたコードを貼り付けたりして、CSSの圧縮をオンライン上で行うものです。

各ツールによって仕様は異なりますが、圧縮されたソースコードが出力されたら、それをコピーして使用します。自動で圧縮が行われるため、スタイルが置き換わってしまうリスクはゼロとはいえません。万が一の事態にも対応できるように、オリジナルのデータはバックアップを取って保管しておきましょう。

エディタの種類によっては、圧縮機能がプラグインとして装備されているものもあります。好みのエディタのプラグインを探して、それを利用してみるのも一つの方法です。また、WordPressの場合は、ソースコードを自動で圧縮できるプラグインが備わっています。

WordPressの管理画面のダッシュボード「プラグイン」から「新規追加」を選択し、「Autoptimize」を検索してインストールしてください。必要に応じて各オプションにチェックを入れてから、セーブボタンをクリックし保存します。