狠狠撸

スタートアップでも?
これだけはやっておこう！?
1人日で出来るサービス高速化?
?弊社の実施谈まとめ?

はじめに、?自?己紹介
この資料料は
?
2012年年5?月創業のスタートアップ。
?
Actcat,
?Inc.
?の?角が書いています。
?

?
まだまだシードステージ。
?
?自?己資本
?+
?Open
?network
?lab
?のみの
?
?小さな資本でやりくりってます。

Actcat,
?Inc.
?
代表取締役CEO
??角 ?幸?一郎郎
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 2

次に、この資料料の?目的
レイテンシが?大事だ！
サービスは早いレスポンでなければ！

とはいえ、
やれてない、スタートアップが多い。

簡単なやつだけセレクト。
これだけはやっておこうよ！
と伝える資料料です。

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 3

?人助けで稼げるアプリ
お愿いカンパニー
?
=>
?このアプリを基にした資料料です。

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 4

プロローグ

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 5

今回対象のアプリの構成
?? サーバ
?
–? Ruby
?on
?Rails
?
–? MySQL
?
?? クライアント
?
–? iPhone
?Native(Obj-?‐C)
?
–? Android
?Native(Java)
?
iPhone/Androidどちらもネイティブですが、
?
画?面のほとんどはWebViewで、WebViewを
?
ネイティブコードでフックしてる感じです。
?
審査不不要でアプデ出来るぜ！
?
両デバイス対応でコスパ?高いぜ！です。

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 6

?高速化前のアプリの状況
ブラウザベースなので遅いぜ！です
表?示速度度(秒)
?
6
?
5
?
4
?
3
?
?
2
?
1
?
0
?
iPhone4
? iPhone4S
? iPhone5
? Android
?
4.0
?

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 7

?工数

?
1?人?日頑張る
?
だけ！！
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 8

?高速化後のアプリの状況

アクセス速度度
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

サービス内改良良編

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 10

WebFontの使?用の廃?止
Webfontが最近流流?行行っているけど、
?
使うものだけpngで切切り出し、
?
もしくはテキストにしたら
?
ちょっと早くなったよ！
?

?
200m
?secぐらい？

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 11

PNGの圧縮 ?その1
?? 背景画像とかPNG使ってるよね。
?
これを最?大限圧縮しよう！
?

?? Fireworksデータを含んだままのPNGで、
?
リリースしたんだ、最初。
?
10秒ぐらい初回かかったぜ！w
?
5000m
?sec
?削減！
?

?? 少なくてもFireworksデータは
?
含まないで出?力力しようw
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 12

PNGの圧縮 ?その2
オススメ！Drag&Dropスパっと圧縮。
?
元々やってたので効果不不明。やるべし！
?
http://tinypng.org/

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 13

PNG-?‐>JPEGで圧縮
?? 背景とかは透過しなくてよいところは、
?
JPEGにしたほうが軽いぜ！
?

?? これはいつもうちは、
?
Photoshopでやってるぜ！
?

?? 100m
?sec以上は早くなると思うぜ！
?
地下鉄内とかならなおさらだぜ！

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 14

CSS/JS
?軽量量化
?? CSSとJSは軽量量化しようぜ！
?
当たり前だけど。
?

?? ウェブでツールもたくさんあるよ！
?

?? まぁ、Rails使いなら、
?
rake
?assets:precompile
?RAILS_ENV=production
?
するだけだけどね！
?

※元々やってたから効果分かってない
?

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 15

JSの遅延ロード
?? Javascriptを<head>で呼んでるサービスは
本当に勿体無い！
?

?? Bodyの最後で呼ぶようにするだけで
1000m
?sec
?早く！Do
?it
?now!!!
?
(うちはそれぐらい早くなった)
?

?? Mixpanel系のコードを?自動でheadに書い
てたんだけど、gemがbodyに書くのに対
応していたので、マジ楽対応できた。
?
Railsかみー！
?
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 16

正しいHTML
?? 当たり前だけど、HTMLが間違ってると
?
レンダリングはすごく遅くなります。
?

?? <div>のとじ忘れがあるとか
?
だけでも遅くなります。
?
Imgにwidthがついていたほうが早い
?
とかもあります。
?

?? なるべく正しく書きましょうー！
?
(具体的な効果は計測していません)
?
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 17

インフラ編

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 18

プロキシサーバ使おうぜ！
?? Nginx
?+
?Passenger
?が
?
Rails構成では安定?早いです。
?

?? 静的ファイルはNginx側で返させましょう
?

?? これだけでかなり早くなるよー
?
(※元からnginxだったので効果不不明)

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 19

