WordPressで使用していないCSSとJSを削除する方法（とても簡単）

公開: 2020-05-18

Web サイトに未使用の CSS や JS がたくさんあると、Web サイトの読み込み時間が長くなる可能性があります。 Google PageSpeed Insight などの速度テストツールを使用して Web サイトを実行すると、未使用の CSS を削除するよう警告が表示される場合があります。

ありがたいことに、それを行うための非常に簡単な方法があります。 WordPress サイトから未使用の CSS と JS を削除するのに、特別な技術的知識は必要ありません。

これは、Asset CleanUp: Page Speed Booster という素晴らしいプラグインのおかげです。このプラグインを使用すると、いくつかのボタンをクリックするだけで、未使用の CSS を簡単に削除できます。または、年間数ドルを費やすことを気にしない場合は、WP Rocket を使用して未使用の CSS ボタンを削除します。それをアクティブにすると、プラグインが未使用の CSS をすべて自動的に削除します。

チェックアウト:トップ 7 マネージド Google Cloud WordPress ホスティング

未使用CSSとは？

未使用の CSS は、ページに存在する CSS ファイルですが、ページの読み込みにはほとんど必要ありません。訪問者が Web サイトを開くと、ブラウザーは通常、訪問したページのすべての外部スタイルシートをダウンロード、解析、および処理してから、ページのコンテンツを訪問者に表示する必要があります。ページで使用されていない CSS がそのようなページに存在する場合、ブラウザーはそのページで時間を浪費します。

この典型的な例は、使用されているほとんどのコンタクトフォームプラグインです。これらのプラグインは、ほとんどがお問い合わせページでのみ使用されますが、Web サイト全体に CSS をロードします。使わないホームページでも構いません、CSSは読み込まれます。

不要な CSS が多すぎると、ページを読み込んで表示するブラウザの時間が遅くなり、問題になる可能性があります。

プラグインとは別に、テーマ開発者は style.css に多くのことを書きますが、それらはほとんど必要ありません。しかし、必要かどうかにかかわらず、サイトがロードされるたびにロードされます!

1 つの未使用の CSS は問題にならないかもしれませんが、未使用の CSS が多数あると Web サイトの読み込み時間に影響を与える可能性があります。

チェックアウト:トップ 10 最速かつ最高の WordPress テーマ

未使用の CSS を特定する方法

未使用の CSS と JS を見つけるのは非常に簡単です。私が推奨する2つのアプローチがあります。

1 つは、Google PageSpeed Insight を使用して Web サイトを分析することです。 Web サイトに未使用の CSS の削除の問題があるかどうかを確認します。それをクリックすると、それを担当するサイトのコンポーネントを特定できます。

上から見ると、未使用の CSS が記録されているケースが 1 つあります。これを見ると、プラグインと未使用の CSS の場所がわかります。

2 番目のオプションは、より詳細な分析を取得することです。これは、Chrome 開発ツールを使用して実現できます。

Chrome ブラウザーで Chrome Dev tools を開き、カバレッジに移動します。次に、カバレッジエリア内のリロードボタンをクリックします。 Google Developers ツールで、これを行う方法に関する包括的なガイドを見つけることができます。

もう 1 つのオプションは、jitbit を使用して未使用の CSS セレクターをスキャンすることです。 PurifyCSS を使用して未使用の CSS を見つけることもできます

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

WordPress から未使用の CSS を削除するには、次の手順に従います。

1. Asset CleanUp をインストールする

プラグインに移動し、新規追加します。次に、[新しいプラグインの追加] ページの検索ボックスに「Asset CleanUp」と入力します。プラグインをインストールして有効化します。

2. プラグイン設定に移動します

プラグイン設定にアクセスするには、WordPress ダッシュボードから [設定] をクリックし、[アセットのクリーンアップ] をクリックします。

3. 不要な CSS と JS をアンロードする

プラグインの設定では、開始する前にプラグインがストリッピングファットタップでどのように機能するかを理解している必要がある場合があります。

CSS と JS をアンロードするには、CSS と JSS マネージャーをクリックします。そこから、不要な CSS と JS を削除できます。ホームページのみ、サイト全体、または特定の URL に対して削除できます。投稿、ページ、またはカテゴリを削除することもできます。

例としては、お問い合わせページを除くサイト全体の読み込みからお問い合わせフォームをアンロードすることです。

時間をかけて、不要であることがわかっているすべての CSS と JS をアンロードしてください。すべてが正常であることを確認するために、完了後にサイトをテストしてください。

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

WordPress で使用されていない CSS を削除するために使用できるプラグインを次に示します。

1.アセットクリーンアップ：ページスピードブースター

Asset CleanUp: Page Speed Booster を使用すると、初心者でも WordPress で使用されていない CSS と JS を簡単に削除できます。特定のページに不要な特定の CSS を無効にするだけです。

個々の投稿のみを無効にすることもできます。プレミアム版では、未使用の CSS/JS をプラグインで無効化できます。

このプラグインは、WordPress を高速化するための他の多くのオプションを備えた完全なパフォーマンスプラグインです。未使用の CSS/JS の削除はその一部です。

この投稿では、ガイド付きのこのプラグインを使用しました。

2.WPロケット

WP Rocket は、最高の WordPress プレミアムパフォーマンスプラグインです。あなたが初心者の場合、つまり、WordPress の経験がないか慣れていない場合は、WP Rocket が未使用の CSS を削除する最も簡単な方法です。

プラグインを購入する必要があります。購入が完了したら、アカウントからダウンロードするか、電子メールでダウンロードリンクを確認できます。

[ダッシュボード] > [プラグイン] > [新規追加] > [アップロード] からプラグインをインストールします。

WP Rocket の設定に移動し、[ファイルの最適化] タブをクリックします。次に下にスクロールすると、「未使用の CSS を削除する」が表示されます。ボックスにチェックを入れて保存し、キャッシュをクリアします。

3.Perfmatters

Perfmatters は、Brian Jackson と彼の兄弟である Brett Jackson によって開発されたプレミアムプラグインです。このプラグインは、未使用の CSS を非常に簡単に削除するのに役立ちます。

まず、プラグインを購入する必要があります。次に、インストールします。ライセンスを有効にします。設定に移動したら、スクリプトマネージャーをオンにします。

Web サイトの任意のページまたは投稿に移動するだけで、ダッシュボードメニューにスクリプトマネージャーアイコンが表示されます。それをクリックします。未使用の CSS と JS をページから、またはグローバルに削除できます。

このプラグインはパフォーマンスプラグインであり、WordPress を高速化するための他の多くのオプションが付属しています。未使用の CSS/JS の削除もその一環です。

4.CSS JS マネージャー

CSS JS Manager は、モバイルまたはデスクトップから CSS または JS を明確に削除できます。あなたが達成したいものに応じて。

このプラグインは、CSS または JS ファイルの読み込みを遅らせることもできます。

結論

未使用の CSS と JS がたくさんある場合は、速度とパフォーマンススコアが大幅に向上することに気付くでしょう。

未使用の CSS をすべて削除することは不可能かもしれませんが、最小限に抑えることはできます。 Asset CleanUp を使用して、TargetTrend の未使用の CSS を削除します。

サイトを世界最速の Web サイトに見せたい場合を除き、最適化を行いますが、あまり夢中にならないでください。

また読む：

WordPress でレンダリングをブロックするリソースを排除する方法

WordPressを非常に高速にする方法

ブログにトラフィックを誘導する方法