CSSの冗長な非表示

CSS は Web ページのスタイルを美しくするために使用される言語です。Web ページ テクノロジの継続的な開発により、CSS はますます成熟してきました。ただし、実際には、冗長な CSS コードという問題に遭遇することがよくあります。これらのコードは無害に見えるかもしれませんが、ページの読み込み時間を大幅に増加させ、Web ページのパフォーマンスを低下させ、さらにはブラウザのクラッシュを引き起こす可能性があります。したがって、これらの冗長な CSS コードを非表示にする措置を講じる必要があります。

冗長CSSとは

いわゆる冗長CSSとは、平たく言えば、CSS内で定義されているが実際のページでは使用されないスタイルコードのことです。これらの冗長 CSS は、多くのセレクターとプロパティを含む、より複雑な構造である場合もあれば、目立たない小さなコード ブロックだけが含まれている場合もあります。ただし、これらにはすべて問題があります。ページでは使用されず、ブラウザのスペースを占有します。

なぜ冗長な CSS を非表示にする必要があるのですか?

過剰な CSS はページの読み込み速度を低下させます。ブラウザはまず HTML ページをダウンロードし、次にページに必要な CSS ファイルと JavaScript ファイルをレンダリングします。冗長な CSS コードが多数ある場合、ブラウザはより多くのファイルをダウンロードする必要があり、ページの読み込み時間が遅くなります。モバイル デバイスでは、ほとんどのモバイル デバイスの帯域幅と処理能力がデスクトップ デバイスよりもはるかに低いため、この問題はさらに深刻になります。

過剰な CSS もブラウザのパフォーマンスを低下させる可能性があります。ブラウザは CSS を解析し、それをページ要素に適用する必要があります。冗長な CSS コードが大量にある場合、解析プロセスにより多くの時間とリソースが費やされるため、ページのフリーズやブラウザのクラッシュが発生する可能性があります。

冗長なCSSを非表示にする方法

冗長なCSSを非表示にする方法はいくつかありますが、以下にそのうちの3つを紹介します。

方法 1: 不要な CSS を手動で削除する

この方法は比較的単純ですが、各 CSS ファイルを根気よくチェックして不要なコード フラグメントを探す必要があります。小規模な Web サイトやプロジェクトに適しています。不要な CSS を手動で削除するには、次の手順に従います。

1. すべての CSS ファイルの内容をテキスト エディタにコピーします。
2. 対応する HTML ファイルを開き、ページ要素を見つけて、対応する CSS コードを見つけます。
3. 一部の CSS コードを継続的に削除し、ブラウザ検査ツールを使用して、ページのレイアウトやスタイルに影響を与えるかどうかを確認します。
4. CSS コード ブロックが役に立たないと思われる場合は、それを削除して CSS ファイルを保存できます。

ただし、この方法にはいくつかの欠点があります。まず、不要な CSS コードを見つけて削除するのに時間がかかります。次に、Web サイトが非常に大きい場合、すべての CSS ファイルを見つけるのが難しい場合があります。最後に、CSS コードのブロックを誤って削除した場合、回復するのは非常に困難になります。

方法 2: ツールを使用して不要な CSS を自動的に削除する

Web サイトが比較的大規模な場合、不要な CSS を手動で削除するのは非常に難しい場合があります。この時点で、ツールを使用して冗長な CSS を自動的に検出して削除できます。これらのツールは、さまざまなアルゴリズムと手法を使用して未使用のコード ブロックを特定し、手動で見つけて削除するよりも効率的に実行します。

ツールを使用して不要な CSS を自動的に削除するプロセスは比較的簡単です。一般的な手順は次のとおりです。

1. ツールを開き、CSS ファイルへのパスを指定します。
2. CSS ファイルをスキャンして検出するプログラムを起動します。
3. このツールは CSS ファイルを検出し、未使用のコード ブロックを削除します。
4. 最後に、ツールは更新された CSS ファイルを生成するため、新しいファイルを使用するには Web サイトを更新する必要があります。

無駄な CSS を自動的に削除するツールの欠点は、スタイルが失われるという問題です。場合によっては、CSS コードのどのブロックが実際に使用されていないかをツールが正確に識別しないため、ページのスタイル設定に問題が発生する可能性があります。したがって、この方法を使用する場合は、更新された CSS ファイルを再確認して、ページが引き続き正しく表示されることを確認する必要があります。

方法 3: CDN を使用して CSS の読み込みを高速化する

最後に、CDN (コンテンツ配信ネットワーク) を使用すると、CSS ファイルの読み込みを高速化し、不要なコードを減らすことができます。 CDN を使用すると、複数の場所から実行されているサーバーを使用して、Web サイトに必要なすべてのコンテンツを提供できます。ユーザーが CDN サーバーから遠く離れている場合、最も近いサーバーからファイルを取得できるため、読み込み速度が大幅に向上します。

CDN を使用すると、CSS ファイルのサイズと数を削減し、ページの読み込みを高速化できます。ただし、この方法にはある程度の設定とスキルが必要なため、すべての人に適しているわけではありません。

結論

この記事では、冗長な CSS コードがページのパフォーマンスにどのような影響を与えるかを検討し、冗長な CSS コードを非表示にする 3 つの方法を検討しました。不要な CSS を手動で削除するには忍耐が必要ですが、小規模な Web サイトやプロジェクトには効果があります。不要な CSS を自動的に検出して削除するツールを使用すると時間を節約できますが、更新された CSS ファイルが正しいことを確認する必要があります。最後に、CDN を使用すると、CSS ファイルの読み込みを高速化し、不要なコードを減らすことができます。あなたのWebサイトやプロジェクトに合った方法を選択し、冗長なCSSコードを可能な限り非表示にしてください。

以上がCSSの冗長な非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。