150324_eye

ファイルサイズを小さくするMinify, 整形を戻すBeautify, 比較するCompare

前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。
javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すればファイルサイズを縮小できる。

小さくする事をMinify(ミニファイ)、Minifyされたものを整形して読みやすくする事をBeautify(ビューティファイ)という。また、2つのファイル内容をCompare(コンペア=比較)するサービスもある。
それぞれWeb上で利用できるサービスがあるので、今回はそれらをメモ。

Minify、BeautifyのWebサービス

スポンサーリンク

Minifyのみ

Compressor

Minifyのみだが、javaScriptとCSSと言ってるわりに HTMLも行けたりする単純さ。
ソースを貼り basic か powerfull を選ぶと(powerfullが良い)ソースを表示。超シンプル。
変数を勝手に変えたりしない素直なところが好き。

Minify CSS

シングス [Things]さん作。CSSのMinifyのみ。ファイルアップロードかソースのペーストで圧縮。複数アップロード可能。

Beautifyのみ

Online javascript beautifier

javaScriptのBeautifyのみ。インデントをどうするかなど整形の設定もできる。

Styleneat – CSS Organizer

CSSのBeautifyのみ。Optionsで整形の設定ができる。

どんなファイルでもいける、マルチな「Pretty Diff」

Pretty Diff

これは、Minify、Beautifyはもちろん Compare(コンペア=比較)までできちゃうサイト。
ファイル形式も、javaScript、CSS、HTMLでもOK。

多数のサービスをまとめたページ「cleancss.com」

cleancss.com

このページはMinify、Beautify、その他のいろいろなサービスの一覧。
JSON, Perl, PHP, Python, Ruby, SQL, XMLなどのデータフォーマットも扱えるようだ。

ちょっと注意メモ

Minifyは当然ながら「コメント」も削除される。
私の場合、自作のjsではコメントが大事(記憶のよりどころww)だったりするので、Minifyする前のファイルのバックアップは必ずしている。

WordPressの「style.css」も、コメント部分が無くなると、テーマとして認識されなくなる。
そこで「style.css」は@import url( ) で他のCSSを読み込むだけにしている。これなら「style.css」以外のファイルをMinifyできるので。


マルチな「Pretty Diff」だけで他は要らないんじゃないかと思うが、なぜかMinifyは「Compressor」がお気に入り。Beautifyする場合はその都度適当にサービスを選んでいる。

本サイトのcanvas用javaScriptをミニファイしたところ、4.7KBから3.4KBにファイルサイズが減った。約72%になったということか。元が小さ過ぎて実感無いけど(笑)、塵も積もれば…なのだろう。

Share on FacebookTweet about this on TwitterShare on Google+

関連記事

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ!

サイトにSNSへのシェアボタンを設置したからには、OGPの設置もしたほうがイイですね。 OGPの設置は、サイトの <head>部分の <me [記事を読む]

Googleから広告を大きくしろと言われて直したら良くなった件と、SEOについて(余談です)

本サイトや ブログ「ほんっとにはじめてのHTML5」でGoogle AdSenseの広告を貼っています。 その「ほんっとに...」に対して、Googleから「 [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^