CSSを軽量化してサイトを高速化するための初心者向け4つのポイント

2018年6月7日2019年6月11日

CSSプリプロセッサー（SASSやLESSなど）を使用せずに日々CSSを書いている方こんにちは！
日々CSSを記述している中で、セレクタや同じプロパティを繰り返し膨大なCSSファイルを作成していませんか？

CSSの記載が増えれば増えるほど、複雑になればなるほどページの表示には時間がかかるようになります。
これはCSSだけでなくHTMLでもJavaScriptでも同じことが言えますが、可能な限り軽量化することで、ページの表示速度を改善し、ユーザーに快適なサイトを目指したいところです。

ページの表示速度が上がればユーザーの直帰率が減少し、逆に遅ければ直帰率が上がったり、検索エンジンにマイナスの評価をされたりとｍユーザーの減少につながる可能性があるので、CSSは可能な限り軽量化しましょう！

超基本！CSSに記述するセレクターはクラス名のみで指定する

まずはコレ。
現在のWEBサイト制作において数ページのWEBサイトを作成することはあまりなく、WordPressなどのCMSを使い、100ページを超えるWEBサイトを作成することがほとんどだと思います。
ページ数が増えればそれに伴ってCSSに記述するセレクタや、プロパティもどんどん増えていきます。
そこで、CSSにスタイルを記述する際に、table tr td {}
とするのではなく、「.class名」で指定する。
ちなみに、この指定する部分を「セレクタ」、スタイルを記述する部分を「プロパティ」と言います。

HTML

CSS

上記のようにクラス名ひとつで指定することで複雑なセレクタを持ったCSSから解放されます。

軽量なCSSを記述するためには、HTMLタグで親要素から順番に指定する方法や、IDを使用する方法は避けましょう。
WEBサイトの制作を始めたころはまだいいかもしれませんが、ページを増やしたり、スタイルを修正したりする際に、CSSがどんどん複雑化していき、軽量なサイトから遠のいてしまします。

しかも複雑なCSSはメンテナンス性も損なってしまします。
修正作業に余計な手間がかかってしまったり、複雑なセレクタをさらに複雑なセレクタで上書きしなければならなかったりと、WEBサイトの運営期間が増えるに伴ってCSSもより複雑になっていきます。

CSSをクラス名ひとつで指定することですっきりと見やすいCSSファイルを作成することができます。

CSSもカテゴリやページ、部品単位で管理する

クラス名ひとつで指定することでCSSはずいぶん軽量化されました。
しかしこのままでは、どこにどんなスタイルが指定されているのか探すのが大変ですので、カテゴリやページ、部品ごとにコメントを記述し、区切りがわかりやすくなるようにして管理しましょう。

CSS

このようにコメントでそれ以降のスタイルがどこに適用されるのかを記述することで、素早く該当箇所を探すことができるようになります。

CSSに同じ記述を繰り返さないためにモジュール（部品）を作る

ページをひとつ作るたびにCSSも新しく記述していると同じ内容の記述がCSSファイルに溢れていきます。
何度も使うような記述はモジュールとして作成し、色々なページで使い回すことでCSSの軽量化につながります。

CSS

例えば上記のようなクラスにスタイルを指定すれば、要素にクラスを指定するだけで、WEBサイトのどこでも使用することができます。 この枠のように。

単一のプロパティを共通化して使い倒す

前項の内容と似ていますが、こちらはもっと細かく、単一の機能を持ったクラスを作成します。

CSS

上記のようなクラスをある程度のバリエーションで作成しておけば、ページを作成する際にCSSを記述することなく、HTMLの任意の要素にクラス名を指定するだけで、思い通りのデザインに近いものが、簡単に作成できるようになります。

CSSをスタイリッシュに記述する まとめ

セレクターを指定する際は、タグではなく、クラス名で指定することで、CSSの軽量化になり、見やすくもなる。
サイト全体のデザインに応じて、使い回すことでのきるモジュールを作成しておくことで、同じ記述を何度も繰り返すことを避けられる。
単一で、使用頻度の高いプロパティも、あらかじめ作成しておく。

スタイルをあらかじめ定義しておくことで、CSSの軽量化のみならず、作業時間の短縮にもなりいいことずくめなので、是非！実践して見てください！