Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 36 Ad

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

Download to read offline

シードラウンドスタートアップ、株式会社アクトキャットのサービスを高速化した時のノウハウ共有スライドです。「お願いカンパニー」というiPhone/Android向けQA系アプリでの実例です。ネイティブアプリですが、中のほとんどはWebView出できている、ハイブリットアプリです。

アクトキャットは「自由をつくる」をビジョンとしているシードな真面目な会社です。Open network labに投資頂いております。

シードラウンドスタートアップ、株式会社アクトキャットのサービスを高速化した時のノウハウ共有スライドです。「お願いカンパニー」というiPhone/Android向けQA系アプリでの実例です。ネイティブアプリですが、中のほとんどはWebView出できている、ハイブリットアプリです。

アクトキャットは「自由をつくる」をビジョンとしているシードな真面目な会社です。Open network labに投資頂いております。

Advertisement
Advertisement

More Related Content

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

More from Koichiro Sumi (20)

Advertisement

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

  1. 1. スタートアップでも
 これだけはやっておこう!
 1人日で出来るサービス高速化
 〜弊社の実施談まとめ〜
  2. 2. はじめに、⾃自⼰己紹介 この資料料は   2012年年5⽉月創業のスタートアップ。   Actcat,  Inc.  の⾓角が書いています。     まだまだシードステージ。   ⾃自⼰己資本  +  Open  network  lab  のみの   ⼩小さな資本でやりくりってます。 Actcat,  Inc.   代表取締役CEO  ⾓角  幸⼀一郎郎 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   2
  3. 3. 次に、この資料料の⽬目的 レイテンシが⼤大事だ! サービスは早いレスポンでなければ! とはいえ、 やれてない、スタートアップが多い。 簡単なやつだけセレクト。 これだけはやっておこうよ! と伝える資料料です。 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   3
  4. 4. ⼈人助けで稼げるアプリ お願いカンパニー   =>  このアプリを基にした資料料です。 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   4
  5. 5. プロローグ Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   5
  6. 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. 7. ⾼高速化前のアプリの状況 ブラウザベースなので遅いぜ!です 表⽰示速度度(秒)   6   5   4   3   表⽰示速度度(秒)   2   1   0   iPhone4   iPhone4S   iPhone5   Android   4.0   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   7
  8. 8. ⼯工数   1⼈人⽇日頑張る   だけ!! Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   8
  9. 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
  10. 10. サービス内改良良編 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   10
  11. 11. WebFontの使⽤用の廃⽌止 Webfontが最近流流⾏行行っているけど、   使うものだけpngで切切り出し、   もしくはテキストにしたら   ちょっと早くなったよ!     200m  secぐらい? Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   11
  12. 12. PNGの圧縮  その1 •  背景画像とかPNG使ってるよね。   これを最⼤大限圧縮しよう!   •  Fireworksデータを含んだままのPNGで、   リリースしたんだ、最初。   10秒ぐらい初回かかったぜ!w   5000m  sec  削減!   •  少なくてもFireworksデータは   含まないで出⼒力力しようw Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   12
  13. 13. PNGの圧縮  その2 オススメ!Drag&Dropスパっと圧縮。   元々やってたので効果不不明。やるべし!   http://tinypng.org/ Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   13
  14. 14. PNG-­‐>JPEGで圧縮 •  背景とかは透過しなくてよいところは、   JPEGにしたほうが軽いぜ!   •  これはいつもうちは、   Photoshopでやってるぜ!   •  100m  sec以上は早くなると思うぜ!   地下鉄内とかならなおさらだぜ! Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   14
  15. 15. CSS/JS  軽量量化 •  CSSとJSは軽量量化しようぜ!   当たり前だけど。   •  ウェブでツールもたくさんあるよ!   •  まぁ、Rails使いなら、   rake  assets:precompile  RAILS_ENV=production   するだけだけどね!   ※元々やってたから効果分かってない   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   15
  16. 16. JSの遅延ロード •  Javascriptを<head>で呼んでるサービスは 本当に勿体無い!   •  Bodyの最後で呼ぶようにするだけで 1000m  sec  早く!Do  it  now!!!   (うちはそれぐらい早くなった)   •  Mixpanel系のコードを⾃自動でheadに書い てたんだけど、gemがbodyに書くのに対 応していたので、マジ楽対応できた。   Railsかみー!   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   16
  17. 17. 正しいHTML •  当たり前だけど、HTMLが間違ってると   レンダリングはすごく遅くなります。   •  <div>のとじ忘れがあるとか   だけでも遅くなります。   Imgにwidthがついていたほうが早い   とかもあります。   •  なるべく正しく書きましょうー!   (具体的な効果は計測していません)   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   17
  18. 18. インフラ編 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   18
  19. 19. プロキシサーバ使おうぜ! •  Nginx  +  Passenger  が   Rails構成では安定・早いです。   •  静的ファイルはNginx側で返させましょう   •  これだけでかなり早くなるよー   (※元からnginxだったので効果不不明) Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   19
  20. 20. 静的ファイルはキャッシュ! •  Expires  header   というのをつけましょう!   nginx.conf  で   •  クライント側でファイルを持つようにな るので、リクエストレスポンスの数もヘ リ、すごく⾼高速化します Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   20
  21. 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. 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. 23. サーバ選定 •  国内サーバを使⽤用しましょう!   –  Herokuとか使ってる、   お⾺馬⿅鹿鹿なスタートアップいない?   ※弊社も⼀一部では使ってます。好きです。   –  HerokuはUSのEC2。EC2の東京リージョンと⽐比 べると、レイテンシの差が⾮非常にでかいよ!   •  CDNはいらない?   –  EC2の東京リージョンなら、近いから、   CDNとか使う必要ないと思います。   –  動画配信とかは別だけど。   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   23
  24. 24. うまくいかなかった⾼高速化法 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   24
  25. 25. HTML5  Application  Cache •  Application  cache   っていう技術がHTML5から⼊入ってます。   ブラウザに明⽰示的にずっと、   htmlだろうがなんだろうが   キャッシュさせらるんです   •  ただ、なんか結構気まぐれで、   このファイルはiOSはキャッシュするけど Androidはキャッシュしてくれないとかあり ました。     •  HTML5はスタートアップは触らないほうが良良 いと思います!(もっと他のことに時間を!   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   25
  26. 26. おすすめツール&ブック Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   26
  27. 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. 28. おすすめ本 •  ハイパフォーマンスWebサイト-­‐―⾼高速サ イトを実現する14のルール-­‐Steve-­‐Souders   http://www.amazon.co.jp/dp/487311361X Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   28
  29. 29. まとめ Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   29
  30. 30. ⾼高速化後のアプリの状況 ユーザ⼤大喜び!アクセス速度度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
  31. 31. 簡単4ステップ☆ 1.  ハイパフォーマンスウェブサイトで学習   2.  Yslow  で検証・実施項⽬目の決定   3.  ググって頑張って実施   4.  Yslowで確認 Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   31
  32. 32. メッセージ •  ユーザの時間を⼤大切切にしよう!   楽しいアプリだと思ってもらおう!   (⽂文中に出てきてないけどw)   •  ⾼高速化は新機能よりテンション上がる よ!機能と違って、誰もが喜んでくれる。   •  ⾯面倒臭がらずに、少なくても、   この資料料記載の分ぐらいはしよう!   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   32
  33. 33. おわりに Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   33
  34. 34. お願い お願いカンパニーの   ダウンロードお願いします! iPhone  /  iPod  Touch http://acat.in/wishi Android http://acat.in/wisha Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   34
  35. 35. 資料料作成会社 会社名 株式会社アクトキャット 設⽴立立年年 2012年年5⽉月10⽇日 代表取締役 ⾓角  幸⼀一郎郎 本社所在地 東京都港区⾚赤坂8丁⽬目9番14号  ローザ⾚赤坂  107号室 サービス紹介 お願いカンパニー  for  iOS  /  Android   ユーザが悩み、相談、疑問などを投稿、他ユーザが回答するサービス。 投稿者に選ばれるとポイントが貰え、景品に交換できるのが特徴。   その他実績 40以上のiOS/Android/Webアプリの企画設計開発運⽤用実績   ⼤大⼿手広告代理理店等との受託開発、コンサルティング実績   Copyright  2012©  Actcat,  Inc.  All  Rights  Reserved.   35
  36. 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

×