WordPress で未使用の CSS を削除する方法（正しい方法）

ウェブサイトの表示速度が遅いと、訪問者は不満を感じ、ビジネスにも悪影響が出ます。ページの読み込みに時間がかかりすぎると、ユーザーは離脱し、検索ランキングも低下します。

多くの場合、隠れた問題は、テーマやプラグインを散らかしている未使用のCSSコードです。この余分なコードは、何も有用なことをせずにページの重さを増します。

私たちは何百ものWordPressサイトの速度を最適化してきましたが、このコードをクリーンアップすることで大きな違いが生まれることがわかりました。これにより、サイトはCore Web Vitalsテストに合格し、ユーザーエクスペリエンスが向上します。

このガイドでは、WordPressで未使用のCSSを削除してサイトを高速化する方法を説明します。

WordPressにおける未使用CSSとは？

WordPressにおける未使用CSSとは、ウェブページに読み込まれるものの、その特定のページで実際に表示されているものをスタイルするために使用されていないCSSコードのことを指します。

この余分なコードは、訪問者のブラウザに不要なファイルをダウンロードして処理させるため、ページの読み込み時間が遅くなります。ほんの数秒の違いでも、ユーザーエクスペリエンスや検索エンジンのランキングに悪影響を与え、訪問者やコンバージョンを失う可能性があります。

Google Pagespeed Insightsでサイトを実行することで、未使用CSSがサイトに影響を与えているかどうかを簡単に確認できます。「未使用CSSを削除」という警告を結果で探してください。これにより、何が原因で遅延が発生しているかが正確にわかります。

WordPressはなぜ未使用のCSSを読み込むのか？

実は、WordPressは読み込むCSSを選り好みするように設計されていません。WordPressテーマには、マスターのスタイルシート（通常はstyle.cssと呼ばれます）が付属しており、これには、使用しない可能性のある要素であっても、あらゆる可能な要素のスタイリングルールが含まれています。

しかし、テーマだけがすべてではありません。インストールするプラグインごとに、独自のCSSファイルが追加されます。WooCommerceはショップのスタイルをすべてのページ（ブログ投稿でさえ）に読み込み、ページビルダーはグローバルにCSSを読み込み、コンタクトフォームプラグインはフォームのないページにフォームのスタイルを読み込みます。

カスタムフォント、アイコンライブラリ、その他のデザイン要素を追加すると、多くのCSSの肥大化につながります。個々のファイルは小さくても、すぐに積み重なってサイトの速度に影響を与えます。

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

さて、良いニュースです。WordPressウェブサイトの未使用CSSをクリーンアップするための効果的な方法がいくつかあります。私たちは複数のアプローチをテストし、サイトを壊すことなく確実に機能する方法を見つけました。

まず知っておくべきことは、WordPressがコンテンツを動的に読み込む仕組みのため、100%の未使用CSSを完全に排除することはほぼ不可能であるということです。インタラクティブな要素、条件付きコンテンツ、さまざまなページタイプのために、一部のCSSは準備しておく必要があります。

しかし、心配しないでください。完璧でなくても、大幅な改善が見込めます。未使用CSSの50〜70％を削除するだけでも、サイトの速度は劇的に向上します。

パフォーマンスの向上とサイトの安定性のバランスを適切に取った、実証済みの2つの方法をご紹介しますので、ご自身の快適レベルに合ったアプローチを選択できます。

方法1：WP Rocketを使用してWordPressで未使用のCSSを削除する

この方法はより簡単で、初心者におすすめです。WordPressウェブサイトでのCSSファイルの配信全体が大幅に改善され、ほとんどの不要なCSSが削除されます。

初心者にとって最良のソリューションだと考えています。なぜなら、より簡単で、ユーザーにより良いエクスペリエンスを提供するという主な目標を達成できるからです。これは、ウェブサイトがスピードテストツールで高速に読み込まれ、ユーザーにとっても高速に感じられることを意味します。

まず、WP Rocketプラグインをインストールして有効化する必要があります。これは有料プラグインですが、技術的な知識なしでタスクを完了する最も簡単な方法です。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、設定 » WP Rocket ページにアクセスし、「ファイル最適化」タブに切り替える必要があります。

次に、CSS Filesセクションまでスクロールダウンし、「Remove Unused CSS」オプションの横にあるチェックボックスをオンにします。

