WordPressで未使用のCSSを削除（または遅延読み込み）してサイトを高速化する方法

WordPressサイトから未使用のCSSを削除して、ウェブサイトをもっと速くしたいと思いませんか？

ウェブサイト最適化の重要な目標のひとつは、不要なコードを取り除くことです。これによりページ全体のサイズが減り、読み込み時間が短縮され、訪問者により快適なユーザー体験を提供できます。

ページサイズを大きく削減できる分野のひとつが「スタイリング」です。ウェブサイトのスタイリングは、HTMLやJavaScriptと並ぶWebの中核技術であるCSS（Cascading Style Sheets：カスケーディングスタイルシート）と呼ばれるルールベースの言語によって制御されています。

CSSは、ページの色、フォント、背景、画像の装飾、マージン、パディングなどを定義するために使われます。以下の例では、見出しを中央揃えにし、赤色で表示するよう指定しています。

h1 {
  text-align: center;
  color: red;
}

典型的なWordPressサイトでは、ページを正しく表示するために多くのスタイルシートが必要になります。WordPress本体が使用するCSSに加えて、有効化しているテーマやプラグインもそれぞれCSSを読み込むため、サイト全体で十数個のCSSファイルが必要になることも珍しくありません。

CSSファイルが大きすぎたり、読み込むファイル数が多すぎたりすると、ページの読み込み時間が長くなります。この問題に対処するための主なテクニックは以下の通りです。

CSS最適化テクニック	内容
遅延読み込み（Defer）	重要度の低いCSSの実行を、ページの読み込み完了後まで延期する
圧縮（Minify）	空白・タブ・改行・コメントを削除してファイルサイズを小さくする
結合（Combine）	複数のCSSファイルを1つにまとめ、HTTPリクエスト数を減らす

CSSの軽量化をさらに進めたいなら、WordPressで未使用のCSSルールを削除し、訪問者に必要なスタイルだけをダウンロードさせることをおすすめします。ブラウザが不要なCSSコードを読み込まないようにすることで、ページの読み込みが速くなり、ユーザー体験も向上します。

それでは、未使用CSSとは何かを詳しく見ていきながら、WordPressサイトから未使用のCSSを取り除く方法を解説していきます。

WordPressにおける未使用CSSとは？なぜ発生するのか

未使用CSSとは、現在表示しているページで実際には呼び出されていないCSSルールのことです。これは非常に頻繁に起こります。というのも、1つのページがスタイルシート内のすべてのCSSルールを必要とすることはほとんどないからです。例えば、スタイルシートに「見出しを赤色で表示する」というルールが含まれていても、そのページで実際に使われていなければ、それは未使用CSSとして分類されます。

ブラウザは未使用のCSSルールを必要としないため、そのコードはCSSファイルのサイズを無駄に増やしているだけです。つまり、WordPressから未使用のCSSコードを削除すれば、ページの読み込み時間を改善できるのです。

WordPressテーマはstyles.cssをメインのスタイルシートとして使うことが求められていますが、フォントやテーマスキンなどのデザイン要素のために追加のスタイルシートを読み込むテーマも一般的です。テーマのCSSファイルに含まれる多くのルールは特定の場面でしか必要ありません。それにもかかわらず、これらのCSSファイルは通常、サイトのすべてのページで読み込まれています。

特に問題なのがWordPressプラグインです。開発者がデフォルトですべてのページでスタイルシートを読み込むようにしているケースが多いため、未使用CSSが大量に発生しがちです。

プラグインの種類	未使用CSSの例
ページビルダー	そのページで使われていないコンテンツブロック用のスタイルまで読み込む
コンテンツスライダー	ホームページでしか使わないのに、サイト全体でスライダーのスタイルシートを読み込む
お問い合わせフォーム	お問い合わせページでしか使わないのに、サイト全体でフォームのスタイルシートを読み込む

