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

WordPressウェブサイトの所有者として、私たちは皆、高速で最適なユーザーエクスペリエンスを提供することを目指しています。これは訪問者を惹きつけるだけでなく、検索結果でのウェブサイトのランキングを上げるのにも役立ちます。

テーマやプラグインは、多くの場合、ページが必要とする以上のCSSコードを読み込んでいることに気づいていないかもしれません。この未使用のCSSが、あなたのウェブサイトを密かに遅くしている可能性があります。

訪問者がダウンロードしなければならないコードの追加行はすべて、読み込み時間に貴重な秒数を追加します。そして今日の世の中では、1秒の遅延でも訪問者や売上を失う可能性があります。

そのため、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が動的にコンテンツを読み込む仕組み上、未使用のCSSを100%完全に削除することはほぼ不可能です。インタラクティブな要素、条件付きコンテンツ、さまざまなページタイプのために、一部のCSSは準備しておく必要があります。

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

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

1. WP Rocketを使用してWordPressの未使用CSSを削除する
2. Remove Unused CSS in WordPress Using Asset CleanUp

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

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

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

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

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

次に、下にスクロールして「CSSファイル」セクションに移動し、「未使用CSSの削除（ベータ版）」オプションの横にあるチェックボックスをオンにします。

WP Rocketのこの機能はベータ版であるため、設定を有効にするかどうかを再度確認されます。「未使用CSSの削除を有効にする」ボタンをクリックして進んでください。

「未使用CSSの削除」オプションが有効になったら、「CSSセーフリスト」ボックスの下に削除しないCSSファイル名、ID、またはクラスを指定できます。

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

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

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

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

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

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

WordPressでレンダリングをブロックするCSSを削除する

WP Rocketを使用すると、CSSファイルを最適化し、ウェブサイトからレンダリングブロックCSSを削除できます。

まず、WP Rocketの「ファイル最適化」タブに移動できます。そこから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を削除する

この方法は少し高度ですが、信じられないほど強力で、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 に関する通知の変化を確認できます。

WordPressのパフォーマンスを向上させるための専門家ガイド

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。