Smartphoneフロントエンドの最適化と最前線
AboutMe          ソーシャルゲーム統括部           フロントエンド担当           ExGame メンテナ @sou 城戸 総史(きど そうし)
Display: 960 x 640        CPU: 800MHz (?)        Memory: 512MB        3G Networkリッチな表現 x 限られた性能
重い      軽いリッチな表現 x 限られた性能
Front-end Optimization    「80% of the end-user response time is          spent on the front-end.」    2∼3sec               ...
1. 計測する2. TTI にフォーカスする3. 最適化する
1. 計測する     Google Page Speed     Date.now     HTTP Archive
HTTP Archive
1. 計測する2. TTI にフォーカスする3. 最適化する
TTI: Time to Interact           「お、動いた」    画面開発  用           「お、動かせる」
1. 計測する2. TTI にフォーカスする3. 最適化する
原則
1. MAKE FEWER HTTP REQUESTS2. USE A CDN3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS5. PUT STYLESHEETS AT THE TOP6. PUT SCRIP...
1. MAKE FEWER HTTP REQUESTS2. USE A CDN         リクエスト数を削る3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS                     ブロ...
リクエスト数を削る画像の base64 encode、スプライト化JavaScript, CSS の Unify
ブロックを回避するSCRIPT は後続処理をブロックする回避方法 body の下部に置く async, defer を使う
<script defer type="text/javascript" src="...
遅延させる
TTI: Time to Interact  最優先  遅れても良い負荷部分の処理を後回しに
Smartphone の負荷部分 HTML のパース処理 画像取得(empty cache) JavaScript ライブラリの evaluation
①   HTML をパーススキップ    ②   画像を encode して CSS 化         その CSS を遅延ロード①②
リクエスト数を削るブロックを回避する遅延させる
まとめ
計測する 「何が問題か」TTI にフォーカスするTTI 短縮のための最適化を行う ブロッキングを避ける  defer / async を活用する 遅延可能なものは追い出して後に回す
Front-end Optimization     なめらかな体験を     つくる取り組みHD             高度・複雑化     UI/UX
Question ?
Smartphoneフロントエンドの最適化と最前線            最前線
これからの Web     アニメーションHD             高度・複雑化     UI/UX
アニメーション優れたオーサリングツールに支えられたベクタベースのアニメーションフォーマット     → Flash のような
HTML5 + Flash
Image Objectvar img = new Image;img.onload = function() {    ....}img.src = “path.png”;
SWF Objectvar img = new SWF;img.onload = function() {    ....}img.src = “path.swf”;
demo
Mobile Web + Game の現場は楽しい !
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Frontend optimization dena_creativeseminar

1,262 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,262
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Frontend optimization dena_creativeseminar

  1. 1. Smartphoneフロントエンドの最適化と最前線
  2. 2. AboutMe ソーシャルゲーム統括部 フロントエンド担当 ExGame メンテナ @sou 城戸 総史(きど そうし)
  3. 3. Display: 960 x 640 CPU: 800MHz (?) Memory: 512MB 3G Networkリッチな表現 x 限られた性能
  4. 4. 重い 軽いリッチな表現 x 限られた性能
  5. 5. Front-end Optimization 「80% of the end-user response time is spent on the front-end.」 2∼3sec 800ms 未満
  6. 6. 1. 計測する2. TTI にフォーカスする3. 最適化する
  7. 7. 1. 計測する Google Page Speed Date.now HTTP Archive
  8. 8. HTTP Archive
  9. 9. 1. 計測する2. TTI にフォーカスする3. 最適化する
  10. 10. TTI: Time to Interact 「お、動いた」 画面開発 用 「お、動かせる」
  11. 11. 1. 計測する2. TTI にフォーカスする3. 最適化する
  12. 12. 原則
  13. 13. 1. MAKE FEWER HTTP REQUESTS2. USE A CDN3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS5. PUT STYLESHEETS AT THE TOP6. PUT SCRIPTS AT THE BOTTOM7. AVOID CSS EXPRESSIONS8. MAKE JS AND CSS EXTERNAL9. REDUCE DNS LOOKUPS10. MINIFY JS11. AVOID REDIRECTS12. REMOVE DUPLICATE SCRIPTS13. CONFIGURE ETAGS14. MAKE AJAX CACHEABLE
  14. 14. 1. MAKE FEWER HTTP REQUESTS2. USE A CDN リクエスト数を削る3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS ブロックを回避する5. PUT STYLESHEETS AT THE TOP6. PUT SCRIPTS AT THE BOTTOM 遅延させる7. AVOID CSS EXPRESSIONS8. MAKE JS AND CSS EXTERNAL9. REDUCE DNS LOOKUPS10. MINIFY JS11. AVOID REDIRECTS12. REMOVE DUPLICATE SCRIPTS13. CONFIGURE ETAGS14. MAKE AJAX CACHEABLE
  15. 15. リクエスト数を削る画像の base64 encode、スプライト化JavaScript, CSS の Unify
  16. 16. ブロックを回避するSCRIPT は後続処理をブロックする回避方法 body の下部に置く async, defer を使う
  17. 17. <script defer type="text/javascript" src="...
  18. 18. 遅延させる
  19. 19. TTI: Time to Interact 最優先 遅れても良い負荷部分の処理を後回しに
  20. 20. Smartphone の負荷部分 HTML のパース処理 画像取得(empty cache) JavaScript ライブラリの evaluation
  21. 21. ① HTML をパーススキップ ② 画像を encode して CSS 化 その CSS を遅延ロード①②
  22. 22. リクエスト数を削るブロックを回避する遅延させる
  23. 23. まとめ
  24. 24. 計測する 「何が問題か」TTI にフォーカスするTTI 短縮のための最適化を行う ブロッキングを避ける defer / async を活用する 遅延可能なものは追い出して後に回す
  25. 25. Front-end Optimization なめらかな体験を つくる取り組みHD 高度・複雑化 UI/UX
  26. 26. Question ?
  27. 27. Smartphoneフロントエンドの最適化と最前線 最前線
  28. 28. これからの Web アニメーションHD 高度・複雑化 UI/UX
  29. 29. アニメーション優れたオーサリングツールに支えられたベクタベースのアニメーションフォーマット → Flash のような
  30. 30. HTML5 + Flash
  31. 31. Image Objectvar img = new Image;img.onload = function() { ....}img.src = “path.png”;
  32. 32. SWF Objectvar img = new SWF;img.onload = function() { ....}img.src = “path.swf”;
  33. 33. demo
  34. 34. Mobile Web + Game の現場は楽しい !
  35. 35. ありがとうございました。

×