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

ウェブサイト・ブログ作成
この記事は約2分で読めます。

 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を軽くできた。

コメント

タイトルとURLをコピーしました