Web表示速度のためにCSS/JavaScriptを軽量化しよう


Web表示速度のためにCSS/JavaScriptを軽量化しよう

Webサイト制作に必要なCSS/JavaScriptファイル。
作業しやすいように、後で見てもわかりやすいようにコメント・改行・余白をいれて作りますが、その分ファイルサイズが大きくなる原因に。
ファイルサイズが大きくなるとサイトの表示速度が遅くなってしまいます。
今回はCSS/JavaScriptファイルをMinify(ミニファイ,小さく)してくれるWebサービスを記載。
1秒の差でページ離脱率に繋がると言われてますので出来る限り軽量化しておきたいものです。
また、MinifyされたCSSをBeautify(ビューティファイ,元の見やすいコードに変換)してくれるWebサービスも記載。
bootstrap.min.cssを見やすくしたいときにも便利。
*各種エディタ(Dreamweverなど)ソースフォーマット適用すれば見やすくなります。(コードフォーマットのルールに基づく)

  • cleancss – CSS・JavaScriptのMinify対応
  • prettydiff – CSS・JavaScript他HTMLファイルなどのMinifyとBeautifyに対応
  • cssminifier – CSS・JavaScriptのMinifyに対応
  • refresh-sf – CSS・JavaScript・HTMLのMinify対応

Webサービス

cleancss

CSS・JavaScriptのMinify対応
CSSファイルのコードをコピーしたら貼り付けて「minify」のボタンをクリック。
余白、改行、コメントをすべてカットしてくれる。
(テスト環境:CSSファイル:3.53KB → 2.24KB)
cleancss




prettydiff

CSS・JavaScript他HTMLファイルなどのMinifyとBeautifyに対応
「Function」の項目でMinifyかBeautifyかを選択。
ファイル選択から各種テキストを選択したら「Execute」ボタンをクリック。(コピペでも可)
こちらはコメント部分はカットしないようなので(設定はあるかも)、残したいときに便利。
(テスト環境:CSSファイル:3.53KB → 2.87KB)
prettydiff




cssminifier

CSS・JavaScriptのMinifyに対応
CSSファイルのコードをコピーしたら貼り付けて「minify」のボタンをクリック。
こちらは共通するプロパティを持つ要素をまとめ直して変換してくれるすぐれもの。
(テスト環境:CSSファイル:3.53KB → 2.05KB)
cssminifier




refresh-sf

CSS・JavaScript・HTMLのMinify対応
Input窓に各種ファイルコピーペースト
すると該当するファイルのボタンを自動で認識して青くなるのでクリック。
こちらも共通するプロパティを持つ要素をまとめ直して変換してくれるすぐれもの。
(テスト環境:CSSファイル:3.53KB → 2.11KB)
refresh-sf



注意として

Minifyするとコメントが削除されたり、改行がなくなったりと解読が困難になる
Beautifyしたとしても、自分の作った読みやすい記述へ戻ることはないので、元のファイルは出来る限り保存しとくべき!


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL