WordPress サイトで未使用の CSS を削除 (または延期) する方法

WordPress で使用されていない CSS を削除しますか? ウェブサイトを高速化しますか?

Web サイト最適化の主な目標は、不要なコードを削除することです。これにより、Web サイト ページの合計サイズが縮小され、ページの読み込み時間が短縮され、訪問者のユーザー エクスペリエンスが向上します。

Web サイトのページのサイズを大幅に削減できる領域の 1 つは、スタイリングです。ウェブサイトのスタイリングは、カスケーディング スタイル シートと呼ばれるルールベースの言語によって制御されます。カスケーディング スタイル シートは、HTML や Javascript と並ぶワールド ワイド ウェブのコア ビルディング ブロックの 1 つです。

一般に CSS と略されるスタイルシートは、ページの色、フォント、背景、画像のスタイル、余白、パディングなどを定義するために使用できます。以下の例では、CSS コードにより、見出しが中央に配置され、赤で表示されるようになっています。

h1 {
 text-align: center;
 color: red;

}

一般的な WordPress Web サイトでは、ページを正しく表示するために多くのスタイルシートが必要になります。 WordPress のコア バージョンで使用される CSS スタイルに加えて、有効化された WordPress テーマと WordPress プラグインによって CSS 呼び出しが行われます。したがって、WordPress Web サイトでは、すべてを正しくスタイル設定するために、多数の CSS ファイルが必要になる場合があります。

カスケード スタイル シートを使用すると、ファイルが大きすぎる場合、または呼び出される CSS ファイルが多すぎる場合に、ページの読み込み時間が長くなる可能性があります。この問題に取り組むために、Defer、Minify、Combine などの多くの手法を採用できます。

以下は、これらの手法の概要です。

CSS の重みをさらに減らしたい場合は、WordPress で使用されていない CSS ルールを削除することをお勧めします 訪問者が必要なスタイルだけをダウンロードできるようにします。ブラウザーが不要な CSS コードを読み込まないようにすることで、ページの読み込みを高速化し、訪問者のユーザー エクスペリエンスを向上させることができます。

未使用の CSS を詳しく見て、未使用の CSS コードを WordPress Web サイトから削除する方法を調べてみましょう。

WordPress で使用されていない CSS とは何ですか?なぜ発生するのですか?

未使用の CSS は、現在のページで呼び出されていない CSS ルールを指します。ページがスタイルシートからすべての CSS ルールを呼び出す必要はめったにないため、これは頻繁に発生します。たとえば、スタイルシートに赤を使用して見出しを表示するための CSS ルールが含まれている場合がありますが、実際に要求されていない場合、これは未使用の CSS として分類されます。

ブラウザは未使用の CSS ルールを必要としないため、コードによって CSS ファイルのサイズが不必要に増加しています。したがって、WordPress で使用されていない CSS コードを削除することで、ページの読み込み時間を改善できます。

WordPress テーマでは、styles.css ファイルをメインのスタイルシートとして使用する必要がありますが、テーマでは、フォント、テーマ スキン、およびその他のデザイン要素用に追加のスタイルシートを使用するのが一般的です。テーマ CSS ファイルに含まれる CSS ルールの多くは、特定の状況でのみ必要になります。それにもかかわらず、これらの CSS ファイルは通常、Web サイトのすべてのページに読み込まれます。

WordPress プラグインは、開発者がデフォルトですべてのページに頻繁にスタイルシートをロードするため、未使用の CSS をページに挿入するのに特に適していません。

WordPress で使用されていない CSS を削除することは良い習慣ですが、ウェブサイトのデザインにとって重要な CSS コードを削除すると、ウェブサイトのデザインが壊れてしまいます。

重要な CSS について

よく耳にするもう 1 つの用語は、クリティカル CSS です。 .スクロールせずにすぐにコンテンツをユーザーに表示するために必要なスタイルを指します。このエリアはアバブ ザ フォールドと呼ばれます ブラウザがスクロールせずに見える範囲のコンテンツを読み込むのにかかる時間を First Contentful Paint と呼びます (FCP)。

First Contentful Paint がすばやく読み込まれるように、重要な CSS を抽出して縮小し、HEAD 要素にインラインで表示することをお勧めします。 Defer を使用して重要でない CSS ファイルを後で読み込むと、重要度の低い CSS ファイルが最初のページの読み込みを遅くしないようにすることができます。