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

コメントを残す




*

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

関連記事

WordPress(オープンソースのテンプレート)が使えるレンタルサーバー
ブログのタイトルのSEO対策検索結果の順位を上げよう
webセーフカラー216・短縮コード一覧
wordpress記事一覧・更新日順、1ページの表示件数制御、ページャー対応コード
WordPress4.0にバージョンアップするとどこが変わった?
FC2ブログの全記事リストを表示する時のHTMLタグと注意点
独自ドメイン収得・ムームードメイン
GoogleBloggeの投稿者名を消す方法がわかったので皆さんにお知らせ
WordPressで悪戦苦闘中
シーサーブログの記事の直下に広告やブログランキングなどを貼り付ける・コンテンツHTMLを編集する
WordPress4.0にバージョンアップしたらプラグインのインストールがわかりにくくなった
Googleアドセンスってなに?
お金を掛けたくない人はGoogleBloggerをサーバーにすると良いかも
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
FC2にログインできないときの対処

Menu

HOME

 TOP