CSS(スタイルシート)縮小ツールを使ってサイトの読み込み時間を短くしよう

 CSS(スタイルシート)を圧縮すると、ブログの表示速度を速めることができるらしい。

 それは良いけどCSSの圧縮ってどういうこと?

 

CSS(スタイルシート)の圧縮とは?

・コメントを取り払う。

・カラーコードを簡略化する。
例)"#000000" ⇒ "#000"

・不要なスペースや改行を取り外す
*1行ですべてのスタイルシートを表示すると、圧縮は最高になるが、スタイルシートそのものが見えにくくなるため、その後の編集や管理がしにくくなる。

 

webサービスを利用してCSSを圧縮

1、http://e-optimize.jp/services/csstidy/css_optimiser.phpへアクセス。

2、『CSS Input:』の欄にCSSを貼り付け。

3、『圧縮率(コードレイアウト):』を選ぶ。
*1行ですべてのスタイルシートを表示すると、圧縮は最高になるが、スタイルシートそのものが見えにくくなるため、その後の編集や管理がしにくくなる。
 セレクタごとに1行表記とするとある程度圧縮でき、かつ、編集もしやすいかも。

4、『Options』を選択し、『実行』ボタンを押す。
*オプションを欲張りすぎると、サイトの表示がおかしくなることもあるので、ご注意。

5、一番したの枠に、圧縮をしたCSSが表示されるので、そのCSSをコピーして、ブログのCSSとしてアップロードする。

 

 『セレクタごとに1行表記』で40.2% (-6752
Bytes)位CSSを軽くできた。

コメントを残す




*

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

関連記事

noimage

付属CDを使わずにルーターの設定をしてみよう

noimage
noimage

Outlookのアドレス帳をWindows Live メールへインポートする

noimage
noimage

らくらくフォンの画面が変だ、そろそろ買い替え時?

noimage

プリンターの目詰まりを防ぐためには?

Googleツールバーの自動翻訳をOFFにする方法

Googleツールバーの自動翻訳をOFFにする方法

noimage

迷惑コメントの対処にコメント設定をしよう

noimage

Enterキーで横のセルに移動させる

noimage

国税庁E-TAX用の作成ソフトが使えるようになったみたい

noimage
noimage

ウインドウズ8はどこに行く?

noimage
株式会社スクウェア・エニックス「常確認のお願い」

株式会社スクウェア・エニックス「常確認のお願い」

noimage

Menu

HOME

 TOP