静的ファイルはキャッシュ！
?? Expires
?header
?
というのをつけましょう！
?
nginx.conf
?で
?

?? クライント側でファイルを持つようにな
るので、リクエストレスポンスの数もヘ
リ、すごく?高速化します

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 20

静的ファイルおまけ

?location
?~
?^/assets/
?
?{
?

?
?
?
?
?
?
?
?
?
?
?
?root
?/var/www/rails/public;
?

?
?
?
?
?
?
?
?
?
?
?
?expires
?max;
?

?
?
?
?
?
?
?
?
?
?
?
?add_header
?Cache-?‐Control
?public;
?

?
?
?
?
?
?
?
?}
?
#
?↑のだけのだとfavicon1.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

静的ファイルは圧縮で！
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

サーバ選定
?? 国内サーバを使?用しましょう！
?
–? Herokuとか使ってる、
?
お?馬?鹿鹿なスタートアップいない？
?
※弊社も?一部では使ってます。好きです。
?
–? HerokuはUSのEC2。EC2の東京リージョンと?比
べると、レイテンシの差が?非常にでかいよ！
?

?? CDNはいらない？
?
–? EC2の東京リージョンなら、近いから、
?
CDNとか使う必要ないと思います。
?
–? 動画配信とかは別だけど。
?

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 23

うまくいかなかった?高速化法

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 24

HTML5
?Application
?Cache
?? Application
?cache
?
っていう技術がHTML5から?入ってます。
?
ブラウザに明?示的にずっと、
?
htmlだろうがなんだろうが
?
キャッシュさせらるんです
?

?? ただ、なんか結構気まぐれで、
?
このファイルはiOSはキャッシュするけど
Androidはキャッシュしてくれないとかあり
ました。
?

?
?? HTML5はスタートアップは触らないほうが良良
いと思います！(もっと他のことに時間を！
?
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 25

おすすめツール&ブック

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 26

おすすめツール
?? Firefox
?Plugin
?Yslow
?
–? https://addons.mozilla.org/ja/?refox/addon/
yslow/
?
–? このプラグインの指?示に従うだけで
?
ばり早くなります。
?

?? TinyPng
?
–? http://tinypng.org/

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 27

おすすめ本
?? ハイパフォーマンスWebサイト-?‐―?高速サ
イトを実現する14のルール-?‐Steve-?‐Souders
?
http://www.amazon.co.jp/dp/487311361X

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 28

まとめ

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 29

?高速化後のアプリの状況
ユーザ?大喜び！アクセス速度度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.
? 30

簡単4ステップ☆
1.? ハイパフォーマンスウェブサイトで学習
?
2.? Yslow
?で検証?実施項?目の決定
?
3.? ググって頑張って実施
?
4.? Yslowで確認

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 31

メッセージ
?? ユーザの時間を?大切切にしよう！
?
楽しいアプリだと思ってもらおう！
?
(?文中に出てきてないけどｗ)
?

?? ?高速化は新機能よりテンション上がる
よ！機能と違って、誰もが喜んでくれる。
?

?? ?面倒臭がらずに、少なくても、
?
この資料料記載の分ぐらいはしよう！
?

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 32

おわりに

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 33

お愿い
お愿いカンパニーの
?
ダウンロードお愿いします！

iPhone
?/
?iPod
?Touch
http://acat.in/wishi

Android
http://acat.in/wisha
Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 34

資料料作成会社
会社名株式会社アクトキャット
設?立立年年 2012年年5?月10?日
代表取締役 ?角 ?幸?一郎郎
本社所在地東京都港区?赤坂8丁?目9番14号 ?ローザ?赤坂 ?107号室

サービス紹介

お愿いカンパニー ?for
?iOS
?/
?Android
?
ユーザが悩み、相談、疑問などを投稿、他ユーザが回答するサービス。
投稿者に選ばれるとポイントが貰え、景品に交換できるのが特徴。
?

その他実績
40以上のiOS/Android/Webアプリの企画設計開発運?用実績
?
?大?手広告代理理店等との受託開発、コンサルティング実績
?

Copyright
?2012?
?Actcat,
?Inc.
?All
?Rights
?Reserved.
? 35

なんでも相談お問い合わせ
会社名株式会社アクトキャット
設?立立年年 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

狠狠撸

スタートアップ向け！1人日でできるサービスの高速化方法と成果

Recommended

More Related Content

Similar to スタートアップ向け！1人日でできるサービスの高速化方法と成果 (20)

More from Koichiro Sumi (20)

スタートアップ向け！1人日でできるサービスの高速化方法と成果