Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iOS 通信のパフォーマンス改善 ・ iOSオールスターズ登壇資料

41,192 views

Published on

iOS 通信のパフォーマンス改善 ・ iOSオールスターズ登壇資料

Published in: Technology
  • Be the first to comment

iOS 通信のパフォーマンス改善 ・ iOSオールスターズ登壇資料

  1. 1. 通信のパフォーマンス改善 杉上洋平 エンジニア / ウォンテッドリー株式会社 iOSオールスターズ勉強会
  2. 2. 月間40万人利用 企業7000社 メンバー40人ぐらい
  3. 3. iPhone, iPad, Andorid 3冠達成!
  4. 4. WHY? 通信のパフォーマンス改善
  5. 5. 9 Wantedlyは今年海外進出します! 拠点の人
  6. 6. 10 拠点はアジア!
  7. 7. 11 海外は 通信回線が 遅い
  8. 8. 12 STARTUP ASIA 2014 @ JAKARTA 海外でも素敵な Wantedly    体験を WoWoW
  9. 9. Period is two weeks
 Dec 2014
  10. 10. Team 森田先生ME Full Time iOS EngineeriOS Engineer 銭湯旅人 Half Time ソファーでペアプロスタイルな開発 :)
  11. 11. Analyze
  12. 12. New Relic Mobileで分析 ざっくりなボトルネック調査
  13. 13. Pony Debuggerで細かく分析 リクエスト単位で細かく調査
  14. 14. Pony Debuggerの仕組み iPhone ServerClient Python CocoaPods Chrome Developer Tool
  15. 15. わかったこと ・JSONのリクエストによりも画像の容量が多い ・無駄な画像のリクエストがある
 ・見せたい画像の順番になっていない
  16. 16. PLAN 通信量の大半を占める
 画像の通信を改善する
  17. 17. 画像通信と言えば SDWebImage
  18. 18. SDWebImageのコードを読む URL URL URL URL URL URL URL URL URL URL SDWebImageDownloader Request Queue SDWebImageDownloaderOperation UIImageView#sd_setImageWithURL
  19. 19. SDWebImageのコードを読む URL SDWebImageDownloaderOperation Memory / Disk Cache SDWebImageManager
  20. 20. SDWebImageのバグを発見! マージされたよ!
  21. 21. Let’s Kaizen
  22. 22. 募集一覧画像の先読み まだ画面上に表示 されていない画像を 事前に取得
  23. 23. SDWebImagePrefetcher @interface SDWebImagePrefetcher : NSObject 
 @property (strong, readonly) SDWebImageManager *manager; @property (assign) NSUInteger maxConcurrentDownloads; - (void)prefetchURLs:(NSArray *)urls; URL URL URL
  24. 24. 画像を取得する優先度付け 高 低 高 低 低 Priority
  25. 25. SDWebImageOptions @interface UIImageView (WebCache) - (void)sd_setImageWithURL:(NSURL *)url placeholderImage: (UIImage *)placeholder options:(SDWebImageOptions)options; typedef NS_OPTIONS(NSUInteger, SDWebImageOptions) { SDWebImageLowPriority = 1 << 1, SDWebImageHighPriority = 1 << 8, Change Priority
  26. 26. 遷移元の画像取得をキャンセル 遷移元 遷移先 通信キャンセル 遷移先の画像を優先して表示
  27. 27. SDWebImageManager#cancelAll @interface UIImageView (WebCache) - (void)sd_cancelCurrentImageLoad; @interface SDWebImageManager : NSObject - (void)cancelAll; URL URL URL URL SDWebImageDownloader Request Queue
  28. 28. Facebook が語るモバイル・チューニングの極意:これで途上国のインターネットも OK! 弊社CTOからの思し召し Facebookは90% のイメージで WebP フォーマットが用いられている“Facebook経由で知るなど “接続スピード品質に応じて 機能の振る舞いを適正化していく
  29. 29. 画像フォーマットをWebPに 90KB 30KB SDWebImageはWebPに対応している
  30. 30. SDWebImage/WebP Podfile
 pod ‘SDWebImage/WebP' $ pod install @interface UIImage (WebP) Only Install !
  31. 31. Webpに変換する画像サーバの構成 CloudFront S3 EC2Dockernginx AWS iPhone 任意にリサイズ & WebPに変換 オリジナル画像 キャッシュ画像 (CDN)
  32. 32. wantedly/nginx-image-server Open Source !!
  33. 33. 通信帯域により取得する画像サイズを変更 良い 悪い すごく 悪い 100KB 25KB 6KB 16分の1
  34. 34. 通信帯域の推測 URL 通信開始・終了の経過時間と 受領画像サイズから推測 30KB
  35. 35. 通信帯域の推測 MONITORING: kbps 108.73 [Excellent] average rtt 0.971914 MONITORING: kbps 108.73 [Excellent] average rtt 0.971914 MONITORING: kbps 108.73 [Excellent] average rtt 0.971914 MONITORING: rtt 0.17s, 0KB, Cached: YES, https://e4fb0db8addb.png MONITORING: rtt 0.32s, 0KB, Cached: NO, https://5af9694863de.png MONITORING: rtt 0.35s, 1KB, Cached: NO, https://9b-80a9-37eb4c7182ea.jpeg MONITORING: rtt 0.41s, 9KB, Cached: NO, https://510-a619-10701876ad0c.png MONITORING: rtt 0.01s, 8KB, Cached: YES, https://2aa3646d.jpeg MONITORING: kbps 189.65 [Excellent] average rtt 0.461638 MONITORING: rtt 0.52s, 27KB, Cached: NO, https://b5-bceda20f3034.png MONITORING: rtt 0.40s, 21KB, Cached: NO, https://54a-52cbe1efb0bc.jpeg MONITORING: rtt 0.82s, 33KB, Cached: NO, https://5b-1d537f677f61.png MONITORING: rtt 0.46s, 19KB, Cached: NO, https://-0461512b3080.jpeg MONITORING: rtt 0.26s, 36KB, Cached: NO, https://c2b-e88d33bb56dc.jpeg MONITORING: kbps 159.05 [Excellent] average rtt 0.515586 MONITORING: rtt 0.98s, 45KB, Cached: NO, https://83f6512cef.jpeg MONITORING: kbps 160.66 [Excellent] average rtt 0.569087 MONITORING: rtt 2.56s, 30KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg MONITORING: kbps 130.23 [Excellent] average rtt 1.270392 MONITORING: rtt 2.53s, 11KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg
  36. 36. 最大サイズからキャシュ画像をチェック URL 大 中 小 ① ② ③ ④
  37. 37. HOW? どうやって改善を確認するの?
  38. 38. 改善の確認方法 通信の帯域を制限して体験がよくなっているか
  39. 39. One More Thing
  40. 40. さらなる改善方法案 ・MessagePackでJSONを圧縮する ・SPYDで通信コネクションをまとめる ・通信帯域による同時接続数の調整
  41. 41. エンジニア募集してます https://www.wantedly.com

×