CSSを見直して読み込み速度改善を図る
Webサイトの表示速度が遅いと感じる事があると思います。多くはデータ容量の大きな写真が沢山貼られているなど、単純に読み込む情報量が大きすぎる場合だと思いますが、CSSなどのソースコードが原因の一つとなってしまっている場合もあります。これは意外と見落としがちな部分ではないでしょうか。
Webサイトをインターネットブラウザに表示させるためにじゃ、データをWebサーバーから読み込み、そのデータを元にして画面上へ書き出しを行います。
この時に使われるのがHTMLとCSSがメインとなります。あとはWebサイト上の動きを付けたりなどの動作でJavaScript、PHPなども使われますね。
これらのデータは、Webサイトを組み立てる指示書のような物です。指示書が難解だと組み立てにも時間がかかるのは当然のこと…
であるならば、完結に短く書いてあげれば早く書き出す事もできますし、しかもデータ量も少なくできます。
セレクタを見直す
CSSを記述する時に、「header .body .block .text{}」のようにheader要素の中のclass名がbodyで、その中でclass名がblockで、更にclass名でtextがつく物…と細かく指定して書く事があると思います。class名ではなくとも「header div p span{}」といったように、header要素の中にあるdivの中のpの中のspanという風にすると作業が少し楽になるので利用されている方も多いのではないでしょうか。
ですがその方法は読み込み速度の増加につながります。
これらのセレクタをもっと完結にしてあげるだけで、読み込み速度やデータ量の肥大化といった問題に対応することができます。
CSSは右側から探していく
慣れ親しんでいる日本語や英語が左から読み進めるように、CSSも左側から順にどの要素を指定しているのかを探して、それぞれにCSSを適用していくと思っていましたが、それは間違いです。CSSは右側から順に、どの要素を指しているのかを特定していきます。
さきほどの例でいうと、初めにページ内にある「.text 又は span」を探しにいきます。
続いて「.block 又は p」、次に「.body 又は div」という風に指定した要素を特定していきます。
最初に見に行くセレクタ（末尾に書くセレクタ）をページ内に沢山使っているclass名や要素を指定してしまうと、ページ内から指定した全てのセレクタを拾ってきてしまうので、ブラウザに負荷がかかってしまうのです。
この負荷がWebサイト表示速度を遅くする原因となってしまっている場合があります。
全ての要素を指定する「*」は特に注意です。
CSSからすると、指定された場所を装飾するときにサイト全体の要素を拾う所から始めなければならないので大変です。
例えば物を探す時の最初のヒントが日本内…とか言われているようなもの。探す範囲が広すぎてヒントになっていませんね。
もっと早く特定してもらいたい場合、その場所を直接指定した方が効率的です。
CSSで言うならば、装飾したい要素にclass名を与えてそれを直接指定してあげよう。という事になります。
これはデザインを作る上でも効率的になります。
このclass名を与えればこのデザインが適用される。と覚えておけば、様々な箇所に流用可能です。
また、どうしても部位によって色などを微妙に変更させたい場合、親要素に新たにclass名を与えれば解決できますね。
CSSを書くとき、セレクタは短く完結にすると良い結果につながりそうです。
インライン化する
CSSを適用させる場合、外部にファイルを置いて読み込ませる場合が多いかと思います。これはWebサイト全体に渡ってデザインを管理させるという点では非常に有効な方法ですが、読み込み速度を上げるという点においては悪手です。
HTMLに直接<style>で書き込んだ方が書き出しはスムーズに行われます。
これは、Webサイトの読み込みを行い、デザインを適用させるために外部へファイルを都度確認に行く…という手間がなくなるからです。
ですが、あまりにも多くのCSSを書き込んでしまうと、今度はHTMLのデータ量が多くなり、読み込みが遅くなってしまいます。
早く見栄えを整えたい部分…Webサイトのファーストビューにあたる部分だけをHTML内に書き込んでみるのもいいかもしれません。
style属性はNG
要素にstyle=””で書き込んでもCSSを適用させることができますが、こちらの手法は推奨されていません。W3C準拠のチェッカーに欠けると警告がでるので、利用は控えましょう。
といっても見た目上は問題ないのでつい使ってしまいがちですが、CSS本来の意図であるデザインの一括管理という概念から外れているので、きちんと書いてあげた方が良いですよ。
style要素とstyle属性は別物
<style>で使うstyle要素、style=””で使うstyle属性、これらは別物ですのでご注意ください。CSSの構成を見直して改善しよう
CSSを見直して、Webサイトの表示速度もそうですが、実際の作業スピードも向上するはずです。少なくとも、少ないセレクタで構成されたCSSであれば、どこを装飾しているのかがすぐにわかります。
また、p要素やdiv要素などをセレクタにしてCSSを作成すると、HTML側はスッキリするかもしれませんが、CSSを見直したり、変更をかけたり、既に使っているデザインを他にも適用させる時など、作業を行う時に特定していく事が大変です。
見やすく、わかりやすく、手入れしやすいCSS構造を目指していきたいものですね。
