Webサイトの表示速度を改善するには、画像の圧縮だけでなく、CSSの最適化も重要です。

CSSファイルの圧縮や、使用していない不要なCSSを削除することで、ファイルの転送量やブラウザの処理負荷を減らせる可能性があります。

本記事では、CSSの圧縮・不要リソースの削除による効果を独自検証し、改善前後の数値を比較します。

CSSが原因でサイトの表示速度が遅くなる主な要因

CSSファイルの読み込みがレンダリングを妨げる

CSSは、Webページの文字や画像、レイアウトなどの見た目を決めるために必要なリソースです。

ブラウザはHTMLを解析してページを表示する際、CSSファイルを取得・解析し、CSSOM（CSS Object Model）を構築します。

通常、外部CSSはレンダリングを妨げるリソースとして扱われるため、CSSの取得や解析に時間がかかると、画面への描画開始が遅れる可能性があります。

特に、ファイル数が多い場合や、容量の大きいCSSを読み込んでいる場合は注意が必要です。

使用していないCSSが読み込み時間や処理負荷を増やす

Webサイトでは、過去に使用していたデザインや、利用していない機能に対応するCSSが残っていることがあります。

また、テーマやプラグイン、外部ライブラリを導入すると、現在のページでは使っていないCSSまで読み込まれるケースもあります。

こうした不要なCSSが多いと、転送するデータ量が増えるだけでなく、ブラウザが解析するスタイルの量も増加します。

【独自検証】CSSの圧縮・不要リソースの削除による検証方法

実際に検証してみた結果を動画で撮影しています。

まずはこちらをご覧ください。

左側が修正前（ビフォー）ページで、右側が改善後（アフター）のページとなります。

検証方法は、下記で解説していきます。

ファイルの構成・前提条件

ページの構成は下記の通りとなります。

• index.html — 大量のカード・DOMを含むページ
• bloated.css — 約4.43 MB、未使用CSSルール30,000個
• style.css — 重複CSS・複雑なセレクタ・アニメーション
• extra.css — 追加のCSSと未使用ルール
• imported.css — @importによる追加読み込み

1つのHTMLを用意し、こちらに加え4つのCSSファイルで構成しています。

上記で記載の通り、bloated.cssは未使用のCSSで4.43 MBと重いCSSファイルとなります。

extra.cssも追加のCSSという設定ですが、未使用のファイルです。

imported.cssは@importによる追加読み込みしているファイルです。

これらのファイルを下記のように改善していきます。

計測して比較する項目

計測は下記の項目を計測してビフォーアフターを計測します。

CSSの圧縮・不要リソースの削除の改善するポイント

改善ポイント①：ページに必要ないCSSを削除

該当ページの読み込みに必要のないCSSをHTMLから削除します。

bloated.css（4.43 MB）とextra.cssは未使用のCSSのためHTMLのheadから削除します。

ビフォー

<link rel="stylesheet" href="bloated.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="extra.css">

アフター

<link rel="stylesheet" href="style.css">

これにより、約4.43 MBの bloated.css と、不要な extra.css の読み込みをなくすことができます。

この分のファイルを読み込みにいく転送量などが減ることを期待しています。

改善ポイント②：CSS内の @import をなくす

style.cssの中にimported.cssのファイルを追加読み込みされる設定がされていますが、こちらも不要のためstyle.cssから削除します。

ビフォー

@import url("imported.css");

※上記の1行を削除し追加読み込みされない形にします。

今回の imported.css にあるクラスはHTMLで使われていないため、内容を統合せず削除するのみとなります。

imported.cssに必要なスタイルがある場合は、スタイルだけをstyle.cssにまとめるようにします。

そうすることでimported.css の追加読み込みをなくします。

改善ポイント③：未使用CSSを削除・統一

style.css内に記載のある未使用のCSSを削除をします。

下記のように記載はあるが、実際には使用されていないというCSSはそのまま行を削除します。

ビフォー

