[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
SlideShare a Scribd company logo

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

•
•
Koichiro Sumi
Koichiro Sumi

シードラウンドスタートアップ、株式会社アクトキャットのサービスを高速化した時のノウハウ共有スライドです。「お願いカンパニー」というiPhone/Android向けQA系アプリでの実例です。ネイティブアプリですが、中のほとんどはWebView出できている、ハイブリットアプリです。 アクトキャットは「自由をつくる」をビジョンとしているシードな真面目な会社です。Open network labに投資頂いております。

1 of 36
Downloaded 103 times
スタートアップでも
 これだけはやっておこう！
 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
おすすめツール&ブック Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   26
おすすめツール •  Firefox  Plugin  Yslow   –  https://addons.mozilla.org/ja/firefox/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

More Related Content

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