株式会社アテンド0CSSを見直して読み込み速度改善を図るWebサイトの表示速度が遅いと感じる事があると思います。多くはデータ容量の大きな写真が沢山貼られているなど、単純に読み込む情報量が大きすぎる場合だと思いますが、CSSなどのソースコードが原因の一つとなってしまっている場合もあります。これは意外と見落としがちな部分ではないでしょうか。Webサイトをインターネットブラウザに表示させるためにじゃ、データをWebサーバーから読み込み、そのデータを元にして画面上へ書き出しを行います。この時に使われるのがHTMLとCSSがメインとなります。あとはWebサイト上の動きを付けたりなどの動作でJavaScript、PHPなども使われますね。これらのデータは、Webサイトを組み立てる指示書のような物です。指示書が難解だと組み立てにも時間がかかるのは当然のこと...であるならば、完結に短く書いてあげれば早く書き出す事もできますし、しかもデータ量も少なくできます。.text{}」のようにheader要素の中のclass名がbodyで、その中でclass名がblockで、更にclass名でtextがつく物...と細かく指定して書く事があると思います。span{}」といったように、header要素の中にあるdivの中のpの中のspanという風にすると作業が少し楽になるので利用されている方も多いのではないでしょうか。その方法は読み込み速度の増加につながります。これらのセレクタをもっと完結にしてあげるだけで、読み込み速度やデータ量の肥大化といった問題に対応することができます。CSSは右側から探していく慣れ親しんでいる日本語や英語が左から読み進めるように、CSSも左側から順にどの要素を指定しているのかを探して、それぞれにCSSを適用していくと思っていましたが、それは間違いです。CSSは右側から順に、どの要素を指しているのかを特定していきます。span」を探しにいきます。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構造を目指していきたいものですね。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。