サイトの読み込み速度を『PageSpeed Insights』で測定してみると、現在の当サイト（旧FC2ブログ）のパソコンの表示スピードは90 / 100。
この表示スピード、結構パソコンサイトでも読み込み時間が早いほうだと思う。
CSSの縮小とJavaScript の縮小をすでに実施しているので、サイトの読み込み時間がだいぶ早くなっているのだ。
画像も使っているのに、これだけ表示スピードが速くなるので、CSSの縮小とJavaScript の縮小はやっておいて損は無い。
CSS を縮小する
"このページでは、CSS は縮小されています。詳しくは、CSS の縮小に関する説明をご覧ください。"
BYPageSpeed Insights
前にも一寸CSSの縮小については記事にしてるのだが、今回は追加。
CSS（スタイルシート）の縮小・具体例
スタイルシートの縮小とかよく聞くけど具体的にどうするかというのがわかりにくい。
スタイルシートを縮小する具体的な事例は↓
1）CSSの縮小・余計な空間を削除する
例）
div#wrapper {
float : left;
width : 680px;
}
↓↓
div#wrapper { float : left; width : 680px; }
2）スタイルシートの省略できる記号を省略する
（1）スタイルシートの最後の「;」は省略できる。
例）
div#wrapper { float : left; width : 680px; }
↓↓
div#wrapper { float : left; width : 680px }
（2）カラーコードは省略できる
6桁のカラーコードの中には省略して3桁にできるものがある。
例）
・カラーコード白=#ffffff ⇒#fff、カラーコード黒=#000000 ⇒#000、カラーコード青=#0000ff⇒#00f、カラーコード赤＝#ff0000⇒#f00。
6桁のカラーコードの内、2個ずつの数字（英字でも）が同じならカラーコードの省略が可能だ。
（3）指定方法の省略
・background-color⇒background
・margin、paddingの指定方法を省略する。
margin、paddingの指定方法はいろいろな方法がある。
ここら辺のことはまた後日。
3）スタイルシートのコメントの削除を行う
例）
a:active {
text-decoration:none; /* 文字を動かす */
position: relative;
left: 1px;
top: 1px;
color : #E1771E ; /* 文字の色 */
}
↓↓
a:active {
text-decoration:none;
position: relative;
left: 1px;
top: 1px;
color : #E1771E ;
}
『 /* コメント*/』以外にも『<!-- -->』などを削除するとスタイルシートが縮小できる。
で、これだけの作業を手作業でやるのは非常に大変。
インターネット上にはCSS最適化ツールというのが存在する。
CSS最適化ツールを使うと、手間を掛けずにCSSを縮小できる。
また、ブログの場合、プラグインのCSSがテンプレートのCSSとは別に利用されている場合もある。
プラグインでCSSが使われている場合、プラグインのCSSも合わせて縮小したほうがサイトの表示スピードが速くなる。
コメント