More Related Content
Similar to スタートアップ向け!1人日でできるサービスの高速化方法と成果 (20)
More from Koichiro Sumi (20)
スタートアップ向け!1人日でできるサービスの高速化方法と成果
- 6. 今回対象のアプリの構成
• サーバ
– Ruby
on
Rails
– MySQL
• クライアント
– iPhone
Native(Obj-‐C)
– Android
Native(Java)
iPhone/Androidどちらもネイティブですが、
画⾯面のほとんどはWebViewで、WebViewを
ネイティブコードでフックしてる感じです。
審査不不要でアプデ出来るぜ!
両デバイス対応でコスパ⾼高いぜ!です。
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
6
- 7. ⾼高速化前のアプリの状況
ブラウザベースなので遅いぜ!です
表⽰示速度度(秒)
6
5
4
3
表⽰示速度度(秒)
2
1
0
iPhone4
iPhone4S
iPhone5
Android
4.0
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
7
- 8. ⼯工数
1⼈人⽇日頑張る
だけ!!
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
8
- 9. ⾼高速化後のアプリの状況
アクセス速度度
100%アップ!
表⽰示速度度(秒)
3.5
3
2.5
2
1.5
表⽰示速度度(秒)
1
0.5
0
iPhone4
iPhone4S
iPhone5
Android
4.0
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
9
- 12. PNGの圧縮 その1
• 背景画像とかPNG使ってるよね。
これを最⼤大限圧縮しよう!
• Fireworksデータを含んだままのPNGで、
リリースしたんだ、最初。
10秒ぐらい初回かかったぜ!w
5000m
sec
削減!
• 少なくてもFireworksデータは
含まないで出⼒力力しようw
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
12
- 14. PNG-‐>JPEGで圧縮
• 背景とかは透過しなくてよいところは、
JPEGにしたほうが軽いぜ!
• これはいつもうちは、
Photoshopでやってるぜ!
• 100m
sec以上は早くなると思うぜ!
地下鉄内とかならなおさらだぜ!
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
14
- 15. CSS/JS
軽量量化
• CSSとJSは軽量量化しようぜ!
当たり前だけど。
• ウェブでツールもたくさんあるよ!
• まぁ、Rails使いなら、
rake
assets:precompile
RAILS_ENV=production
するだけだけどね!
※元々やってたから効果分かってない
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
15
- 16. JSの遅延ロード
• Javascriptを<head>で呼んでるサービスは
本当に勿体無い!
• Bodyの最後で呼ぶようにするだけで
1000m
sec
早く!Do
it
now!!!
(うちはそれぐらい早くなった)
• Mixpanel系のコードを⾃自動でheadに書い
てたんだけど、gemがbodyに書くのに対
応していたので、マジ楽対応できた。
Railsかみー!
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
16
- 17. 正しいHTML
• 当たり前だけど、HTMLが間違ってると
レンダリングはすごく遅くなります。
• <div>のとじ忘れがあるとか
だけでも遅くなります。
Imgにwidthがついていたほうが早い
とかもあります。
• なるべく正しく書きましょうー!
(具体的な効果は計測していません)
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
17
- 19. プロキシサーバ使おうぜ!
• Nginx
+
Passenger
が
Rails構成では安定・早いです。
• 静的ファイルはNginx側で返させましょう
• これだけでかなり早くなるよー
(※元からnginxだったので効果不不明)
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
19
- 20. 静的ファイルはキャッシュ!
• Expires
header
というのをつけましょう!
nginx.conf
で
• クライント側でファイルを持つようにな
るので、リクエストレスポンスの数もヘ
リ、すごく⾼高速化します
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
20
- 21. 静的ファイルおまけ
location
~
^/assets/
{
root
/var/www/rails/public;
expires
max;
add_header
Cache-‐Control
public;
}
#
↑のだけのだとfavicon.icoなどが含まれないので。
location
~
.*.(jpg|JPG|gif|GIF|png|PNG|swf|SWF|
css|CSS|js|JS|inc|INC|ico|ICO)
{
root
/var/www/rails/public;
expires
max;
add_header
Cache-‐Control
public;
}
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
21
- 22. 静的ファイルは圧縮で!
gzip
on;
gzip_min_length
1000;
gzip_types
text/plain
text/css
application/x-‐
javascript
application/atom+xml;
って書くだけだよ!
• Htmlやcss/jsが圧縮されて渡されるので、リ
クエストの数も少なくなり、⾮非常に⾼高速化。
• 200m
secぐらいは?
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
22
- 23. サーバ選定
• 国内サーバを使⽤用しましょう!
– Herokuとか使ってる、
お⾺馬⿅鹿鹿なスタートアップいない?
※弊社も⼀一部では使ってます。好きです。
– HerokuはUSのEC2。EC2の東京リージョンと⽐比
べると、レイテンシの差が⾮非常にでかいよ!
• CDNはいらない?
– EC2の東京リージョンなら、近いから、
CDNとか使う必要ないと思います。
– 動画配信とかは別だけど。
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
23
- 24. うまくいかなかった⾼高速化法
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
24
- 25. HTML5
Application
Cache
• Application
cache
っていう技術がHTML5から⼊入ってます。
ブラウザに明⽰示的にずっと、
htmlだろうがなんだろうが
キャッシュさせらるんです
• ただ、なんか結構気まぐれで、
このファイルはiOSはキャッシュするけど
Androidはキャッシュしてくれないとかあり
ました。
• HTML5はスタートアップは触らないほうが良良
いと思います!(もっと他のことに時間を!
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
25
- 27. おすすめツール
• Firefox
Plugin
Yslow
– https://addons.mozilla.org/ja/firefox/addon/
yslow/
– このプラグインの指⽰示に従うだけで
ばり早くなります。
• TinyPng
– http://tinypng.org/
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
27
- 28. おすすめ本
• ハイパフォーマンスWebサイト-‐―⾼高速サ
イトを実現する14のルール-‐Steve-‐Souders
http://www.amazon.co.jp/dp/487311361X
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
28
- 31. 簡単4ステップ☆
1. ハイパフォーマンスウェブサイトで学習
2. Yslow
で検証・実施項⽬目の決定
3. ググって頑張って実施
4. Yslowで確認
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
31
- 32. メッセージ
• ユーザの時間を⼤大切切にしよう!
楽しいアプリだと思ってもらおう!
(⽂文中に出てきてないけどw)
• ⾼高速化は新機能よりテンション上がる
よ!機能と違って、誰もが喜んでくれる。
• ⾯面倒臭がらずに、少なくても、
この資料料記載の分ぐらいはしよう!
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
32
- 34. お願い
お願いカンパニーの
ダウンロードお願いします!
iPhone
/
iPod
Touch
http://acat.in/wishi
Android
http://acat.in/wisha
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
34
- 35. 資料料作成会社
会社名 株式会社アクトキャット
設⽴立立年年 2012年年5⽉月10⽇日
代表取締役 ⾓角 幸⼀一郎郎
本社所在地 東京都港区⾚赤坂8丁⽬目9番14号 ローザ⾚赤坂 107号室
サービス紹介
お願いカンパニー for
iOS
/
Android
ユーザが悩み、相談、疑問などを投稿、他ユーザが回答するサービス。
投稿者に選ばれるとポイントが貰え、景品に交換できるのが特徴。
その他実績
40以上のiOS/Android/Webアプリの企画設計開発運⽤用実績
⼤大⼿手広告代理理店等との受託開発、コンサルティング実績
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
35
- 36. なんでも相談お問い合わせ
会社名 株式会社アクトキャット
設⽴立立年年 2012年年5⽉月10⽇日
代表取締役 ⾓角 幸⼀一郎郎
本社所在地 東京都港区⾚赤坂8丁⽬目9番14号 ローザ⾚赤坂 107号室
下記までお気軽にお問い合わせ下さい
担当: ⾓角 幸⼀一郎郎#
Mail: koichiro.sumi@actcat.co.jp#
Tel : 03-6434-5905#
HP : http://www.actcat.co.jp/
Copyright
2012©
Actcat,
Inc.
All
Rights
Reserved.
36