WordPressで未使用のCSSを削除する方法（2つの簡単な方法）

インストールするすべてのテーマとプラグインは、WordPress サイトに不要な CSS を追加する可能性があります。 これにより、ロード時間が遅くなる可能性があります。 通常、これらのスタイルシートは、ページのコンテンツをレンダリングするためには必要ありませんが、コードにはまだ存在しています。 そのため、WordPress で使用されていない CSS を簡単に削除する方法を探しているかもしれません。

幸いなことに、プロセスは思ったより簡単です。 サイトの不要なコードを特定したら、プラグインを使用してコードを削除し、サイトの速度を改善できます。

未使用の CSS を削除する必要がある理由

未使用の CSS は、ページを読み込むために実際には必要のないコードです。 WordPress に関しては、通常、サイトにインストールするテーマやプラグインに含まれています。

その後、ユーザーが Web サイトにアクセスすると、ブラウザはこの未使用の CSS をダウンロードしてレンダリングする必要があります。 これにより読み込み時間が長くなり、サイトの全体的なパフォーマンスに悪影響を及ぼす可能性があります。

実際、CSS を使用しないと、Core Web Vitals の Largest Contentful Paint (LCP) スコアが低くなる可能性があります。

Largest Contentful Paint は、ページが画面上で最大のアイテムを完全にロードするのにかかる時間を測定する指標です。 これは通常、ヒーロー画像などの視覚的要素です。

簡単に言えば、未使用の CSS コードはページを肥大化させます。 その結果、画像などのコンテンツの読み込みに時間がかかります。

サイトの速度が遅いと、潜在的なコンバージョンを逃している可能性があります。 さらに、検索結果のランキングの低下につながる可能性があります。 したがって、未使用の CSS を削除してサイトを高速化するための適切な対策を講じることが重要です。

サイトで使用されていない CSS を特定する方法

幸いなことに、サイトで使用されていない CSS を特定するのは簡単です。 PageSpeed Insights でパフォーマンス テストを実行することから始めることができます。 URL を入力してAnalyzeをクリックするだけです。

テストの準備ができたら、 [機会]セクションに移動し、[未使用の CSS を減らす]タブを探します。 クリックすると、このコードに関する詳細情報が表示されます。

また、読み込み時間に影響を与えている CSS ファイルとプラグインも表示されます。

未使用の CSS を削除するためのオレンジ色の四角は「改善が必要」を意味し、赤い三角形は非常に低いスコアを表します。 テスト結果にこのセクションが表示されない場合は、サイト (または少なくともテストした特定のページ) に重大な CSS 問題がないことを意味します。他のページをテストして確認することをお勧めします。 ）。

WordPressで使用していないCSSを削除する方法

PageSpeed Insights がサイトで未使用の CSS にフラグを立てた場合は、サイトのパフォーマンスを最適化するために削除する必要があります。

これを行うには、すべての面倒な作業を行う WordPress プラグインを使用します。 または、手作業が必要な別のプラグインを使用することもできますが、報酬として、プロセスをより細かく制御できます。 このセクションでは、簡単な方法から始めて、両方の方法について説明します。

方法 1: Debloat を使用して未使用の CSS を削除する

すでに説明したように、「未使用」の CSS は必須ではありません。 したがって、これらのファイルを削除しても、Web ページのデザインには影響しません。

ただし、誤って間違ったコードを削除すると、サイトが壊れる可能性があります。 そのため、コーディングに慣れていない場合は、プラグインを使用して未使用の CSS を削除することをお勧めします。

そのことを念頭に置いて、未使用の CSS コードを削除するために Debloat をお勧めします。 これは無料の最適化プラグインであり、レンダリングをブロックするリソースを遅らせたり、コードを縮小したりすることで、Core Web Vitals を改善するのにも役立ちます.

開始するには、サイトにプラグインをインストールして有効にする必要があります。 次に、 [設定] > [デブロート: 最適化]に移動し、 [CSS の最適化] タブを選択します。

上部に、未使用の CSS を削除する予定がある場合は、キャッシュ プラグインを使用するように勧めるメッセージが表示されます。 これに興味がある場合は、W3 Total Cache や WP-Optimize などの無料ツールを試すことを検討してください。

次に、ページの一番下までスクロールして、 [未使用の CSS を削除]のボックスをオンにします。

これにより、他のいくつかのオプションが表示されます。 ただし、コードの扱いに慣れていなくても心配はいりません。いくつかの設定を選択するだけで済みます。

Enable for Plugins CSSとEnable for Theme CSS のチェックボックスをオンにします。

次に、 Remove CSS Onまで下にスクロールし、 All Pagesのボックスを選択します。

準備ができたら、 [変更を保存]をクリックします。 プラグインは、プラグインとテーマ ファイル内の未使用の CSS を削除します。

この方法は 100% 正確ではなく、未使用のコードが見落とされる可能性があることに注意してください。 それでも、これらの設定を有効にした後で別の速度テストを実行すると、サイトのパフォーマンスが大幅に改善されるはずです。

より強力なプラグインを使用したい場合は、WP Rocket を調べてみてください。 このプレミアム ツールには、ページとブラウザーのキャッシュ、GZIP 圧縮、コードの縮小、遅延読み込みなどの最適化機能が満載です。 また、未使用の CSS をサイトから削除することもできます。

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

最初の方法では、不要なコードをサイトから自動的に削除するプラグインを使用しました。 この方法は、いくつかの設定を有効にするだけでよいため、非常に便利です。

ただし、削除するファイルと保持するファイルをより詳細に制御できる方法を探している場合があります。 その場合は、Asset CleanUp の方が適している可能性があります。 このプラグインを使用すると、不要な CSS ファイルをページごとに選択して削除できます。

