少しでも早いサイトを作ってみたくて、WEBサイトパフォーマンスのよくなる方法を調べました。
今回はCSSについてです。
CSSプロパティを短く書いて、CSSのファイルの容量を減らす
CSSファイルの圧縮をするだけではなく、書き方を工夫してCSSのファイルの容量を減らすことができる。
CSS短縮形で書く
fontやmarginなど、複数プロパティではなく、単一プロパティで書く
浅いCSSセレクタを使う
CSSセククタの要素指定を細かくせず、階層を浅くする。
繰り返しの除去
DRYに書きましょう。
CSSのセグメント化
ページのテンプレートごとにCSSを分割する方法。
1つにまとめると不要なCSSもユーザが読み込んでしまう。
モバイル対応
レスポンシブにする。
CSSのチューニング
@importを使わない
タグと異なり、スタイルシートの全体がダウンロードされるまで@importの処理が行われない。
CSSは内に置く
スタイル未指定のコンテンツのちらつきを防ぐことができる。
flexboxの利用
CSSトランジション
CSSトランジション
- サポートするブラウザが多い
- 複雑なDOMのリフローの際にCPUが効率的に使われる
- オーバヘッドがない
単純なUI操作であれば、jQueryよりもパフォーマンスが良い。