WordPressで未使用CSSを削除するのは良い習慣ですが、サイトデザインに不可欠なCSSコードを誤って削除すると、デザインが崩れてしまうので注意が必要です。

クリティカルCSSとは何か

よく耳にするもうひとつの用語がクリティカルCSS（Critical CSS）です。これは、スクロールせずにすぐ表示される部分（ファーストビュー／Above the Fold）のコンテンツを描画するために必要なスタイルのことです。ファーストビューのコンテンツが読み込まれるまでの時間はFirst Contentful Paint（FCP）と呼ばれます。

Googleは、クリティカルCSSを抽出・圧縮し、HEAD要素内にインラインで記述することでFirst Contentful Paintを速くすることを推奨しています。また、重要度の低いCSSファイルは遅延読み込み（Defer）を使って後から読み込むことで、初期表示への影響を避けられます。

未使用CSSを見つける方法

ページの未使用CSSを手軽に確認するには、GTmetrix、Google PageSpeed Insights、Pingdom Website Speed Testなどのパフォーマンス計測ツールにURLを入力してみましょう。レポートに未使用のCSSが表示され、未使用ルールの削除または遅延読み込みが提案されます。

最新のブラウザには、サイトのデザインやコードを分析するための開発者ツールが搭載されています。Google Chromeの開発者ツールは「Chrome DevTools」と呼ばれ、その「Coverage（カバレッジ）」タブを使うことで、未使用のJavaScriptやCSSのコードを特定できます。未使用ルールの多いCSSファイルを素早く効率的に見つける方法です。

Chrome DevToolsを開くには、ページ上で右クリックして「検証（Inspect）」を選択します。次にCoverageタブをクリックすると、各ファイルのURLと、そのファイルがJavaScriptかCSSか（あるいは両方か）が表示されます。右側にはファイルの総サイズ（バイト）と未使用バイト数が表示され、バーの可視化では未使用コードが赤色、必要なコードが青緑色で示されます。下部パネルにサマリーが表示され、特定のファイルをクリックすると、上のパネルで未使用のCSSルールが赤くハイライトされます。

Coverageタブの詳しい使い方は、Chrome DevelopersのCoverageページを参照してください。

そのほかにも、無料・有料のさまざまな未使用CSSツールがオンラインで提供されています。

• JitBit Unused CSS – サイト内の全ページをクロールし、どこでも使われていないCSSセレクターを洗い出せる無料サービス
• PurifyCSS Online – 未使用コードを検出し、クリーンなCSSファイルを生成してくれる無料ツール
• UnusedCSS – ページURLをスキャンし、不要なコードを除去したクリーンなCSSファイルを提供する有料サービス（月額25ドル〜）

Chrome DevToolsやPurifyCSS Onlineのようなツールは、サイトの未使用CSSルールを確認するのに役立ちますが、WordPressのような動的なプラットフォームの未使用CSS問題への対処には必ずしも実用的ではありません。

WordPressのテーマやプラグインはサイト全体で異なるスタイルシートを読み込むため、未使用CSSの量はページごとに変化します。だからこそ、WordPressの最適化プラグインを使って未使用CSSを削除（または遅延読み込み）するのが、一般的にはより良い方法だと考えます。

それでは、WordPressサイトから未使用CSSを取り除くのに役立つおすすめプラグインを詳しく見ていきましょう。

WP Rocketで未使用CSSを削除する方法

WP Rocketは、市場で最も人気のあるWordPressパフォーマンス改善ソリューションのひとつです。ライセンス価格は年額49ドルです。

このプラグインには、ボタン一つでサイトからすべての未使用CSSを削除できる機能が備わっています。バックグラウンドでは、WP Rocketが各ページのすべてのスタイルシートとスクリプトを精査し、HTMLコード内で見つかったCSSセレクターとCSSルールを照合しています。この処理はWP Rocketのサーバー上で外部実行されるため、使用中のWordPressセキュリティプラグインで同社のサーバーIPアドレスをホワイトリストに登録しておきましょう。