チェックボックスをオンにすると、確認メッセージが表示される場合があります。「Activate Remove Unused CSS」ボタンをクリックして進んでください。

オプションが有効になると、「CSS safelist」ボックスが表示されます。これにより、削除すべきでないCSSファイル名、ID、またはクラスを指定できます。この機能は、設定を有効にした後にサイトの一部が壊れているように見える場合にのみ使用する必要があります。

単にボックスに入力してください。

次に、下にスクロールして「変更を保存」ボタンをクリックして、変更を保存する必要があります。

これを行うと、WP RocketはCSSファイルの処理を開始し、進捗バーを表示します。

プラグインがウェブサイトから未使用のCSSファイルを処理して削除するには、数分かかります。

プラグインがプロセスを完了すると、「未使用CSSの削除が完了しました！」というメッセージが表示されます。

さて、GoogleのPageSpeed Insightsツールにアクセスして、サイトのパフォーマンスをテストしてください。

代替案：CSS配信の最適化（フォールバック方法）

上記の「未使用CSSの削除」方法がサイトで機能する場合、この手順は不要です。すでにレンダリングブロックCSSを処理しています。

ただし、前の方法でサイトのレイアウトが壊れてしまい、無効にした場合は、代替として「CSS配信の最適化」オプションを使用できます。

これを行うには、CSSファイルセクションの「CSS配信の最適化」オプションの横にあるチェックボックスをオンにするだけです。

このオプションは、ウェブサイトの表示に必要なCSSコードのみを含むCSSファイルを生成します。そのファイルを最初に読み込み、訪問者にページを表示してから、デファードローディングと呼ばれる技術を使用して他のCSSファイルを読み込みます。

このレンダリングをブロックするCSSを削除することで、すべてのCSSファイルを読み込む前にページが表示される場合よりも、はるかに迅速にユーザーにウェブサイトが表示されるようになります。

「CSS配信の最適化」オプションを有効にした後、「変更を保存」ボタンをクリックし、WP Rocketが必要なCSSファイルをすべての投稿とページ用に生成するのを待ちます。また、ウェブサイトのキャッシュも自動的にクリアされます。

完了したら、Google PageSpeed Insightsを使用してウェブサイトのパフォーマンスを再度テストできます。

パフォーマンス向上のための追加ファイル配信調整

WP Rocketは、静的ファイルからクエリ文字列を削除したり、Googleフォントファイルを結合したり、HTMLを最小化したりすることもできます。

これらの調整はすべて、全体的な速度にわずかな改善を加え、それが積み重なって訪問者にとってより高速な読み込み体験になります。

CSSファイルを圧縮して結合するオプションも表示されます。これらのオプションはHTTPリクエストを削減し、さらなるスピードアップをもたらします。

ただし、これらの設定を有効にした後、何も壊れていないことを確認するために、ウェブサイトを注意深く確認する必要があります。

さらに、ウェブサイトのJavaScriptファイルにも同様の最適化を適用できます。

JavaScriptファイルを単一のファイルにまとめて提供し、読み込みを遅延させることで、パフォーマンスを向上させることができます。

詳細については、WordPressでWP Rocketを正しく設定する方法に関するステップバイステップチュートリアルを参照してください。

方法2：Asset CleanUpを使用してWordPressで未使用のCSSを削除する

この方法は、無料のAsset CleanUpプラグインを使用します。少し手動ですが、WordPressサイトの任意のページから特定の未使用CSSを削除する完全な制御が可能です。

サイトのトラブルシューティングに慣れている場合は、この方法をお勧めします。何も壊れていないことを確認するために、サイトを徹底的にテストする必要があります。

まず、Asset Cleanupプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、Asset CleanUp » Settings ページにアクセスし、Test Mode タブに切り替える必要があります。ここで、「Enable Test Mode」オプションをオンにする必要があります。

これにより、ウェブサイトの訪問者に影響を与えることなく、管理者としてさまざまな設定を試したりテストしたりできます。

その後、Asset CleanUp » CSS/JS Managerページにアクセスする必要があります。ここから、ページごとに不要なCSSおよびJavaScriptファイルをアンロードできます。

設定によっては、ホームページを自動的に取得して分析する場合があります。そのページで読み込まれているすべてのCSSおよびJavaScriptファイルのリストが表示されます。

