スタイルシート(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の管理画面に入れなくなった場合の一番確実な解決法
1つのMySQL(データベース)で複数のブログを作る・WordPressの手動インストール
スクロールバーをスタイルシートで表示する
コードを収得して、サイトにGoogleアドセンスの広告を貼り付けよう
シーサーブログのタグ検索でアドセンスを表示させない方法・自由形式編
FC2ブログテンプレートの文字の大きさを変えてみよう
wordpressは半角のダブルクォーテーションが勝手に全角に変換されて表示される
シーサーブログのカテゴリーページに記事の概要(要約・サマリー)を表示する
独自ドメインをレンタルサーバーに登録する・ムームードメイン&レンタルサーバーミニバード
プラグインPS Disable Auto  FormattingをFC2の記事をWordPressに取り込む前に導入しておかないと
シーサーブログの記事の直下に広告やブログランキングなどを貼り付ける・コンテンツHTMLを編集する
function.phpを含めたwordpressテーマの子テーマ化
JavaScriptを使った文字数チェッカー-全角半角共1文字と数える
WordPress4.0にバージョンアップするとどこが変わった?
WordPressの無料テーマ3種をご紹介

Menu

HOME

 TOP