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

公開: 2021-07-30

未使用のコードがたくさんあると、Webサイトの速度が大幅に低下する可能性があります。 そして、WordPressの通常の容疑者の1つは、不要なCSSコードです。 幸い、Webサイトのパフォーマンスの低下を防ぎ、ユーザーエクスペリエンスの低下を防ぐ方法はいくつかあります。 これを行う1つの方法は手動による方法ですが、かなりの開発経験が必要です。 もう1つの、より初心者に優しいオプションは、既存のツールに焦点を合わせ、数回クリックするだけで、テーマとプラグインによって追加されたWordPressの未使用のCSSを削除することです。

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

ご存知かもしれませんが、WordPressは多くのプラグイン、テーマ、その他のサードパーティライブラリを使用しています。 それらはすべてあなたのウェブサイトの機能を改善するために多くの機能をもたらします。 ただし、ほとんどの場合、実際には使用しない関数が多数含まれています。 それでも、WordPressの専門家を使用してウェブサイトを維持および最適化しない場合は、すべての訪問者にすべてが読み込まれます。 これにより、未使用のCSSが大量に転送され、Webサイト自体の速度が低下します。 その結果、パフォーマンスが低下すると、Webサイトのトラフィックが減少し、検索ランキングが低下します。

多くの場合、未使用のコードを100％削除することは非常に難しく、ほとんど不可能です。 ただし、わずかな量や競合するスクリプトを削除しても、Webサイトのパフォーマンスが向上します。 コードの典型的な「最小化」とは別に、Webサイトを壊すことなく未使用のCSSコードの影響を減らす方法がいくつかあります。

なぜ未使用のCSSがそこにあるのですか？

CSSはWordPressWebサイトの外観のスタイリングを担当しているため、見つけることができるすべてのテーマにそれが含まれています。 また、テーマだけでなく、多くのプラグインには独自のスタイル設定とカスタマイズのオプションがあります。 あらゆる種類のウェブサイトビルダー、ライブラリ、さらには個々の要素でさえ、そのほんの一部を使用していることは言うまでもありません。 一般に、いくつかのプラグインは実際にはWebサイトにそれほど影響を与えません。 しかし、十分にある場合、累積効果はあなたのウェブサイトを本当に遅くする可能性があります。

タブレットでWordPressの購読ページを見てください。
多くのサブスクリプションおよび同様のフォームには、独自の追加のCSSコードが付属しています。

未使用のCSSを削除するためのツール

未使用のCSSを削除するのに役立つツールはたくさんありますが、その大部分はすべての状況に適用できるわけではありません。 もちろん、静的なWebサイトの場合、それらのほとんどは非常に役立ちます。 ただし、動的Webサイトでは、JavaScriptを使用してCSSクラスを挿入することにより、要素を読み込んでスタイルを設定することがよくあります。 そして、これらのクラスを検出するのは難しいので、これは難しい部分です。 たとえば、商品やカートページを動的にスタイル設定するeコマースWebサイト。

開発中にそれについて考えてください

最初から未使用のCSSを取り除くための1つの解決策は、Webサイトの開発中にそれについて考えることです。 基本的に、CSSコードをさまざまなファイルに分割して、それぞれが特定の目的を果たすことができます。 ただし、ほとんどの人は、最初からWebサイトを構築することを避けるために、WordPressテーマを使用することを好みます。 そして、これはあなたが非常に熟練している必要があるか、WordPressの専門家を見つけてあなたのためにそれを行う必要がある場所です。

優れたユーザーエクスペリエンスを提供するシンプルなWebサイトを示すWordPress開発者。
ユーザーフレンドリーなWordPressWebサイトを作成するときは、常に先制的な解決策を探してください。

UnusedCSSオンラインソリューションの使用

もう1つの方法は、UnusedCSSなどのプレミアムソリューションを使用して、CSSの問題を簡単に見つけてクリーンアップすることです。 このツールの利点は、JavaScriptファイルをスキャンしてインジェクションを検索できることです。 その最も注目すべき機能のいくつかは次のとおりです。

  • 未使用のCSSルールの自動検索
  • ダウンロード用のクリーンなCSSを提供します
  • レスポンシブデザインとメディアクエリのルールを探る
  • ウェブサイトで変更を確認する
  • 変更のプレビュー
  • もっと

