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

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

noimage
noimage
noimage

スマートフォンで年賀状・Yahoo! JAPAN年賀状専用アプリ

noimage

Firefoxのメニューバーを表示させる方法

noimage

MoneyLookのCSVファイルをMoney通帳に取り込む

noimage

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

noimage

Google Readerついに廃止

noimage
noimage

多機能・高機能テキストエディタBigEditor

noimage
noimage

Windows7のUSB・DVDなどの自動再生をOFFにする方法

noimage
noimage

EV SSL証明書を利用するためのパソコンの設定

Menu

HOME

 TOP