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

WordPressサイトで有料のWordPressテーマ、または公式のWordPressテーマリポジトリから人気のあるテーマを使用している場合、さまざまなユースケース向けにテーマが開発されている可能性があります。また、テーマで使用可能なすべての機能のごく一部のみを使用している可能性があります。

その場合、サイトは、サイトのページのスタイル設定に必要のない未使用のCSSを大量に読み込んでいます。たとえば、使用しているWordPressテーマにもWooCommerceページのスタイルがある場合がありますが、WordPressサイトでブログのみを実行している場合は、サイトのWooCommerceページに含まれているCSSを使用していないため、未使用のサービスを提供します。ユーザーへのCSS。

Google Pagespeedツールでウェブサイトをテストしたことがある場合は、サイトに未使用のCSSの問題があることをすでにご存知でしょう。このガイドでは、最初に未使用のCSSを確認してから、無料のツールを使用して未使用のCSSをWordPressサイトから削除する方法を説明します。

未使用のCSSを確認する方法

Google Chrome DevTools（コンテキストメニューの[検査]オプションをクリックしたときに表示されるもの）には、[ソース]タブ内にカバレッジ機能があります。 Coverageオプションを使用して、Webサイトがロードする未使用のCSSおよびJSを見つけることができます。

  1. デスクトップのChromeでウェブサイトを開きます。
  2. サイトの空白を右クリックして、[ 検査する コンテキストメニューから。
  3. クリックしてください ソース タブ、を押します Ctrl + Shift + P コマンドウィンドウを開き、次のように入力します カバレッジ を選択します インストルメンテーションカバレッジを開始し、ページをリロードします 利用可能なコマンドから。
  4. [カバレッジ]タブで、[ URLフィルター フィールドに入力し、サイトのルートドメインをここに入力して、内部CSS / JSファイルのみを表示します。

    Chromeの[ソースカバレッジ]タブのURLフィルター

    └ 未使用バイト 列を表示して、テーマからCSS / JSファイルにロードされているデータの割合を確認します。

  5. CSSファイルをクリックして、サイトによってロードされた未使用のCSS（赤いバーでマークされている）を表示します。現在のページで使用されているCSSは、緑色のバーで表示されます。

    未使用のCSSView Chrome

ウェブサイトに読み込まれている未使用のCSSをすべて分析したら、それを削除します。 Webページから未使用のCSSを削除するために利用できる無料のツールがいくつかあります。以下は、私が自分のプロジェクトでテストして使用した人気のあるツールの1つです。

未使用のCSSを削除するにはPurifyCSSオンラインを使用してください

通常、WordPressのほとんどすべてのプラグインを見つけることができます。ただし、未使用のCSSを削除するために、残念ながら、利用できるプラグインは1つではありません。そのため、WordPress固有ではない手動のツールを使用して、未使用のCSSをサイトから削除します。

PurifyCSSが最も フレンドリーな非開発者ツール 未使用のCSSを処理するために見つけることができます。このツールには、ユーザーがWebサイトのURLまたはHTMLとCSSコードのいずれかを提供できるようにするシンプルなUIがあります。 WordPressの場合、URLオプションを使用し、サイト上のすべての種類のページへのリンクを提供して、ツールがすべてからCSSを取得し、未使用のCSSを最適化できるようにします。

削除-未使用-CSS-PurifyCSS-オンラインツール

ツールに配置する必要のあるページのクイックリストは次のとおりです。

  • ホームページのURL
  • サイトの各カテゴリからの複数の投稿ページのURL

    └これは、CSSがすべての投稿要素に含まれるようにするためです。

  • 連絡先、概要、プライバシー、およびサイトにある可能性のあるさまざまな種類のページ。
  • アーカイブページ、検索ページ、著者ページ
  • カスタム投稿タイプページ

ヒント： テーブル、画像ギャラリー、コード、プレ、順序付きリスト、順序なしリスト、フォーム、タブ、アコーディオン、グーテンベルクブロックなど、使用する、または将来使用する可能性のあるすべてのテーマ要素を使用して、「機能」の投稿/ページを作成します。 、など。

PurifyCSS Onlineツールでこの「機能」投稿URLを使用して、一般的に使用される要素のCSSが含まれていることを確認します。

ヒット CSSをクリーンアップします サイトから関連するすべてのURLタイプをPurifyCSSオンラインツールに追加したら、ボタンをクリックします。

ツールによって生成された新しいCSSをコピーして、サイトで使用します。あなたを確認してください 元のstyle.cssをバックアップします PurifyCSSによって生成された新しいCSSを置き換える前に、テーマ内のその他のCSSファイル。

ヒント： 組み込みのWordPressテーマエディターを使用してテーマのCSSファイルを編集するか、FTP / SFTPプログラムを使用してサーバーに接続し、メモ帳エディターを使用してファイルを快適に編集できます。