CSS のファイルサイズを縮小する

  • SEO
  • 現在地

万一のために、書き換えるつもりのファイルはバックアップしておきましょう。

Minify CSS

CSS の空白文字や改行などの不要な文字を削減して、ファイルサイズ自体を縮小することで、転送量を減らし表示速度を向上させようというものです。

改善するための方法

単純に空白文字や改行を削除するだけなので、その気になれば手作業でもできるのですが、そもそも YSlow に、そのためのツールが附属しています。

縮小されることで改行などがなくなり、編集しにくくなるので、縮小前の CSS ファイルは別名で保存しておくことをお勧めします。

YSlow

  1. Firebug から YSlow を開き、Tools を選択します。
  2. Tools の一覧が表示されるので、その中から YUI CSS Compressor を選択します。
  3. 選択後、表示されたページから縮小された CSS のソースをコピーしてファイル内に保存。

PageSpeed

  1. まず、PageSpeed でページの表示速度をチェックします。
  2. 結果が表示されたら、CSS を縮小する(Minify CSS)の項目を選択すると、最適化されていない画像の一覧が表示されます。
  3. それぞれの文末にある Save as のリンクをクリックすると、最適化された CSS ファイルが保存できますので、ファイル名を変更して置き換えてください。

後書き

CSS などのソースを縮小してしまうと、編集の際に読みにくくなり、タグを探すのも一苦労になってしまうので、上に記述してある通り、よく編集する人はバックアップを作っておきましょう。

というか、ここを改善してもそこまで表示速度に影響はないので、他に改善点がある場合は、後回しでもいいかもしれません。

サイト内関連ページ : PageSpeed を参考に Web ページの表示速度向上のためにやってみたことのまとめ

スポンサードリンク

inserted by FC2 system