施策例
1．複数記述同じセレクタに対し、異なる指定を行っています。
例. h1{color:black;}
h1{color:red;}
※必要となるもののみ記述します
2.不要なコメントの削除
3.空白部分を少なくする
※空白箇所もファイルサイズにカウントされています
4.本来、使用されていないclassやidの削除
※構想では考えて決めていたが、後々使用すること無い場合
5.カラーコードの省略
例. color : #ffffff ; →color : #fff ;
※省略可能なもの限定
6.プロパティの省略
例.background-color: #abcdef;→background:#abcdef;
7.簡略化
例.
border-top : 1px solid #000000;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
↓
border : 1px solid #000000;
8.不要な文字の削除
例.
margin:0px auto;→margin:0 auto;
※サイズが0pxの場合は、省略可能です
9.複雑に記述しすぎない
div#wrapper div#main div#under ul.list li {○○○}とするよりも、最後のliタグに対してclassを指定すると、記述の削減ができます。
適合する箇所かどうかの確認作業に対し、ブラウザに負担をかけるという観点からも、あまり良いとは言えません。
但し、多く記述することによって、プロパティ指定ミス等も少なくすることもできますので、コーディングの観点からは、作業を難しくしないようにすることも同時に考えなければいけなくなります。
その為、開発環境において、よけいに負担が掛かるような場合は、可能な範囲で気を付けていけばよいと思います。
以上、CSSファイルサイズの縮小方法について解説してまいりました。このようにSEO対策は、キーワード調整等々コンテンツ内部の施策のみならず、コーディング分野においての施策も求められています。