/* 未使用CSSを多数含める */
.unused-container { display:flex; gap:30px; }
.unused-sidebar { width:280px; background:#eee; }
.unused-widget { padding:25px; border:1px solid #ddd; }
.unused-modal { position:fixed; inset:0; display:none; }
・
・
・
・

今回は上記のような未使用なソース（32行分）の未使用CSSを削除しました。

改善ポイント④：重複したCSSを統合する

style.css内に記載のあるソースで、下記のように同じ内容（重服している）に対してソースは重服を削除します。

ビフォー

* { box-sizing: border-box; }
* { box-sizing: border-box; }

下記のように変更しています。

アフター

* { box-sizing: border-box; }

行が増えていますが、1行は重服のため全く意味のなさない行になるため重服した分を削除しています。

こうすることで、読み込みも多少軽減されることを期待しています。

他にも下記のように、記述は違えど意味は同じソースがあり内容的には重複しているものがあります。

ビフォー

.button-primary { background: #315de8; color: #fff; }
.button-primary { background-color: #315de8; }

このようなケースで、下記のように統一を行いました。

アフター

.button-primary {
  background: #315de8;
  color: #fff;
}

改善ポイント⑤：複雑なセレクタを簡潔にする

今回の style.css には、下記のような長い指定があります。

ビフォー

body .page-wrapper main .content-section
.card-grid .feature-card .card-body h3 {
  font-weight: 700;
  letter-spacing: .02em;
}

これは「ページ内のコンテンツセクションにあるカードの中の見出し」というように、対象を細かく指定しています。

しかし、HTMLのクラス構造を確認して、同じ要素を指定できるのであれば、次のように短くできます。

アフター

.card-body h3 {
  font-weight: 700;
  letter-spacing: .02em;
}

このように簡略化することで少しずつ読み込みの負荷を減らすことができます。

改善ポイント⑥：不要なアニメーションを削除

今回のstyle.css では、ボタンやカードを動かすために下記のような指定があります。

ビフォー

.animated-button {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(49,93,232,.25);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(49,93,232,0);
  }
}

これは、ボタンの周囲を繰り返し光らせるようなアニメーションです。

今回の検証では、次のように変更しました。

• .animated-button の animation 指定を削除する
• ほかで使われていない場合は、対応する @keyframes pulse も削除する

※アフターは上記のソース部分は全て削除した形になります。

改善ポイント⑦：style.cssを圧縮

今回はウェブの無料圧縮ツールを使いstyle.cssを圧縮しました。

元々は下記のように何行もあるファイルでしたが

style.cssを圧縮することで、下記のように1行になりました。

圧縮することで読み込みや転送量なども改善されます。

【検証結果】CSSの圧縮・不要リソース削除後の効果

まずは、実際に計測した検証結果を表でまとめてみました。

改善効果１：CSS転送量と読み込み時間が減った

style.cssの転送量にも変化が見られました。

主に不要なCSSの行を削除・統合したり、不要なファイルの読み込みを除外したことで影響があると考えられます。

ビフォーの数値は8.5kbでしたが

アフターは6.9kbまで軽減されています。

また、それに合わせてstyle.cssの読み込み時間も速くなりました。

変更前は186msだったのに対し

変更後は177msとなり、読み込み時間もやや改善が見られました。

CSS全体の転送量で見ても大きく変化があります。

改善前は合計４つのCSSファイルがあり、合わせて4.5MB程度の転送量となります。

特に容量が重い4.5MBのCSSファイルが使用されていないCSSで読み込みにかなり時間がかかっていたことになりますが、こちらを削除し読み込みをなくしたため、改善後は6.9kbのみとなりかなり軽量化された形になります。

不要なCSSの内容にもよりますが、数行程度の削除であればそこまで大きな差は生まれませんが、容量が大きいものの読み込みがなくなることで相当軽くすることができます。

改善効果２：ページ読み込み・転送・CSSリクエスト数

CSSが軽くなることにより、ページ全体への影響もあります。

下記は改善前の数値ですが、ページを読み込み終わった時間が5.6秒、ページ全体の転送量は4.6MB、リクエスト数は7件だったところ

改善後は、ページを読み込み終わった時間が約0.5秒、ページ全体の転送量は13.8kB、リクエスト数は4件という結果になりました。

ページ自体にも大きな影響があると言えます。

改善効果３：LCPの改善

LCPの数値も大きな影響を受けています。

今回のページは画像などがないページのため、h1タイトルがLCPの対象となります。

改善前に5.71秒だったLCPの数値が

0.54秒までの改善が見られました。

こちらでわかることとしては、CSSも容量が多いとレンダリングブロックにもかなり影響が出るということがわかります。

CSSの圧縮・不要リソースの削除に関するよくある質問

CSSを圧縮するとPageSpeed Insightsのスコアは上がる？

CSSを圧縮すると、余分な空白や改行、コメントなどが削除され、ファイル容量を削減できます。これにより、CSSのダウンロード時間が短縮され、PageSpeed Insightsのスコアが改善する可能性があります。ただし、圧縮による容量削減が小さい場合や、ほかの要因が表示速度を低下させている場合は、スコアが大きく変わらないこともあります。

不要なCSSはすべて削除しても問題ない？

不要に見えるCSSでも、特定のページや画面サイズ、ボタン操作などで使用されている場合があります。誤って削除すると、レイアウトが崩れたり、メニューやアニメーションが動作しなくなったりする可能性があります。削除する際は、実際に使用されている箇所を確認し、PC・スマートフォンの両方で表示や動作を検証することが重要です。

WordPressでCSSを圧縮・削除するには？

WordPressでは、CSSの圧縮や最適化に対応したプラグインを利用する方法があります。例えば、CSSの圧縮やキャッシュ機能を備えたプラグインを導入すれば、専門的なコード編集をせずに最適化できる場合があります。ただし、テーマやほかのプラグインとの相性によって表示崩れが起きる可能性があるため、事前にバックアップを取り、適用後にページの表示や動作を確認しましょう。

CSSを最適化しても表示速度が改善しないのはなぜ？

CSSを最適化しても表示速度が改善しない場合、画像の容量やJavaScriptの処理、サーバーの応答速度など、別の要因が影響している可能性があります。また、CSSの圧縮だけではファイル容量が大きく減らないケースもあります。PageSpeed InsightsやChrome DevToolsを使い、LCPやレンダリングを妨げるリソースなどを確認しましょう。計測結果をもとに、影響の大きい箇所から優先して改善することが重要です。

CSSの圧縮・不要リソースを削除した結果

CSSファイルの圧縮や不要なコードの削除は、読み込み時間の短縮につながる可能性がありますが、すべてのサイトで大きな改善効果が得られるとは限りません。まずはレンダリングを妨げているCSSや、使用されていないCSSの有無を確認し、優先度の高い箇所から対策しましょう。また、最適化の前後でLCPやFCPなどの指標を比較し、実際に表示速度が改善したかを検証することも大切です。数値に基づいて施策を評価し、必要に応じて改善を繰り返すことで、効率的な表示速度の向上を目指せます。