CSS最適化スキルの自己実践体験

1. CSS スプライトを使用します。

利点は、CSS で使用される小さな画像を 1 つの大きな画像に結合できるため、サーバーへのリクエストが減り、サーバーの負荷が軽減され、ページの読み込みが高速化されることです。

2. 複数の CSS ファイルを 1 つの CSS ファイルに結合します。

CSSスプライトと同じ利点

3. 外部 CSS を使用します。

外部 CSS はブラウザでキャッシュできるため、メンテナンスが容易です。

4. CSS をヘッド内に配置します。

Yahoo のドキュメント http://developer.yahoo.com/performance/rules.html#css_top を参照してください。

5. インポートの代わりにリンクを使用する

インポートを使用すると、ページの読み込みが遅くなります。さらに、IE での読み込み順序が予想と一致しない場合があり、それが直接的に表示の問題につながります。

6. CSS の省略形を使用します。

たとえば、margin-top の代わりに margin を使用します。

7. 同じ文体の文章をまとめて、繰り返しの文章にならないようにします。

8. 改行を減らします。

9. 最後のセミコロンを削除します。

10. 単一行コメントを使用します。

11. RGBカラーの略語。

12. px などの不要な単位を削除します。

13. 使用されていないスタイルを削除します。

ファイルサイズを縮小し、ブラウザの解析と照合の時間を短縮できます。

14. CSS ファイルを圧縮します。

上記はすべて非常に単純なので、詳しく説明する必要はありません。もちろん、一部の CSS 圧縮ツールには最適化機能が備わっています。

<<: CSS マージンの重複と解決策の探索の詳細な説明

>>: 柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド