【Webアプリ】簡単にできる高速化対応

high-speed_webapp_title

こんにちわ。竪月です。

最近Webアプリ開発に携わることが多くなって、セキュリティ強化、ローカル環境でも動かしたい、通信量を減らして高速化したい、ページまるごと再読み込みさせたくないなど、Webアプリならではの要求がいろいろあるな、と思ったので、そのなかでも、今日は割と簡単にできる「通信の高速化」について書きたいと思います。

ちなみに、フロントエンド(クライアント側⇒つまりPCやケータイのブラウザ)側とバックエンド(サーバサイド)どちらでも高速化の対応をすることはできますが、サーバサイドは敷居が高い(システム全体に影響する可能性がある、専門知識が必要)ため、今回は割と手軽にでき、影響範囲が限定的なフロントエンドに特化した内容で進めていきます。


Webアプリ高速化のためにやるべきこと

①通信回数を減らす

画像、CSS、Javascriptファイルのを減らすことで、通信回数を減らしましょう。

 

■CSS スプライトツールを使う

ファイルを減らす試みとの1つとして、cssスプライトツールを用いて画像を1まとめにするのは、簡単で有効な手段です。

 

  • CSS Sprite Generator 

http://spritegen.website-performance.org/

Webサービスでは有名どころですね。いろんな言語に対応してて、1Mまで画像をzipにまとめてアップロード、画像やcssの設定をして作成ボタンを押したらできあがり。

表示されたcssのソースとpngを適宜組み込めばOKです。簡単。

画質を%指定、圧縮とかの指定もできますね。(私が使ったときはサイズ小さくならなかったですが。。)

 

  • sass/Compass

http://sass-lang.com/

http://compass-style.org/

業務で使うとなるとWebサービスはちょっと、となると思うので、その場合は他の手段を考えましょう。

sass/Compassは使った事なかったのですが、sass(Syntactically Awesome Style Sheets)はcssを記述するためのメタ言語の一つで、sassで記述したソースはcssファイルへ変換できるそうです。

Compassと組み合わせて使う事で、CUI(GUIツールもあるらしい)でCSSスプライトの生成ができます。

学習コストがかかりそうですが、sassを覚えるとcssのかゆいところをプログラムして拡張するなりできるみたいなので、今度ちゃんと使ってみよーと思います。

とりあえず、今回は「簡単に」がテーマなので、詳細はまたの機会に。

 

■複数のjsやcssファイルをひとつにまとめる

あとは、ツールを使ってもいいけど、jsやcssファイル自体をまとめちゃうのもありだと思います。

要するにHTTP通信回数を減らせばいいので。

<script>src="http://www.sample.tokyo/common.js"></script> <!-- ①共通 -->
<script>src="http://www.sample.tokyo/util.js"></script> <!-- ②ユーティリティ -->
<script>src="http://www.sample.tokyo/lib.js"></script> <!-- ③ライブラリ -->
<script>src="http://www.sample.tokyo/game.js"></script> <!-- ④ゲーム用 -->

①②③をフツーにcommon.jsにまとめてもいいし、import.jsを使ってすべてをまとめてもいいですね。

http://etc.dounokouno.com/import.js/


②通信量を減らす

画像(png)やCSS、Javascriptファイルのサイズを小さくすることで通信量を減らしましょう。

 

■画像圧縮ツールを使う

手軽なWebサービスも充実しているし、FireWorksやPhotoshopを使っても圧縮できます。

 

  • Tiny Png

https://creative.adobe.com/products/fireworks

パンダが目印、有名なWebサービスですね。

パンダの隣の点線枠内にpng画像をドラッグすると、圧縮したpngがダウンロードできます。

 

  • Adobe FireWorks

https://creative.adobe.com/products/fireworks

以前FireWorksでいろいろ圧縮対応したときは、圧縮率もよく画質もそんなに落ちなかったので、もしお手元にあるならお勧めします。

ファイル保存時にpngの情報を削ぎ落とし、さらに色も落とす事で、圧縮率50〜80%くらいいけました。

もちろん有償ツールなので、持っていない場合は使えないのが難点です。。

 

■ミニファイツールを使う

  • HTML Minifier (そのまま)

http://www.willpeavy.com/minifier/

HTMLファイルをミニファイするWebサービスです。

元となるソースをコピペして「minify」ボタンを押すと、ミニファイされたhtmlが出力されます。お手軽。

 

  • Yui Compressor

http://yui.github.io/yuicompressor/

cssとjavascriptを圧縮するツールで、Web版とダウンロード版があります。

Web版のほうは、ソースをコピペし、ソース種別(JS,CSS)を選び、オプション(難読化するか、など)を設定して「Compress」ボタンをポチッとするだけ。

結果ページには、圧縮後のソースと圧縮率などの情報が表示されます。私が試したときは21%の圧縮率でした。

圧縮後のファイルは「Download Compressed File」でダウンロードしましょう。

 

ダウンロード版はgitHubで公開されてます。

https://github.com/yui/yuicompressor/downloads

 


 まとめ

今回は「簡単にできる」がテーマだったので、単純にファイル数を減らしたりミニファイしたりすることだけをまとめてみました。

ただ、実際に高速化対応する際は、メンテナンスについても考慮しなければいけないと思います。ソースファイルをまとめすぎたら、やはり構成的にもソース的にも可読性は下がりますし、難読化したソースをデバッグするのも大変です。画像の圧縮も、見た目に影響が出てしまうところなので、ただ小さく、と安易に考えるのも気をつけたいところです。

 

余談ですが、最近よく見かけるようになったフラットデザインについて私なりに分析すると、グラデーション、立体感を排除することで色数を減らしたり(元の画像サイズも小さく、圧縮しても粗くなりにくい)、ボタン等に画像を使わない(cssのみで表現する)ことで結果的に高速化にも繋がって、しかも「モダン」「オシャレ」っぽい感じがするので、流行るのも納得だなと思いました。

Webアプリを作る際は、この辺りも意識していけたらいいですね。

Enjoy Making your web apps faster!

 

コメントを残す

メールアドレスが公開されることはありません。