スタイルシート(CSS)を縮小・具体例

 サイトの読み込み速度を『PageSpeed Insights』で測定してみると、現在の当サイト(旧FC2ブログ)のパソコンの表示スピードは90 / 100。

 この表示スピード、結構パソコンサイトでも読み込み時間が早いほうだと思う。

 CSSの縮小とJavaScript の縮小をすでに実施しているので、サイトの読み込み時間がだいぶ早くなっているのだ。

 画像も使っているのに、これだけ表示スピードが速くなるので、CSSの縮小とJavaScript の縮小はやっておいて損は無い。

PageSpeed Insightsによるサイトの表示スピードの測定結果

 

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も合わせて縮小したほうがサイトの表示スピードが速くなる。

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

ビジュアルとテキストのエディタが切り替わらない!
Googleの検索ボックスの便利な使い方1
ドメインもネット上の住所って言うけど
FC2ブログの有料プラント有料レンタルサーバー比較
RSSボタンをスタイルシートで作ってみたよ
ドメイン選びの注意点
レンタルサーバー・ミニバードへの仮登録方法
MySQLの追加
JavaScriptを使った文字数チェッカー-全角半角共1文字と数える
WordPress(オープンソースのテンプレート)が使えるレンタルサーバー
メタデーターdescriptionsでサイトの訪問者を増やそう
FC2ブログテンプレートの文字の大きさを変えてみよう
FC2にログインできないときの対処
シーサーブログのタグページに記事概要(記事の要約・サマリー)を表示する方法
wordpressでPCと他のデバイスで表示を変える関数(タグ)

Menu

HOME

 TOP