スピードテストを実行している際に、 PageSpeed Insights で未使用の CSS の削除に関する警告が表示されたことがあるかもしれません。WordPress サイトから未使用の CSS を削除して、読み込み速度を向上させ、パフォーマンススコアを向上させませんか？
WordPressのテーマやプラグインによって、必要のないCSSコードが大量に追加されています。使用されていないCSSコードを削除することで、WordPressのパフォーマンスとユーザーエクスペリエンスを向上させることができます。この記事では、WordPressウェブサイトに不具合を生じさせることなく、使用されていないCSSコードを簡単に削除する方法をご紹介します。.
WordPressで未使用のCSSをさまざまな方法で削除する
WordPress ウェブサイト上の未使用の CSS の量を減らしたい場合は、試すことができる方法がいくつかあります。.
WordPressで不要なCSSをすべて削除することは可能ですが、非常に困難な作業です。さらに、WordPressのバックグラウンドでの動作の仕組み上、一部のユーザーにとって不要なCSSを見つけて削除することが難しい場合があります。.
その場合、未使用の CSS を削除するさまざまな方法を紹介し、ニーズに合った最適な方法を選択できます。.
最大のCSSファイルを見つける
Chromeデベロッパーツールの「使用状況の可視化」でカバレッジレポートを並べ替えてください。URLには通常、ファイルを生成したプラグイン、テーマ、またはサードパーティのコードの名前が含まれます。これにより、最適化が必要な箇所をより簡単に特定できるようになります。
未使用の CSS を別のファイルで削除し、使用されている CSS を別のファイルに保存する
別ファイルを作成するとHTMLサイズが増加せず、インライン化とは異なりキャッシュできるため、高速化につながります。LiteSpeed CacheのCSSとFlyingPressも別ファイルに読み込みます。さらに、 WP Rocketは、他の多くのプラグインが高速化のために別ファイルを使用するのとは異なり、訪問者数ではなくスコアを重視して最適化します。
CSSを追加するプラグインを避ける
Query MonitorやWP Hiveなどのツールは便利ですが、プラグインがフロントエンドに余分なCSS/JSを追加しているかどうかを必ずしも表示できるわけではありません。そのため、プラグインの完全な影響は、フロントエンドにコンテンツを追加した後にウェブサイトを再テストすることでしか確認できません。最も一般的な原因は、ギャラリー、スライダー、お問い合わせフォーム、コメント、チャット、カレンダー、そしてデザイン関連のページビルダープラグインです。.
軽量テーマ + ページ ビルダーを使用します。.
フロントエンドはCSS、JavaScript、フォントで過負荷になっています。そのため、Elementor ProやUltimate Addonsなどのページビルダープラグインを追加すると、ウェブサイトの読み込み速度が遅くなることが確実です。.
ページビルダーでCSS最適化を有効にする
これらの設定には、Elementorの実験とDiviのパフォーマンス設定があり、CSSサイズを削減するためのオプションがいくつか含まれています（例：ElementorのアセットとCSSの読み込みの改善、Diviの動的CSSなど）。一般的に、パフォーマンス設定を高く設定すると、より良い結果が得られます。.
使わないアイコンは無効にする
Elementorアイコンを使用していない場合は、アイコンをオフにしてください。Google Fonts + Font Awesomeの場合は、PerfmattersまたはElementorのドキュメントで設定できます。.
アセットアンロードプラグインでCSSを削除する
Perfmattersを使用すると、不要なCSS/JS（またはプラグイン全体）を無効化したり、未使用のCSSを削除したり、YouTubeのiframeをプレビュー画像に置き換えたりすることができます。これらの方法すべてによって、残りの未使用CSSのアクセシビリティを向上させることができます。CSS/JSファイルは、Asset CleanUpプラグインを使用して無効化することもできます。
CSSで見つかった遅延読み込みの背景画像
ほとんどのキャッシュ プラグインは、背景画像が別の CSS ファイルにパックされている場合、背景画像を遅延ロードしません。.
したがって、背景画像を遅延読み込みしたい場合は、キャッシュプラグインのドキュメントを参照してください。FlyingPressには、インラインHTMLを必要とするWP Rocketとは異なり、追加のCSSクラスに追加できる lazy-bg ヘルパークラスが付属しています。lazy-bg ヘルパークラスは手動で追加するか、OptimoleにはCSSセレクターを使用したソリューションが用意されています。.
Gutenberg CSS を削除する
Gutenbergブロックを使用しない場合は、Gutenbergブロックライブラリをデキューできます。これを追加するには、コードスニペットまたはfunctions.phpを使用してください。.
CSS を組み合わせる（または組み合わせない）
CSS/JavaScript を組み合わせる場合、サイズは 10KB を超えないようにしてください。CSS と JavaScript を組み合わせることはほぼ不可能なので、ほとんどの場合、組み合わせるべきではありません。.
WooCommerceスタイルを無効にする
WooCommerce はデフォルトでウェブサイト全体にスタイルを読み込みます。これらのスタイルを eコマースページでのみ使用している場合は、すべてのページで無効にすることができます。WooCommerce にはドキュメントも用意されていますが、不要なコードを削除するための設定がさらに多く含まれている「Disable WooCommerce Bloat」をお勧めします。.
Seahawk Mediaで同様の記事をもっとご覧ください。
