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

1. 通信のパフォーマンス改善
杉上洋平
エンジニア / ウォンテッドリー株式会社
iOSオールスターズ勉強会

5. 月間40万人利用
企業7000社
メンバー40人ぐらい

7. iPhone, iPad, Andorid
３冠達成！

8. WHY?
通信のパフォーマンス改善

9. 9
Wantedlyは今年海外進出します！
拠点の人

10. 10
拠点はアジア！

11. 11
海外は
通信回線が 遅い

12. 12
STARTUP ASIA 2014 ＠ JAKARTA
海外でも素敵な
Wantedly
体験を
WoWoW

13. Period is two weeks
Dec 2014

14. Team
森田先生ME
Full Time
iOS EngineeriOS Engineer
銭湯旅人
Half Time
ソファーでペアプロスタイルな開発 :)

15. Analyze

16. New Relic Mobileで分析
ざっくりなボトルネック調査

17. Pony Debuggerで細かく分析
リクエスト単位で細かく調査

18. Pony Debuggerの仕組み
iPhone
ServerClient
Python
CocoaPods
Chrome Developer Tool

19. わかったこと
・JSONのリクエストによりも画像の容量が多い
・無駄な画像のリクエストがある
・見せたい画像の順番になっていない

20. PLAN
通信量の大半を占める
画像の通信を改善する

21. 画像通信と言えば SDWebImage

22. SDWebImageのコードを読む
URL URL URL URL
URL
URL
URL
URL
URL
URL
SDWebImageDownloader
Request Queue
SDWebImageDownloaderOperation
UIImageView#sd_setImageWithURL

23. SDWebImageのコードを読む
URL
SDWebImageDownloaderOperation
Memory / Disk Cache
SDWebImageManager

24. SDWebImageのバグを発見！
マージされたよ！

25. Let’s
Kaizen

26. 募集一覧画像の先読み
まだ画面上に表示
されていない画像を
事前に取得

27. SDWebImagePrefetcher
@interface SDWebImagePrefetcher : NSObject
@property (strong, readonly) SDWebImageManager *manager;
@property (assign) NSUInteger maxConcurrentDownloads;
- (void)prefetchURLs:(NSArray *)urls;
URL
URL
URL

28. 画像を取得する優先度付け
高
低
高
低
低
Priority

29. 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

30. 遷移元の画像取得をキャンセル
遷移元 遷移先
通信キャンセル
遷移先の画像を優先して表示

31. SDWebImageManager#cancelAll
@interface UIImageView (WebCache)
- (void)sd_cancelCurrentImageLoad;
@interface SDWebImageManager : NSObject
- (void)cancelAll;
URL URL URL URL
SDWebImageDownloader
Request Queue

32. Facebook が語るモバイル･チューニングの極意：これで途上国のインターネットも OK！
弊社CTOからの思し召し
Facebookは90% のイメージで
WebP フォーマットが用いられている“Facebook経由で知るなど
“接続スピード品質に応じて
機能の振る舞いを適正化していく

33. 画像フォーマットをWebPに
90KB
30KB
SDWebImageはWebPに対応している

34. SDWebImage/WebP
Podfile
pod ‘SDWebImage/WebP'
$ pod install
@interface UIImage (WebP)
Only Install !

35. Webpに変換する画像サーバの構成
CloudFront
S3
EC2Dockernginx
AWS
iPhone
任意にリサイズ
&
WebPに変換
オリジナル画像
キャッシュ画像
（CDN)

36. wantedly/nginx-image-server
Open Source !!

37. 通信帯域により取得する画像サイズを変更
良い
悪い
すごく
悪い
100KB
25KB
6KB
16分の１

38. 通信帯域の推測
URL
通信開始・終了の経過時間と
受領画像サイズから推測
30KB

39. 通信帯域の推測
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

40. 最大サイズからキャシュ画像をチェック
URL
大 中 小
① ② ③
④

41. HOW?
どうやって改善を確認するの？

42. 改善の確認方法
通信の帯域を制限して体験がよくなっているか

43. One More Thing

44. さらなる改善方法案
・MessagePackでJSONを圧縮する
・SPYDで通信コネクションをまとめる
・通信帯域による同時接続数の調整

45. エンジニア募集してます
https://www.wantedly.com