余分なCSSを削除するためのPurgeCSS

これは、開発中に非常に役立つもう1つのツールです。 Bootstrap、Foundation、および同様のCSSフレームワークを使用している人は、これが非常に便利だと感じています。 おそらくCSSルールのごく一部しか使用していないため、このツールは未使用のスタイルをすべて除外するのに役立ちます。 基本的に、これはCSSファイルをかなり小さくするための優れた方法です。

プラグインを最適化する

次の行は、非常に人気のあるWordPressプラグインです。 これを使用すると、スタイルを簡単に縮小、結合、およびキャッシュできます。 ページヘッドに必要なルールを挿入し、重要なCSSをインライン化し、HTMLを最小化し、スクリプトをフッターに移動します。 本質的には、画像の「遅延読み込み」の実装、フォントの最適化、非結合JavaScriptの非同期化に使用できます。 すべてのWebサイトは、この広範なプラグインの恩恵を受けることができます。

WPロケット

あなたが見つけることができる最も初心者に優しいオプションの1つ。 WP Rockedは、ページと速度を最適化するための効果的なソリューションを提供します。 速度テストで満足のいく結果が得られるだけでなく、訪問者のユーザーエクスペリエンスが目に見えて向上します。 未使用のCSSを削除したい場合は、CSSをアクティブにして、「ファイルの最適化」をオンにして、「CSS配信の最適化」オプションに進みます。 必要なCSSルールのみを含むCSSファイルが提供され、他のルールよりも先に読み込まれます。 さらに、WP Rocketは自動的にキャッシュをクリアし、CSSファイルを縮小および集約できるようにします。

AssetCleanUpを使用して未使用のCSSを削除します

Asset CleanUpを使用して、テーマやプラグインから未使用のファイルをアンロードできます。 これにより、ページごとに個別にこのタスクを完了することができます。 これは少し複雑で時間のかかる方法ですが、非常に効果的な使用方法です。 他のプラグインと同様に、ライブWebサイトへの望ましくない影響を防ぐための「テストモード」オプションがあります。 ただし、Asset CleanUpは、未使用のJavaScriptファイルを削除するのにも役立ちます。 最後に、訪問者が見るものをテストするときは、不要なものをすべてアンロードすることを選択できます。

PerfmattersでCSSを最適化する

このリストの最後の、しかし最も重要なことは、プレミアムパフォーマンスプラグインの1つです。 Perfmattersは、未使用のCSSとJavaScriptの両方を削除するのに役立ちます。 登録、インストール、およびアクティブ化の後、スクリプトマネージャーにアクセスできるようになります。 これは、他のオプションの中でも、各ページまたは投稿を簡単に変更するのに役立ちます。 本質的には、別のページまたはWebサイト全体で未使用のCSSとJavaScriptを削除するために使用できるシンプルなダッシュボードメニューを提供します。 CSSの場合と同様に、CSSを使用して、JavaScriptファイルを結合または縮小してパフォーマンスを向上させることができます。

Webサイトの速度を向上させるための追加の考慮事項

CDNを使用してCSSファイルを配信することを検討してください–CSSまたはその他のファイルの読み込み速度を大幅に低下させます。

ほとんどのCSSファイルを定期的に縮小して結合し、WordPressのCSSから不要なルール、クラス、余分な文字を削除します。 ただし、コードの複雑さ、そのようなファイルのサイズ、および追加の後での最適化のために、これがすべての大規模なWebサイトに役立つかどうかは議論の余地があります。

最小化されたWebサイトコード。
コードを最小化して不要な文字を取り除き、ファイルをより速くロードします。

WordPressで未使用のCSSのすべての部分を完全に削除することはほとんど不可能です。 ただし、上記の方法を使用して、Webサイトをかなり高速化できます。 ケースの数にもよりますが、WordPressのウェブサイトに未使用のコードが本当にたくさんある場合、その違いはかなり顕著になります。 反対に、小さな変更でもすべてを意味する場合があります。 目標は世界最速のウェブサイトを持つことではありませんが、わずかな変更が重要です。 しかし、他の努力は、検索エンジンのテストで最高速度の位置を獲得するのではなく、ユーザーにとってのコンテンツと有用性に焦点を当てるべきです。