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

コメントを残す




*

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

関連記事

FC2ブログカスタマイズ「拍手ボタンの設置・拍手を自由な位置に配置する」
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
シーサーブログのタグ検索でアドセンスを表示させない方法・自由形式編
wordpressの管理画面に入れなくなった場合の一番確実な解決法
wordpressでスマートフォンだけに表示・非表示を行う
wordpressでPCと他のデバイスで表示を変える関数(タグ)
wordpress記事一覧・更新日順、1ページの表示件数制御、ページャー対応コード
独自ドメインをレンタルサーバーに登録する・ムームードメイン&レンタルサーバーミニバード
wordpressテーマSTINGER3のスマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする
Googleアドセンスの新しい管理画面は、解析能力が優秀
ビジュアルとテキストのエディタが切り替わらない!
WordPress月別アーカイブを横表示にしてフッターに配置してみた
WordPressツリー化プラグイン「小粋空間」のプラグインを使う方法
GoogleWEBマスターツールの「HTMLの改善」で訪問者を増やそう
Google のアカウントをもらおう

Menu

HOME

 TOP