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

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

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

iPhone, iPad, Andorid
３冠達成！

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

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

11
海外は
通信回線が遅い

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

Period is two weeks 
Dec 2014

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

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

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

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

わかったこと
・JSONのリクエストによりも画像の容量が多い

・無駄な画像のリクエストがある 
・見せたい画像の順番になっていない

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

画像通信と言えば SDWebImage

SDWebImageのコードを読む
URL URL URL URL
URL
URL
URL
URL
URL
URL
SDWebImageDownloader

Request Queue
SDWebImageDownloaderOperation
UIImageView#sd_setImageWithURL

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

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

募集一覧画像の先読み
まだ画面上に表示

されていない画像を

事前に取得

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

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

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

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

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

Request Queue

Facebook が語るモバイル･チューニングの極意：これで途上国のインターネットも OK！
弊社CTOからの思し召し
Facebookは90% のイメージで

WebP フォーマットが用いられている“Facebook経由で知るなど
“接続スピード品質に応じて

機能の振る舞いを適正化していく

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

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

Webpに変換する画像サーバの構成
CloudFront
S3
EC2Dockernginx
AWS
iPhone
任意にリサイズ

&

WebPに変換
オリジナル画像
キャッシュ画像
（CDN)

wantedly/nginx-image-server
Open Source !!

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

通信帯域の推測
URL
通信開始・終了の経過時間と

受領画像サイズから推測
30KB

通信帯域の推測
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: 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: rtt 0.98s, 45KB, Cached: NO, https://83f6512cef.jpeg


MONITORING: rtt 2.56s, 30KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg


MONITORING: rtt 2.53s, 11KB, Cached: NO, https://65e-55cee3d4f2eb.jpeg

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

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

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

さらなる改善方法案
・MessagePackでJSONを圧縮する

・SPYDで通信コネクションをまとめる

・通信帯域による同時接続数の調整

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

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

More Related Content