下にスクロールして読み込まれたファイルを確認する必要があります。不要なファイルが表示された場合は、特定のページ、投稿タイプ、またはサイト全体で無効にすることができます。

このプラグインでは、ここから特定の投稿またはページを選択することもできます。または、通常どおり投稿またはページを編集することで同じオプションにアクセスすることもできます。

投稿編集画面では、投稿エディターのすぐ下にAsset CleanUpボックスが表示されます。

プラグインは、訪問者がウェブサイトでこのページを表示したときに読み込まれるすべてのファイルとアセットを自動的に取得して一覧表示します。

その後、そのページで必要のない未使用のCSSまたはJavaScriptファイルを簡単にアンロードできます。

重要：未使用のCSSまたはJavaScriptを削除した後、すべてが正常に機能していることを確認するために、必ずウェブサイトをテストしてください。

不要なCSSおよびJavaScriptファイルのアンロードと削除が完了したら、プラグインの設定ページに戻り、「テストモード」をオフにすることができます。

変更を保存するために、「Update All Settings」ボタンをクリックすることを忘れないでください。

これで、Google PageSpeed Insights を使用してウェブサイトをテストし、未使用の CSS に関する通知の変化を確認できます。

未使用のCSSに関するよくある質問

多くの読者から、スタイルシートのクリーンアップの安全性と影響について質問されます。WordPressで未使用CSSを削除することに関する最も一般的な質問への回答を以下に示します。

1. WordPressで未使用CSSを削除しても安全ですか？

WP RocketやAsset CleanUpのような評判の良いプラグインを使用すれば、未使用CSSの削除は一般的に安全です。これらのツールは、サイトが正しく表示されるために必要なコードを維持しようとします。ただし、スタイリングは複雑になる可能性があるため、レイアウトが壊れるリスクは常にわずかに存在します。

これらの変更を適用する前に、Duplicatorのようなバックアッププラグインを使用してサイトを保存することを強くお勧めします。

2. 未使用CSSを100％削除できないのはなぜですか？

WordPressはページを動的に作成するため、未使用のCSSのすべての行を削除することはほぼ不可能です。

一部のスタイルは、モバイルメニューのスライドアウトやポップアップの表示など、特定の操作が発生するまで非表示になっています。この「未使用」コードを削除すると、これらのインタラクティブ機能は機能しなくなります。

プラグインがすぐに表示されないすべてのCSSを削除した場合、WordPressサイトのインタラクティブ機能が正しく機能しなくなる可能性があります。

3. 未使用のCSSを削除するとSEOランキングに役立ちますか？

はい、未使用のCSSを削除すると、WordPressのSEOランキングを向上させるのに役立ちます。Googleのような検索エンジンは、ページの読み込み速度をランキング要因として考慮しています。CSSファイルのサイズを小さくすると、ウェブページの読み込みが速くなり、Googleにサイトが優れたユーザーエクスペリエンスを提供していることを示すことができます。

4. プラグインなしで未使用のCSSを手動で削除できますか？

経験豊富な開発者でない限り、未使用のCSSを手動で削除しようとすることは推奨しません。テーマやプラグインファイルから特定のコード行を特定して削除する必要があります。

これらのファイルを直接編集中に間違いを犯すと、WordPressウェブサイト全体のデザインが壊れる可能性があります。

WordPressパフォーマンス改善に関する追加リソース

この記事が、WordPressで不要なCSSを簡単に削除する方法を学ぶのに役立ったことを願っています。WordPressのパフォーマンスを向上させるための他のガイドもご覧になりたいかもしれません。

• WordPressの速度とパフォーマンスを向上させるための究極のガイド
• WooCommerceのパフォーマンスを高速化する方法
• ウェブサイトのスピードテストを適切に実行する方法（最適なツール）
• WordPressサイトで測定すべき重要な指標
• WordPressでCore Web Vitalsを最適化する方法（究極のガイド）
• GTmetrixプラグインを使用してWordPressサイトのパフォーマンスを改善する方法
• WordPressのCSS配信を簡単に最適化する方法
• 最速のWordPressホスティング（パフォーマンステスト）
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法
• ウェブサイトを高速化する最高のWordPressキャッシュプラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。