Your SlideShare is downloading. ×
Frontend optimization dena_creativeseminar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Frontend optimization dena_creativeseminar

1,069
views

Published on

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

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,069
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 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. 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. リクエスト数を削る画像の 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 Objectvar img = new Image;img.onload = function() { ....}img.src = “path.png”;
  • 32. SWF Objectvar img = new SWF;img.onload = function() { ....}img.src = “path.swf”;
  • 33. demo
  • 34. Mobile Web + Game の現場は楽しい !
  • 35. ありがとうございました。