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

スタートアップでも 
これだけはやっておこう！ 
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;

}

#
↑のだけのだと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

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

おすすめツール
•  Firefox
Plugin
Yslow

–  https://addons.mozilla.org/ja/ﬁrefox/addon/
yslow/

–  このプラグインの指⽰示に従うだけで

ばり早くなります。

•  TinyPng

–  http://tinypng.org/

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

資料料作成会社
会社名株式会社アクトキャット
設⽴立立年年 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人日でできるサービスの高速化方法と成果

Recomendados

Recomendados

Mais conteúdo relacionado

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

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

Mais de Koichiro Sumi

Mais de Koichiro Sumi (20)

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