このアプローチには少し時間がかかり、技術的な知識が必要になる場合があることに注意してください。 さらに、すべてのページを常にテストして更新し、変更がサイトのデザインや機能に影響を与えていないことを確認する必要があります.

ステップ 1: Asset CleanUp プラグインをインストールしてテストモードを有効にする

それでもこの方法を試してみたい場合は、サイトに Asset CleanUp をインストールしてください。 次に、 [アセットのクリーンアップ] > [設定]に移動します。 その後、サイド メニューから[テスト モード]を選択し、トグル スイッチを使用してこの機能を有効にします。

これにより、サイトに加えた変更がフロント エンドのユーザー エクスペリエンスに影響を与えることはありません。 安全な環境で未使用の CSS ファイルを削除し、すべてが正常に機能していることを確認したら、テスト モードを無効にすることができます。

ステップ 2: すべてのページで未使用の CSS ファイルをアンロードする

次に、 [CSS & JS Manager]タブをクリックします。 ここでは、ホームページから始めて、サイトから不要なファイルを削除できます。

下にスクロールすると、ロードされたすべてのファイルのリストがこのページに表示されます。

CSS ファイルを削除するには、このページの [アンロード]のトグル スイッチを使用するだけです。

Asset CleanUp は、このファイルに依存し、削除によって影響を受ける可能性のある「子」ファイルがあるかどうかを通知します。 これらのファイルを維持するために、依存関係ルールを無視するチェックボックスをオンにして、「子」をロードしたままにすることができます。

どの CSS ファイルを削除すればよいかわからない場合は、PageSpeed Insights で結果を参照できます。 これらのファイルの URL が[未使用の CSS を減らす]セクションに表示されます。

その後、Asset CleanUp でそれらを探すことができます。 [ページ]タブに移動すると、サイトの特定のページを検索して、そこに読み込まれている CSS ファイルを確認できます。

アンロードするファイルを選択したら、 [更新]をクリックしてこれらの変更を保存する必要があります。

ステップ 3: サイトをテストする

最後に、ファイルを削除するたびにサイトをテストして、正しく機能していることを確認することをお勧めします。 これらの変更を確認するには、WordPress 管理ダッシュボードにログインする必要があることに注意してください。 訪問者 (つまり、ログアウトしたユーザー) としてサイトにアクセスする場合、テスト モードが有効になっているため、ページの問題を見つけることはできません。

また、テスト モードを有効にしている限り、PageSpeed Insights で改善が見られないことに注意することも重要です。 結果には未使用の CSS ファイルが表示されます。

削除されたファイルがサイトに影響を与えていないことを確認したら、テスト モードを無効にすることができます。 次に、PageSpeed Insights で速度テストを実行します。 この時点で、削除された CSS ファイルは結果に表示されません。

未使用の CSS を削除するプレミアム WordPress プラグイン

上記のツールはどちらも無料ですが、お金を払えば、未使用の CSS を削除するための非常にシンプルな WordPress プラグインを見つけることもできます。

最適なオプションの 2 つは、WP Rocket (59 ドルから) と FlyingPress (60 ドルから) です。

WP Rocket を使用すると、サイト全体をスキャンして未使用の CSS をページごとに削除する、未使用の CSS をワンクリックで削除する機能を利用できます。

FlyingPress は、未使用の CSS をより最適な方法でロードしたり、完全に削除したりするオプションを備えた、同様のワンクリックの未使用の CSS 削除も提供します。

どちらのツールも、独自のサーバーでサイトのコードを処理することに依存しているため、ページごとの単純な削除アプローチを提供できます.

未使用の CSS を削減するためのヒント

サイトで未使用の CSS (または少なくともその大部分) を削除したら、今後は不要なコードを追加しないようにする必要があります。 この面では、サイトをスムーズに運営し続けるためにできることがいくつかあります。

まず、軽量テーマを使用していることを確認してください。 一般的に言えば、軽量の WordPress テーマは高速な WordPress テーマです。 簡単に言えば、テーマは最小限のコードを含み、Core Web Vitals 向けに最適化されている必要があります。

たとえば、Neve テーマは速度とパフォーマンスを優先します。 実際、デフォルトの WordPress インストールでは、このテーマの読み込みに 1 秒もかからず、ファイル サイズは 28 KB です。

同様に、サイトには軽量のプラグインを選択する必要があります. プラグインを参照するときに軽量タグを探すことができます。

新しいプラグインをインストールした後、速度テストを実行することをお勧めします。 これにより、未使用の CSS が含まれているかどうかを確認できます。

さらに、サイトのプラグインの数を制限してみてください。 これにより、ページに未使用の CSS が含まれる可能性を最小限に抑えながら、全体的なパフォーマンスを向上させることができます。

そのため、不要になったプラグインがある場合は、それらを削除することを検討してください。 それらを非アクティブ化するだけでは不十分な場合があることに注意してください。不要なコードが読み込まれ、データベースのスペースが占有される可能性があります。 したがって、それらをサイトから完全に削除することが重要です。

未使用の CSS を Web サイトから今すぐ削除する

サイトから削除することで、Core Web Vitals のパフォーマンスを改善し、ユーザー エクスペリエンスを向上させることができます。

要約すると、WordPress で未使用の CSS を削除する方法は次のとおりです。

サイトの Core Web Vitals メトリクスを改善するその他の方法については、Largest Contentful Paint を高速化する方法と Cumulative Layout Shift を減らす方法に関するガイドを読むこともできます。

WordPress で未使用の CSS を削除する方法について質問がありますか? 以下のコメントセクションでお知らせください！