JavaScriptのファイル内容を圧縮する理由など
@debiruさんのツイートにハッとした。(@debiruさんのツイートにはハッとさせられることが多い)
http://twitter.com/debiru/status/642357943560638465
上記ツイートの後
闇雲に「JSは圧縮するもの」という認識で圧縮している人が多いように感じています。
(https://twitter.com/debiru/status/642362384670068736
と、おっしゃっていた。まさに、私がそれ(闇雲に圧縮している人)です…。ごめんなさい。
そこで、JavaScriptの内容をなぜ圧縮するのか考えてみました。誰かの役に立つことはないと思いますが、備忘録的にまとめます。
私の考える圧縮の理由
- ファイルサイズを小さくする
- ↑ によって読み込み速度をあげる
これしか思いつきません。無知だ。
JavaScriptやCSSファイルを圧縮するウェブサービスやツールが話題になった頃に、「あ〜とりあえず圧縮したほうがいいらしいよ〜?」くらいの気持ちで、なんでもかんでも圧縮しはじめた私は、なぜ圧縮するのかなんて考えたことがありません。
しかし、私が制作に携わるサイトは小規模〜中規模でアクセス数も多いとはいえない。圧縮したからといって、読み込み速度の違いを実感することはない。圧縮の前後で明らかに違うのは、JavaScriptファイルのソースコードの可読性のみ…?
聞いてみた
最近とってもお世話になっている@umekichinanoさんにJavaScriptファイルの内容の圧縮について、見解を伺いました。
以下、インタビュー形式の箇条書きでまとめます。
JavaScriptファイルのコードを圧縮する理由は何だと思いますか
- 元々の目的は、サイズダウンすることによってページのレスポンスを早くすることだったかと
- 個人プログラマーはコードを読まれたくなくて圧縮していることも
- 会社等のルールに準じていることも
- アクセス数が少ないと圧縮しても変わらないが、数百億のアクセス数があるレベルになると、多少のサイズダウンでも転送量に差が出る
可読性以外に圧縮しないメリットはあるのでしょうか
- 特にないかもしれない
- 圧縮(によるサイズダウン)はどんなときに必要といえるでしょう
- 重量課金制のサーバ(AWS等)を使う等、転送量を気にする必要があるとき
- JavaScriptやCSSのファイルサイズがとても大きいサイトで、スマートフォンからのアクセス等を考慮したとき
「圧縮することにこの程度のメリットがある、とは言えないが、アクセス数・転送量を考慮するときや、明らかにサイズが大きいファイルをサイズダウンさせるという意味では、十分にメリットがある」という認識で大丈夫でしょうか…
- 今の世の中ではそれで十分かと
- 今後、5G回線が普及して10Gbpsのデータが行き交う世の中になったときは、ほぼ意味のない労力になっているかも
@umekichinanoさん、本当にありがとうございます。理解には程遠いですが、だいぶ雰囲気をつかめました。
ウェブサイトのパフォーマンスやチューニングについて知識がないままでは、この件を理解することはできなさそうなので、今後の課題にします。
あとがきと課題
今私が仕事で携わっている案件の規模では、圧縮することに大きなメリットはなさそうだということがわかりました。
それでも、圧縮しない理由がないなら、ファイルサイズは小さいほうがいいだろうと思うので、今後も業務で制作するサイトのJavaScriptのファイルは圧縮すると思います。
HTMLファイルは圧縮しないの…?
これすごい気になってるんですが、CSSとJSのファイルを圧縮していても、HTMLはしていないサイトって結構見かけるような気がします。(わ、私がそうです。)
個人的に、自分のも他所様のもHTMLのソースコードは見ることが多いので、圧縮されていないほうが助かるのですが、CSSとJavaScriptは圧縮するのにHTMLだけしないのもなぁ。と疑問に思っています。
読みやすさのためだけに圧縮していないのか、他に理由があるのか、圧縮する必要がないのか、勉強したらわかるようになるのかしら。
2015/9/16 20:30 追記
@webcre8さんに説明していただき、↓読んだらだいたい解決しました。HTMLファイルは圧縮しないほうがよさそう。
http://webcre8.jp/investigate/html-implied-specifications.html
参考と課題の記事
- Webフロントエンドパフォーマンスチューニング // Speaker Deck : https://speakerdeck.com/h13i32maru/webhurontoendopahuomansutiyuningu
- ユーザーの体感速度を高めるためのJavaScriptチューニング(前編) | HTML5Experts.jp : https://html5experts.jp/yoshikawa_t/877/
- ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks : http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
- Webサイトのパフォーマンスをチューニングする | PowerCMS ブログ | PowerCMS - カスタマイズする CMS。 : http://www.powercms.jp/blog/2013/02/website_fast.html