使用していないCSSの削減で劇的改善！サイト表示速度を3倍高速化する完全ガイド

Webサイトの表示速度が遅いと感じたことはありませんか？PageSpeed Insightsで「使用していないCSSの削減」という改善項目が表示され、どう対処すべきか迷っている方も多いでしょう。

実は、使用していないCSSの削減は、サイトの表示速度を劇的に改善する最も効果的な方法の一つなんです。この記事では、初心者でも簡単に実践できる具体的な方法から、プロレベルの最適化テクニックまで、余すところなく解説していきます。

使用していないCSSの削減とは？基本概念を理解しよう

そもそも「使用していないCSS」って何？

使用していないCSSとは、その名の通り、サイトに読み込まれているものの実際には使用されていないCSSコードのことです。

例えば、1000行のCSSコードがあるWebページで、実際に使用されているのが300行だけの場合、残りの700行は「使用していないCSS」となります。この700行分のコードがムダに読み込まれることで、サイトの表示速度が遅くなってしまうわけです。

なぜ使用していないCSSが発生するのか？

使用していないCSSが発生する主な原因は以下の通りです：

1. WordPressテーマの過剰な機能 多くのWordPressテーマは、様々なカスタマイズオプションに対応するため、膨大なCSSコードを含んでいます。しかし、実際に使用するのはその一部だけという場合がほとんどです。

2. プラグインの重複機能 複数のプラグインを使用していると、似たような機能のCSSが重複して読み込まれることがあります。

3. 開発・更新時の残存コード サイトの開発や更新を繰り返す過程で、不要になったCSSコードが削除されずに残ってしまうケースも珍しくありません。

4. 外部CSSライブラリの全読み込み BootstrapやFoundationなどのCSSフレームワークを使用する際、必要な部分だけでなく全体を読み込んでしまうことがあります。

使用していないCSSがサイトに与える深刻な影響

表示速度の著しい低下

ブラウザは、ページを表示する前にすべてのCSSを読み込み、解析する必要があります。不要なCSSが多いと、この処理に時間がかかり、ユーザーがページを見るまでの時間が長くなってしまいます。

実際の調査では、使用していないCSSの削除により、ページの読み込み時間が30〜50%短縮されたケースも報告されています。

SEOランキングへの悪影響

Googleは2021年6月から、ページエクスペリエンスをランキング要因に含めることを発表しました。中でも「Core Web Vitals」の指標である**LCP（Largest Contentful Paint）**は、ページの読み込み速度に直結する重要な要素です。

使用していないCSSが多いと、LCPスコアが悪化し、検索順位の低下に繋がる可能性があります。

ユーザー体験の悪化

モバイルユーザーにとって、ページの表示速度は特に重要です。使用していないCSSにより無駄なデータ通信が発生すると、ユーザーのデータ使用量が増加し、通信費の負担にもなります。

使用していないCSSの発見方法：3つの効果的な手法

1. PageSpeed Insightsによる基本診断

最も簡単で確実な方法は、Googleが提供するPageSpeed Insightsを使用することです。

使用手順：

PageSpeed Insightsにアクセス
調査したいページのURLを入力
「分析」ボタンをクリック
結果の「改善できる項目」セクションで「使用していないCSSの削減」を確認

PageSpeed Insightsは、20KB以上の未使用CSSがあるファイルを自動的に検出し、削減可能なデータ量まで表示してくれます。

2. Chrome DevToolsのCoverageタブによる詳細分析

より詳細な分析には、Chrome DevToolsのCoverageタブが有効です。

使用手順：

調査したいページをGoogle Chromeで開く
右クリックして「検証」を選択
DevToolsの「Coverage」タブをクリック
記録ボタン（●）をクリックして計測開始
ページをリロードして計測完了

Coverageタブでは、各CSSファイルの使用率が視覚的に表示されます。赤色の部分が未使用のCSS、青色の部分が使用されているCSSを表しています。

3. 専用ツールによる自動分析

Unused CSS（無料ツール）

Unused CSSは、URLを入力するだけで未使用のCSSセレクタを一覧表示してくれるツールです。

特徴：

操作が簡単
セレクタ単位での表示
無料で利用可能

注意点：

テスト中のツールのため、動作が不安定な場合がある
疑似クラス（:hover、:focusなど）が誤検出される可能性

UnCSS Online!（無料ツール）

UnCSS Online!は、HTMLとCSSを入力すると、自動的に未使用部分を削除したCSSを生成してくれるツールです。

特徴：

自動削除機能
クリーンなCSS生成
即座に結果を確認可能

実践！使用していないCSSを削除する具体的な方法

手動での削除方法

Step 1: バックアップの作成

重要： CSS編集前には必ずバックアップを作成しましょう。

WordPressの管理画面で「外観」→「テーマエディター」を開く
「style.css」を選択
全てのコードをコピーしてローカルファイルに保存
必要に応じて、BackWPupなどのプラグインで完全バックアップを作成

Step 2: 不要なCSSの特定と削除

Unused CSSで抽出したセレクタリストを確認
各セレクタをstyle.cssから検索
該当するCSSルールを削除
変更を保存

削除時の注意点：

一度に大量削除せず、少しずつ削除してテストを行う
レスポンシブデザインに影響する可能性のあるコードは慎重に判断
疑似クラスやメディアクエリは誤検出の可能性があるため、実際の動作を確認

自動削除ツールの活用

UnCSS Online!による自動削除

HTML取得
- 対象ページで右クリック→「ページのソースを表示」
- HTMLコードを全てコピー
CSS取得
- WordPressの「外観」→「テーマエディター」→「style.css」
- CSSコードを全てコピー
自動削除実行
- UnCSS Online!にアクセス
- 左側にHTML、右側にCSSを貼り付け
- 「UNCSS MY STYLES」ボタンをクリック
結果の適用
- 生成されたクリーンなCSSをコピー
- style.cssの内容を置き換え

プロレベルの最適化テクニック

1. 条件分岐による読み込み制御

特定のページでのみ必要なCSSは、条件分岐を使って読み込みを制御できます。

Copy// functions.phpに追加
function optimize_css_loading() {
    // お問い合わせページ以外でContact Form 7のCSSを無効化
    if (!is_page('contact')) {
        wp_dequeue_style('contact-form-7');
    }
    
    // 投稿ページ以外でコメント機能のCSSを無効化
    if (!is_singular('post')) {
        wp_dequeue_style('comment-style');
    }
}
add_action('wp_enqueue_scripts', 'optimize_css_loading', 999);

2. CSSの非同期読み込み

CSSファイルを非同期で読み込むことで、ページの初期表示速度を向上させることができます。

Copy<!-- 通常の読み込み -->
<link rel="stylesheet" href="style.css">

<!-- 非同期読み込み -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

3. クリティカルCSSの最適化

Above the fold（ファーストビュー）の表示に必要なCSSのみを先に読み込み、残りは後から読み込む手法です。

実装手順：

クリティカルCSSの抽出
- Criticalなどのツールを使用
- ファーストビューに必要なCSSのみを抽出
インライン化
- 抽出したCSSをHTMLの<head>内に直接記述
- 残りのCSSは非同期で読み込み

4. CSS Minificationの実装

CSSファイルの圧縮により、ファイルサイズを最小化します。

おすすめツール：

CSS Minifier
CleanCSS
WordPressプラグイン「Autoptimize」

WordPressユーザー向け：プラグインを使った簡単最適化

1. Autoptimizeによる自動最適化

Autoptimizeは、CSS/JavaScriptの最適化を自動で行ってくれるプラグインです。

設定方法：

プラグインをインストール・有効化
「設定」→「Autoptimize」を開く
「CSSコードの最適化」にチェック
「CSSファイルの連結」にチェック
「インライン CSS の最適化」にチェック

2. Asset CleanUpによる細かい制御

Asset CleanUpは、ページごとに不要なCSSファイルの読み込みを停止できるプラグインです。

使用方法：

プラグインをインストール・有効化
各ページの編集画面で「Asset CleanUp」セクションを確認
不要なCSSファイルを個別に無効化

3. W3 Total Cacheによる総合最適化

W3 Total Cacheは、キャッシュ機能と併せてCSS最適化も行えるプラグインです。

CSS最適化設定：

「Performance」→「Minify」を開く
「CSS minify settings」でMinifyを有効化
「Auto」モードまたは「Manual」モードを選択

最適化後の効果測定と継続的な改善

効果測定の方法

1. PageSpeed Insightsでの再測定

最適化後、PageSpeed Insightsで再度測定し、スコアの改善を確認します。特に以下の指標に注目：

LCP（Largest Contentful Paint）: 2.5秒以下が理想
FID（First Input Delay）: 100ms以下が理想
CLS（Cumulative Layout Shift）: 0.1以下が理想

2. GTmetrixでの詳細分析

GTmetrixでは、より詳細なパフォーマンス分析が可能です。

注目すべき指標：

Page Load Time（ページ読み込み時間）
Total Page Size（総ページサイズ）
Total Requests（総リクエスト数）

3. Google Search Consoleでの確認

Search Consoleの「Core Web Vitals」レポートで、SEOへの影響を確認できます。

継続的な改善のポイント

1. 定期的な監視

月に1回程度、PageSpeed Insightsでの測定を行い、新たな問題がないかチェックしましょう。

2. 新規コンテンツ追加時の注意

新しいページやコンテンツを追加する際は、必要最小限のCSSのみを使用するよう心がけます。

3. プラグイン・テーマ更新時の再確認

WordPressのプラグインやテーマを更新した後は、再度CSS最適化の状況を確認しましょう。

注意すべきポイントとトラブルシューティング

よくある問題と対処法

1. デザインの崩れ

問題： CSS削除後にデザインが崩れる 対処法：

バックアップから復元
削除したCSSを段階的に戻す
ブラウザのキャッシュをクリア

2. 機能の不具合

問題： JavaScriptと連動するCSS機能が動作しない 対処法：

動的に生成されるクラスのCSSは削除しない
ホバーエフェクトなどのインタラクション用CSSは保持

3. モバイル表示の問題

問題： スマートフォンでの表示が崩れる 対処法：

メディアクエリを削除していないか確認
レスポンシブデザイン用CSSを復元

削除してはいけないCSSの見極め

1. フレームワーク系CSS

Bootstrap、Foundation等のフレームワークのコアCSSは削除に注意が必要です。

2. 疑似クラス・疑似要素

:hover、:focus、:active
::before、::after
これらは通常の状態では検出されにくいため、誤削除に注意

3. メディアクエリ

レスポンシブデザインに必要なメディアクエリは、デスクトップでの測定では検出されない場合があります。

高度なテクニック：PurgeCSSとBuildプロセス

PurgeCSSによる本格的な最適化

PurgeCSSは、Node.jsベースの高性能なCSS最適化ツールです。

インストールと基本設定

Copynpm install --save-dev purgecss

設定ファイル（purgecss.config.js）

Copymodule.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/css/*.css'],
  output: './dist/css/',
  fontFace: true,
  keyframes: true,
  variables: true,
  whitelist: ['body', 'html'],
  whitelistPatterns: [/tooltip/],
  whitelistPatternsChildren: [/tooltip/]
}

実行

Copynpx purgecss --config purgecss.config.js

Webpackとの連携

Webpackを使用している場合、PurgeCSSを組み込むことで、ビルドプロセスで自動的にCSS最適化が実行されます。

Copy// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync('./src/**/*', { nodir: true }),
      safelist: ['body', 'html']
    })
  ]
}

実際の改善事例：Before & After

事例1：企業サイトの改善

改善前：

PageSpeed Insightsスコア: 45点
未使用CSS: 180KB
ページ読み込み時間: 4.2秒

改善後：

PageSpeed Insightsスコア: 78点
未使用CSS: 12KB
ページ読み込み時間: 1.8秒

改善内容：

WordPressテーマの不要CSS削除
プラグインCSS最適化
条件分岐による読み込み制御

事例2：ECサイトの改善