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

親子カテゴリの親カテゴリだけ表示する

noimage

アンインストールソフト・Revo Uninstaller

noimage

Windows7はパーティションの変更も簡単にできる

noimage

USBメモリにパスワード・USBメモリのセキュリティ

noimage

複数のGoogleアカウントを切り替えて使う方法

noimage
無くなってしまったウェブサイトを見る方法

無くなってしまったウェブサイトを見る方法

noimage

Cassava EditorCSV編集ソフト

noimage
noimage

リロードとスーパーリロード

noimage
noimage

ブログやホームページ作成に便利な、HTMLエディタ

noimage
noimage

標準のブラウザをLunascapeへ変えた

noimage

Windows7からLinuxOSを削除したい場合

Menu

HOME

 TOP