今日は CSS コードを最適化するための 12 のヒントを紹介します。
目次
5. 特殊効果を実現する CSS と画像を置き換える SVG
1. 消費量の多い物件を避ける
分析の結果、一部の CSS プロパティは他のプロパティよりもレンダリングが遅いことが判明したため、注意して使用する必要があります。次のプロパティが含まれます。
-
ボックスシャドウ
-
境界半径
-
位置: 固定
-
変身
-
:n番目の子
-
フィルター
上記の属性はすべて、比較的高いパフォーマンス要件を備えています。これらの属性があまり頻繁に使用されない場合、これは問題になりません。ただし、ページが何百回も表示される場合は、CSS 全体に影響が出る可能性があるため、注意して使用してください。
2. @import の代わりにリンクを使用します
@import ルールは主にリソースまたは CSS ファイルをインポートするために使用されます。他のファイルが並行してダウンロードされるのを防ぎ、Web サイトの速度が低下する可能性があります。
❌ CSS ではこれを行わないでください。
@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");
@import の代わりに複数の HTML<link>タグを使用すると、CSS ファイルが並行して読み込まれ、アプリケーションの読み込み速度がある程度向上します。
✅ HTML でこれを行うことができます:
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">
3. セレクターを簡素化する
HTML 要素のスタイルを設定するにはさまざまな方法があり、最も複雑な CSS セレクターは解析に数ミリ秒かかる場合があることを私たちは知っています。セレクターの複雑さを軽減すると、ブラウザーの負荷が軽減され、コードがクリーンでシンプルに保たれます。
❌ 次のような記述は避けてください。
.container > div.links-container ul li .link {
}
✅ 次のように書くことができます。
.container .link {
}
4. !重要
ある時点で、! important を使用してスタイルの優先順位を上げ、スタイルを有効にすることができます。他に方法がない限り、!重要は使用しないでください。
!重要な CSS 宣言を追加すると、他の対応するスタイル宣言がオーバーライドされます。!重要な CSS ルールが多すぎる場合、ブラウザはコードに対して追加のチェックを実行する必要があり、ページの読み込み速度が遅くなる可能性があります。したがって、!IMPORTANT の使用は避けてください。多くの場合、サードパーティ ライブラリの CSS を書き換えたくない限り、セレクターを通じてスタイルの書き換えを実現できます。
5. 特殊効果を実現する CSS と画像を置き換える SVG
特に画像が Web 用に最適化されていない場合、画像をページに読み込むのに時間がかかることがあります。背景画像やグラデーション、幾何学図形を実装する場合は、できるだけ画像を使用せずにCSSコードを使用してください。CSS コードを使用すると、画像よりも速く読み込まれます。
PNG または JPG 画像の代わりに SVG を使用することもできます。
-
画像に効果を追加できます。
-
画像の読み込みが速くなります。
-
画像はユーザーの画面に自動的に適応します。
6.CSSを縮小する
CSS ファイルを圧縮してファイル内の空白や不要なコードをすべて削除することで、ファイル サイズを減らすことができます。CSS ファイルが小さいほど、読み込みにかかる時間が短くなり、ページの読み込みが速くなります。
7. 0pxの代わりに0を使用します
プロパティの値が 0 の場合、ユニットを追加できません。つまり、0rem、0em、0px などのようには書かないでください。
もちろん、このように書くことに問題はありませんが、これらの単位は役に立たず、巨大な CSS ファイルを扱う場合、単位を使用した場合よりも単位を使用しない方がファイルのサイズが小さくなります。
8. 色の名前の代わりに 16 進数を使用する
色を色名として設定すると、ブラウザは色の 16 進値を計算するのにより多くの時間を費やします。赤を使用したい場合は、color:red を設定した後、ブラウザによって表示効果が異なる場合がありますが、開発者として Web ページの表示をブラウザに任せることはできません。
したがって、可能な限り 16 進数で色を定義することで (例: red #ff0000 )、すべてのブラウザが同じ色相で目的の色を正確に表示することができます。
9. フォントファミリーが多すぎるのを避ける
セレクターごとにフォントを定義するのは良い方法ではありません。コードの保守が困難になります。将来フォントを変更したい場合は、セレクターごとに変更する必要があります。
したがって、次のようにフォントを定義する代わりに、次のようにします。
h1 {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
.selection {
font-family: Arial, Helvetica, sans-serif;
}
.footer {
font-family: "Times New Roman", Times, serif;
}
本文で使用するフォントを定義できます。他のセレクターでそのフォントをオーバーライドしたい場合は、そのセレクターで目的のフォントを使用することでそれを行うことができます。
body{
font-family: Arial, Helvetica, sans-serif;
}
footer{
font-family: "Times New Roman", Times, serif";
}
ページの多くの部分のフォントが異なる場合は、クラスでフォントを定義し、必要な HTML タグでこのクラスを使用できます。
.font-helvetica {
font-family: Arial, Helvetica, sans-serif;
}
.font-times {
font-family: "Times New Roman", Times, serif";
}
10. 代替フォントを使用する
場合によっては、アプリで使用されているフォントがユーザーのデバイスで利用できない場合があります。この場合、別のフォールバック フォントを指定できます。
p{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
このようにして、ブラウザは最初に利用可能なフォントが解析されるまで順番に解析し、利用可能なフォントがない場合はブラウザのデフォルトのフォントが使用されます。
11.CSSでリセット
各ブラウザには、HTML 要素の独自のデフォルト スタイルがあります。スタイルのない H1 要素がある場合、Firefox ではデフォルトで、上下に 21.433 ピクセル、左右に 0 のマージン値が与えられます。Safariでは上下21px、左右0のマージン値が与えられます。
したがって、CSS スタイルをリセットするには、スタイルを最初から定義することをお勧めします。多くの開発者は、ユニバーサル セレクター (*) を使用して基本的なリセットを実行します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ユニバーサル セレクター (*) を使用してリセットすると、ラベルごとにスタイルが設定されるため、パフォーマンスの問題が発生する場合があります。
コードベースは、正規化などの一般的な CSS を使用してリセットできます。CSS リセットのベスト プラクティスも参照できます。
12. 重複コードを減らす
2 つの要素またはセレクターが同じ CSS プロパティを持つ場合、スタイルを繰り返し宣言する代わりにカンマを使用してセレクターを組み合わせることができ、それらは CSS スタイルを共有します。
❌ 次のような記述は避けてください。
.header {
background-color: #fefefe;
padding: 20px 0;
}
.footer {
background-color: #fefefe;
padding: 20px 0;
}
✅次のように書くことをお勧めします。
.header,
.footer {
background-color: #fefefe;
padding: 20px 0;
}