WordPressで未使用のCSSとJSを削除する方法（非常に簡単）
未使用のCSSがたくさんあると、サイトの速度が低下する可能性があります。 Google PageSpeedインサイトを使用してWebサイトをテストすると、未使用のCSSを削除するように警告が表示される場合があります。 コーディングや技術を使わずにそれを行う簡単な方法があります。
ウェブサイトに未使用のCSSやJavaScriptが大量にあると、ウェブサイトの読み込み速度が低下する可能性があります。Google PageSpeed Insightsなどの速度テストツールでウェブサイトをテストすると、未使用のCSSを削除するように警告が表示される場合があります。
ありがたいことに、それを行うための非常に簡単な方法があります。 WordPressサイトから未使用のCSSとJSを削除するために、特別な技術的知識は必要ありません。
これは、 Asset CleanUp: Page Speed Boosterという素晴らしいプラグインのおかげです。このプラグインを使えば、未使用の CSS を数回クリックするだけで簡単に削除できます。あるいは、年間数ドルの費用を気にしないのであれば、WP Rocketというプラグインを使えば、未使用の CSS を削除するボタンがあります。これを有効にするだけで、プラグインが未使用の CSS をすべて自動的に削除してくれます。
チェック：おすすめのマネージド型Google Cloud WordPressホスティング7選
未使用のCSSとは何ですか？
未使用のCSSは、ページに存在するCSSファイルですが、ページをロードするためにほとんど必要ありません。 訪問者がWebサイトを開くと、ブラウザは通常、訪問者にページコンテンツを表示する前に、訪問したページのすべての外部スタイルシートをダウンロード、解析、および処理する必要があります。 そのページで使用されていないCSSがそのようなページに存在する場合、ブラウザはそのページで時間を無駄にします。
この典型的な例は、使用されているほとんどの連絡フォームプラグインです。 これらのプラグインは主に「お問い合わせ」ページでのみ使用されますが、Webサイト全体にCSSをロードします。 使用されていないホームページでも構いませんが、CSSが読み込まれます。
必要のないCSSが多すぎるが、ブラウザの読み込みとページの読み取りと表示に時間がかかる場合は、問題になる可能性があります。
プラグインとは別に、テーマ開発者は、ほとんど必要とされない多くのことをstyle.cssに書き込みます。 ただし、必要かどうかに関係なく、サイトが読み込まれるたびに読み込まれます。
XNUMXつの未使用のCSSは問題ではないかもしれませんが、多くの未使用のCSSはWebサイトの読み込み時間に影響を与える可能性があります。
チェック：最速かつ最高のWordPressテーマ トップ10
未使用のCSSを特定する方法
未使用のCSSとJSを見つけるのはとても簡単です。 私がお勧めするXNUMXつのアプローチがあります。
XNUMXつは、GooglePageSpeedInsightを介してWebサイトを分析することです。 Webサイトに未使用のCSSの削除の問題があるかどうかを確認します。 それをクリックすると、それを担当しているサイトのコンポーネントを特定できます。
上から見ると、未使用のCSSがXNUMX件記録されていることがわかります。 これを見れば、未使用のCSSのプラグインと場所がわかります。
XNUMX番目のオプションは、より詳細な分析を取得することです。 これは、Chrome開発ツールを使用して実現できます。
ChromeブラウザでChrome開発者ツールを開き、「カバレッジ」に移動します。次に、カバレッジエリア内の「再読み込み」ボタンをクリックします。詳しい手順については、Google開発者ツールのガイドをご覧ください。
もう一つの方法は、jitbitを使って未使用のCSSセレクタをスキャンすることです。また、PurifyCSSを使って未使用のCSSを見つけることもできます。
未使用のCSSを削除する方法
WordPressから未使用のCSSを削除するには、次の手順に従います。
1.AssetCleanUpをインストールします
プラグインに移動し、新規追加します。 次に、[新しいプラグインの追加]ページの検索ボックスに「AssetCleanUp」と入力します。 プラグインをインストールしてアクティブ化します。
2. プラグインの設定に移動
プラグイン設定にアクセスするには、WordPress dasboardから設定をクリックしてから、AssetCleanUpをクリックします。
3.不要なCSSとJSをアンロードします
プラグインの設定では、開始する前に、ストリッピングファットタップの下でプラグインがどのように機能するかを知っていることを受け入れる必要がある場合があります。
CSSとJSをアンロードするには、CSSとJSSマネージャーをクリックします。 そこから、不要なCSSとJSを削除できます。 ホームページのみ、サイト全体、または特定のURLから削除できます。 投稿、ページ、またはカテゴリを削除することもできます。
例として、お問い合わせページを除くサイト全体の読み込みからお問い合わせフォームをアンロードします。
時間をかけて、不要であることがわかっているすべてのCSSとJSをアンロードします。 完了したら、必ずサイトをテストして、すべてが正常であることを確認してください。
未使用のCSSWordPressプラグインを削除します
WordpPressで未使用のCSSを削除するために使用できるプラグインは次のとおりです。
1.アセットのクリーンアップ：ページスピードブースター
Asset CleanUp: Page Speed Boosterを使えば、初心者でもWordPress内の不要なCSSやJSを簡単に削除できます。特定のページで不要なCSSを無効にするだけでOKです。
個々の投稿のみを非アクティブ化することもできます。 プレミアムバージョンでは、プラグインによって未使用のCSS/JSを非アクティブ化できます。
このプラグインは、WordPressを高速化するための他の多くのオプションを備えた完全なパフォーマンスプラグインです。 未使用のCSS/JSの削除はその一部にすぎません。
この投稿では、このプラグインにガイドがあります。
2。 WPロケット
WP Rocket は、WordPress のプレミアムパフォーマンスプラグインの中でナンバーワンです。初心者の方、つまり WordPress の経験や操作に慣れていない方にとって、WP Rocket は未使用の CSS を削除する最も簡単な方法です。
プラグインを購入する必要があります。購入したら、アカウントからプラグインをダウンロードするか、メールでダウンロードリンクを確認できます。
[ダッシュボード]>[プラグイン]>[新規追加]>[アップロード]からプラグインをインストールします。
WP Rocket の設定に移動し、「ファイル最適化」タブをクリックします。次に下にスクロールすると、「未使用の CSS を削除」が表示されるので、ボックスにチェックを入れて保存し、キャッシュをクリアします。
3。 Perfmatters
Perfmattersは、ブライアン・ジャクソンと彼の兄弟であるブレット・ジャクソンによって開発されたプレミアムプラグインです。このプラグインを使えば、不要なCSSを非常に簡単に削除できます。
まず、プラグインを購入する必要があります。 次に、それをインストールします。 ライセンスをアクティブ化します。 設定に移動するときは、スクリプトマネージャーをオンにします。
Webサイトの任意のページまたは投稿に移動するだけで、ダッシュボードメニューにスクリプトマネージャーアイコンが表示され、それをクリックします。 未使用のCSSとJSをページからまたはグローバルに削除できます。
このプラグインはパフォーマンスプラグインであり、WordPressを高速化するための他の多くのオプションが付属しています。 未使用のCSS/JSの削除はその一部です。
4.CSSJSマネージャー
CSS JS Managerは、モバイル端末またはデスクトップ端末からCSSまたはJSを個別に削除できます。目的に応じて使い分けられます。
このプラグインは、CSSまたはJSファイルのロードを延期することもできます。
結論
未使用のCSSとJSがたくさんある場合は、速度とパフォーマンスのスコアが大幅に向上していることに気付くでしょう。
未使用のCSSをすべて削除することは不可能かもしれませんが、最小限に抑えることは可能です。私はTargetTrendの未使用CSSを削除するためにAsset CleanUpを使用しています。
覚えておいてください。最適化は重要ですが、世界最速のウェブサイトに見せたいのでなければ、最適化にこだわりすぎないでください。
また、お読みください。
関連記事