WP Rocketは自動的にすべての未使用CSSを削除するため、お問い合わせフォームなどサイトデザインの一部が崩れる場合があります。その際は、該当するCSSファイル、ID、またはクラスをWP RocketのCSS safelist（除外リスト）に追加してください。

関連記事：WordPressデータベースのクリーンアップ方法

Perfmattersで未使用CSSを削除する方法

Perfmattersは、私自身のサイトで未使用CSSの削除に使っている最適化ソリューションです。年額24.95ドルと手頃な価格のプレミアムWordPressプラグインです。

PerfmattersのScript Managerを使えば、サイト内の特定の投稿やページごとに、CSSファイルやJavaScriptファイルの有効・無効を切り替えられます。正規表現、ユーザーのログイン状態、デバイスタイプに基づいて、スクリプト除外の例外設定も可能です。

このプラグインは、最適化が不十分なWordPressプラグインへの対策として非常に効果的だと感じています。例えばJetpackは、フロントエンドでJetpackモジュールを一切使っていなくても、サイトのすべてのページで85.1KBのCSSファイルを読み込みます。下の画像のように、Perfmattersを使えばこの不要なCSSファイルの読み込みを完全に止めることができます。

Asset CleanUpで未使用CSSを削除する方法

Perfmattersの優れた代替手段となるのがAsset CleanUpです。無料で利用でき、有料版（42.08ユーロ）にアップグレードすると、さらに多くの機能が解放されます。

Asset CleanUpのCSS＆JavaScriptマネージャーでは、ファイルのプリロードや、サイト内の特定ページでのファイル無効化が可能です。ログインユーザー向けの例外設定にも対応しています。

Asset CleanUp Proにアップグレードすれば、CSSやJavaScriptファイルが読み込まれる領域をより細かく制御できるほか、画面サイズや正規表現による追加の例外設定も利用できるようになります。

RapidLoadで未使用CSSファイルを削除する方法

Autoptimizeは、CSS・JavaScript・HTMLファイルの集約、圧縮、キャッシュを可能にする効果的なWordPress最適化プラグインです。そしてWordPressプラグイン「RapidLoad Power-Up」はAutoptimizeを拡張し、WordPressでの未使用CSSの削除を支援します。

WP RocketのCSS最適化ツールと同様に、RapidLoad Power-Upも、どのCSSルールが実際に必要かを分析することでページの読み込み時間を短縮します。

名前の通り、このプラグインはRapidLoadというサービスを利用してCSSファイルのサイズを削減します。そのため、RapidLoad Power-Upを使うにはRapidLoadサービスへの登録が必要です。月額プランは月5.83ドルから利用できます。

まとめ

開発者たちは、ウェブサイトの見た目を形作るスタイルシートの最適化に十分取り組んでいるとは言えません。多くのWordPressテーマやプラグインは、特定のページでしか必要ないCSSルールであっても、サイト全体で読み込んでいます。

自分のサイトにどれほどの未使用CSSがあるかを知るには、GTmetrix、Google PageSpeed Insights、Pingdom Website Speed Testなどのパフォーマンス計測ツールでベンチマークを実行することをおすすめします。Chrome DevToolsやPurifyCSS Onlineといった開発者ツールでも、CSSがページに与えている不要な負荷を確認できます。

幸い、WordPressのパフォーマンス改善ソリューションを使えば、未使用CSSを削除できます。プロセスを自動化したいならWP RocketやRapidLoad Power-Upがおすすめです。より手動で細かく管理したい方には、サイトのどの領域でCSSやJavaScriptファイルを読み込むかを完全に制御できるPerfmattersやAsset CleanUpが向いています。

なお、重要なCSSコードを削除するとサイトデザインが崩れる可能性があるため、定期的にページをチェックして、すべてが正常に動作していることを確認してください。

関連記事：WordPressでJavaScriptの解析を遅延させる方法

それでは、良いWordPressライフを！

Kevin