DeNA Creative Seminar @ Shinjuku NS Building on 21st Match.

1. Smartphone
フロントエンドの最適化と最前線

2. AboutMe
ソーシャルゲーム統括部
フロントエンド担当
ExGame メンテナ
@sou
城戸 総史（きど そうし）

3. Display: 960 x 640
CPU: 800MHz (?)
Memory: 512MB
3G Network
リッチな表現 x 限られた性能

4. 重い 軽い
リッチな表現 x 限られた性能

5. Front-end Optimization
「80% of the end-user response time is
spent on the front-end.」
2∼3sec 800ms 未満

6. 1. 計測する
2. TTI にフォーカスする
3. 最適化する

7. 1. 計測する
Google Page Speed
Date.now
HTTP Archive

8. HTTP Archive

9. 1. 計測する
2. TTI にフォーカスする
3. 最適化する

10. TTI: Time to Interact
「お、動いた」
画面
開発
用
「お、動かせる」

11. 1. 計測する
2. TTI にフォーカスする
3. 最適化する

12. 原則

13. 1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
3. ADD AN EXPIRES HEADER
4. GZIP COMPONENTS
5. PUT STYLESHEETS AT THE TOP
6. PUT SCRIPTS AT THE BOTTOM
7. AVOID CSS EXPRESSIONS
8. MAKE JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE

14. 1. MAKE FEWER HTTP REQUESTS
2. USE A CDN リクエスト数を削る
3. ADD AN EXPIRES HEADER
4. GZIP COMPONENTS
ブロックを回避する
5. PUT STYLESHEETS AT THE TOP
6. PUT SCRIPTS AT THE BOTTOM
遅延させる
7. AVOID CSS EXPRESSIONS
8. MAKE JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE

15. リクエスト数を削る
画像の base64 encode、スプライト化
JavaScript, CSS の Unify

16. ブロックを回避する
SCRIPT は後続処理をブロックする
回避方法
body の下部に置く
async, defer を使う

17. <script defer type="text/javascript" src="...

18. 遅延させる

19. TTI: Time to Interact
最優先
遅れても良い
負荷部分の処理を後回しに

20. Smartphone の負荷部分
HTML のパース処理
画像取得（empty cache）
JavaScript ライブラリの evaluation

21. ① HTML をパーススキップ
② 画像を encode して CSS 化
その CSS を遅延ロード
①
②

22. リクエスト数を削る
ブロックを回避する
遅延させる

23. まとめ

24. 計測する
「何が問題か」
TTI にフォーカスする
TTI 短縮のための最適化を行う
ブロッキングを避ける
defer / async を活用する
遅延可能なものは追い出して後に回す

25. Front-end Optimization
なめらかな体験を
つくる取り組み
HD
高度・複雑化
UI/UX

26. Question ?

27. Smartphone
フロントエンドの最適化と最前線
最前線

28. これからの Web
アニメーション
HD
高度・複雑化
UI/UX

29. アニメーション
優れたオーサリングツールに支えられた
ベクタベースの
アニメーションフォーマット
→ Flash のような

30. HTML5 + Flash

31. Image Object
var img = new Image;
img.onload = function() {
....
}
img.src = “path.png”;

32. SWF Object
var img = new SWF;
img.onload = function() {
....
}
img.src = “path.swf”;

33. demo

34. Mobile Web + Game の現場は
楽しい !

35. ありがとうございました。