スタートアップでも
  これだけはやっておこう!
1人日で出来るサービス高速化
  〜弊社の実施談まとめ〜
はじめに、⾃自⼰己紹介この資料料は	  2012年年5⽉月創業のスタートアップ。	  Actcat,	  Inc.	  の⾓角が書いています。	  	  まだまだシードステージ。	  ⾃自⼰己資本	  +	  Open	  network	  ...
次に、この資料料の⽬目的レイテンシが⼤大事だ!サービスは早いレスポンでなければ!とはいえ、やれてない、スタートアップが多い。簡単なやつだけセレクト。これだけはやっておこうよ!と伝える資料料です。      Copyright	  2012©	 ...
⼈人助けで稼げるアプリお願いカンパニー	  =>	  このアプリを基にした資料料です。       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	  Nativ...
⾼高速化前のアプリの状況ブラウザベースなので遅いぜ!です                                          表⽰示速度度(秒)	     6	     5	     4	     3	              ...
⼯工数     	  1⼈人⽇日頑張る	    だけ!!   Copyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     8
⾼高速化後のアプリの状況アクセス速度度100%アップ!                                        表⽰示速度度(秒)	  3.5	     3	  2.5	     2	  1.5	             ...
サービス内改良良編 Copyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     10
WebFontの使⽤用の廃⽌止Webfontが最近流流⾏行行っているけど、	  使うものだけpngで切切り出し、	  もしくはテキストにしたら	  ちょっと早くなったよ!	  	  200m	  secぐらい?         Copyrigh...
PNGの圧縮  その1•  背景画像とかPNG使ってるよね。	     これを最⼤大限圧縮しよう!	  •  Fireworksデータを含んだままのPNGで、	     リリースしたんだ、最初。	     10秒ぐらい初回かかったぜ!w	   ...
PNGの圧縮  その2オススメ!Drag&Dropスパっと圧縮。	  元々やってたので効果不不明。やるべし!	  http://tinypng.org/        Copyright	  2012©	  Actcat,	  Inc.	  A...
PNG-­‐>JPEGで圧縮•  背景とかは透過しなくてよいところは、	     JPEGにしたほうが軽いぜ!	  •  これはいつもうちは、	     Photoshopでやってるぜ!	  •  100m	  sec以上は早くなると思うぜ!	...
CSS/JS	  軽量量化•  CSSとJSは軽量量化しようぜ!	     当たり前だけど。	  •  ウェブでツールもたくさんあるよ!	  •  まぁ、Rails使いなら、	   rake	  assets:precompile	  RAIL...
JSの遅延ロード•  Javascriptを<head>で呼んでるサービスは   本当に勿体無い!	  •  Bodyの最後で呼ぶようにするだけで   1000m	  sec	  早く!Do	  it	  now!!!	     (うちはそれぐ...
正しいHTML•  当たり前だけど、HTMLが間違ってると	     レンダリングはすごく遅くなります。	  •  <div>のとじ忘れがあるとか	     だけでも遅くなります。	     Imgにwidthがついていたほうが早い	     ...
インフラ編Copyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     18
プロキシサーバ使おうぜ!•  Nginx	  +	  Passenger	  が	     Rails構成では安定・早いです。	  •  静的ファイルはNginx側で返させましょう	  •  これだけでかなり早くなるよー	     (※元からn...
静的ファイルはキャッシュ!•  Expires	  header	     というのをつけましょう!	     nginx.conf	  で	  •  クライント側でファイルを持つようにな   るので、リクエストレスポンスの数もヘ   リ、すご...
静的ファイルおまけ	  location	  ~	  ^/assets/	  	  {	  	  	  	  	  	  	  	  	  	  	  	  	  root	  /var/www/rails/public;	  	  	  	 ...
静的ファイルは圧縮で!gzip	  on;	  gzip_min_length	  1000;	  gzip_types	  	  	  	  	  	  text/plain	  text/css	  application/x-­‐java...
サーバ選定•  国内サーバを使⽤用しましょう!	    –  Herokuとか使ってる、	       お⾺馬⿅鹿鹿なスタートアップいない?	       ※弊社も⼀一部では使ってます。好きです。	    –  HerokuはUSのEC2。EC...
うまくいかなかった⾼高速化法    Copyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     24
HTML5	  Application	  Cache•  Application	  cache	     っていう技術がHTML5から⼊入ってます。	     ブラウザに明⽰示的にずっと、	     htmlだろうがなんだろうが	     ...
おすすめツール&ブック  Copyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     26
おすすめツール•  Firefox	  Plugin	  Yslow	     –  https://addons.mozilla.org/ja/firefox/addon/      yslow/	     –  このプラグインの指⽰示に従うだ...
おすすめ本•  ハイパフォーマンスWebサイト-­‐―⾼高速サ   イトを実現する14のルール-­‐Steve-­‐Souders	     http://www.amazon.co.jp/dp/487311361X            Co...
まとめCopyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     29
⾼高速化後のアプリの状況ユーザ⼤大喜び!アクセス速度度100%アップ!                                           表⽰示速度度(秒)	     3.5	        3	     2.5	      ...
簡単4ステップ☆1.    ハイパフォーマンスウェブサイトで学習	  2.    Yslow	  で検証・実施項⽬目の決定	  3.    ググって頑張って実施	  4.    Yslowで確認            Copyright	  2...
メッセージ•  ユーザの時間を⼤大切切にしよう!	     楽しいアプリだと思ってもらおう!	     (⽂文中に出てきてないけどw)	  •  ⾼高速化は新機能よりテンション上がる   よ!機能と違って、誰もが喜んでくれる。	  •  ⾯面倒...
おわりにCopyright	  2012©	  Actcat,	  Inc.	  All	  Rights	  Reserved.	     33
お願い     お願いカンパニーの	     ダウンロードお願いします!iPhone	  /	  iPod	  Touch   http://acat.in/wishiAndroid  http://acat.in/wisha         ...
資料料作成会社会社名       株式会社アクトキャット設⽴立立年年    2012年年5⽉月10⽇日代表取締役     ⾓角  幸⼀一郎郎本社所在地     東京都港区⾚赤坂8丁⽬目9番14号  ローザ⾚赤坂  107号室サービス紹介    ...
なんでも相談お問い合わせ会社名       株式会社アクトキャット設⽴立立年年    2012年年5⽉月10⽇日代表取締役     ⾓角  幸⼀一郎郎本社所在地     東京都港区⾚赤坂8丁⽬目9番14号  ローザ⾚赤坂  107号室下記までお...
Upcoming SlideShare
Loading in …5
×

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

16,767 views

Published on

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

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

1 Comment
73 Likes
Statistics
Notes
No Downloads
Views
Total views
16,767
On SlideShare
0
From Embeds
0
Number of Embeds
1,118
Actions
Shares
0
Downloads
103
Comments
1
Likes
73
Embeds 0
No embeds

No notes for slide

スタートアップ向け!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/wishiAndroid 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

×