http://book.mycom.co.jp/special/tapapp/

1. スマートフォン
Webアプリ最適化“３つの極意”
- ストレスフリーのスマホコーディング術 -
ネットビジネス総合事業本部
Webデベロッパー 石本 光司
2012.11.17 @Tap App Awards Smartphone UI

2. @t32k

3. www.ca-girlstalk.jp

4. agenda
- なぜWeb Perf.なのか？
- Web Perf.のための3つの極意
- Web Perf.のためのTools
- まとめ

5. なぜ Web Perf.なのか？

6. Android Design Principles

7. Make important things fast
重要なものを速くする
すべてのアクションは等価ではありません。
例えば、カメラのシャッターボタンや、音楽プレーヤーの休止ボ
タンなど何がアプリで最も重要か決めて、簡単にすぐに使えるよ
うにしてください。
Design Principles | Android Developers

8. iOS Human Interface
Design Guidelines

9. Direct Manipulation/Feedback
直接操作・フィードバック
ユーザは、画面上のオブジェクトを、別のコントロールを通じて
ではなく直接操作すると、より深く 作業に関わることになり、ア
クションの結果をより簡単に理解できます。
ユーザは、コントロールを操作しているときは即座のフィードバ
ック を期待し、処理時間が長くかかっているときには状況の最新
情報が得られると助かります。
iOS Human Interface Guidelines: Human Interface Principles

10. User Interface
ユーザーインターフェイス

11. User eXperience
ユーザー体験

12. Flow
Flow is an "optimal experience"
that is "intrinsically enjoyable."

13. 人間がそのときしていることに、
完全に浸り、精力的に集中してい
る感覚に特徴づけられ、完全にの
めり込んでいて、その過程が活発
さにおいて成功しているような活
動における、精神的な状態をい
う。ZONE、ピークエクスペリエ
ンスとも呼ばれる。
フロー - Wikipedia
Mihaly Csikszentmihalyi,

14. フローの構成要素
1. 明確な目的
2. 専念と集中、注意力の限定された分野への高度な集中
3. 自己に対する意識の感覚の低下、活動と意識の融合
4. 時間感覚のゆがみ
5. 直接的で即座な反応
6. 能力の水準と難易度とのバランス
7. 状況や活動を自分で制御している感覚
8. 活動に本質的な価値がある、だから活動が苦にならない

15. フローの構成要素
1. 明確な目的
2. 専念と集中、注意力の限定された分野への高度な集中
3. 自己に対する意識の感覚の低下、活動と意識の融合
4. 時間感覚のゆがみ
5. 直接的で即座な反応
6. 能力の水準と難易度とのバランス
7. 状況や活動を自分で制御している感覚
8. 活動に本質的な価値がある、だから活動が苦にならない

16. Web Apps
Responsiveness
応答性

17. 0.1s
Powers of 10: Time Scales in User Experience

18. もし、ユーザー自身の行動が直接
起因して画面上で何かが起きてい
るのだとユーザーに感じてほしい
のであれば、0.1秒がその応答時間
の限界である。
10の累乗： ユーザーエクスペリエンスにおける時間スケール ‒ U-Site
Jakob Nielsen

19. Web Perf.のための3つの極意

20. developer.yahoo.com/performance/rules.html

21. 35
developer.yahoo.com/performance/rules.html

22. developers.google.com/speed/docs/best-practices/rules_intro

23. 31
developers.google.com/speed/docs/best-practices/rules_intro

24. Add Expires or Cache-Control Header
Gzip Components
Put Stylesheets at Top
Put Scripts at Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
Remove Duplicate Scripts

25. Web Perf.のための3つの極意
数を減らす 量を減らす 無駄を減らす

26. VS.
Web Apps Native Apps

27. VS.
Web Apps Native Apps

28. VS.
Web Apps Native Apps

29. VS.
Web Apps Native Apps

30. 数を減らす
VS.
Web Apps Native Apps

31. 量を減らす 数を減らす
VS.
Web Apps Native Apps

32. 無駄を減らす
量を減らす 数を減らす
VS.
Web Apps Native Apps

33. 数を減らす
1. HTTPリクエストを減らす 12. 複数ドキュメントにコンポーネントをまとめる
2. ExpiresまたはCache-Controlヘッダーを追加する 13. 空のIMG src=""は避ける
3. DNSルックアップを減らす 14. プロキシーキャッシングを活用する
4. リダイレクトを避ける 15. 不正なリクエストは避ける
5. 重複スクリプトを取り除く 16. 外部JavaScriptをまとめる
6. Ajaxをキャッシュ可能にする 17. 外部CSSをまとめる
7. AjaxリクエストはGETを使用する 18. リソースは一貫したURLで提供する
8. コンポーネントの後読みする 19. ランディングページのリダイレクトはキャッシュ
9. コンポーネントの先読みする 可能にする
10. CSSスプライトを最適化する 20. 並列DLを可能にするためにホスト名を分ける
11. favicon.icoは小さくキャッシュ可能にする 21. ETagを設定する

34. 量を減らす
1. コンポーネントをGzipする
2. JavaScriptとCSSは外部ファイル化する
3. JavaScriptとCSSを縮小化する
4. Cookieサイズを減らす
5. 画像を最適化する
6. リクエストサイズを減らす
7. 静的コンテンツはクッキーなしドメインから読み込む
8. 使用していないCSSは削除する
9. HTMLを縮小化する
10. 適切なサイズの画像を提供する

35. 無駄を減らす
1. CDNを使用する 12. コンポーネントは25KBより小さくする
2. スタイルシートは上部設置する 13. document.writeを避ける
3. スクリプトは下部に設置する 14. 非同期にリソースを読み込む
4. CSSエクスプレッションは避ける 15. JavaScriptの読み込みを遅延させる
5. 早めにバッファーをフラッシュする 16. 効率の良いCSSセレクタを使用する
6. iframeの数を減らす 17. 画像サイズを指定する
7. 404は避ける 18. 文字セットを指定する
8. DOMアクセスを最小限にする 19. JavaScriptのパースを遅延させる
9. 効率的なイベントハンドラを開発する 20. DOM要素の数を減らす
10. @importではなく<link>タグを使用する 21. HTMLで画像サイズを変更しない
11. フィルターは避ける

36. sass compass less stylus markdown haml
jade coffeescript Ant make rake cake
bash Image compression tools
Minification & concat tooling JSHint
JSLint codekit livereload web-build
handlebars mustache zen coding
selenium browserstack mogotest require
sprockets jQuery Mobile Sencha jQuery
UI Sproutcore Selenium Jenkins QUnit
Jasmine jstestdriver
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

37. ヽ(´ω｀;)ノ
ヽ(´ω｀;)ノ
ヽ(´ω｀;)ノ
ヽ(´ω｀;)ノ
ヽ(´ω｀;)ノ
ヽ(´ω｀;)ノ

38. Web Perf.のためのTools

39. Tooling in the Web App Development Lifecycle
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

40. Boilerplate
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

41. html5boilerplate.com/mobile/

42. Authoring Abstractions
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

44. Frameworks

45. backbonejs.org

46. Iteration Workflow
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

47. incident57.com/codekit/

48. www.sublimetext.com

49. Performance Tuning
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

50. developers.google.com/chrome-developer-tools/

51. Build & Optimization
from: Talk: Tooling & The Webapp Development Stack « Paul Irish

52. gruntjs.com

53. 続きは... Frontrend
powered by CyberAgent

54. まとめ

55. Fast is better than slow
遅いより速いほうがいい
Google は、Google のサイトのページから余計なビットやバイトを削ぎ落
とし、サーバー環境の効率を向上させることで、自己の持つスピード記録を
何度も塗り替えてきました。検索結果の平均応答時間は 1 秒足らずです。
Google が新しいサービスをリリースするときには、常にスピードを念頭に
置いています。モバイル アプリケーションをリリースするときも同じです。
今後も、さらなるスピード アップを目指して努力を続けていきます。
Ten things Google has found to be true – Google

56. ユーザーあたりの日別検索数
ヘッダー遅延の持続的影響
from: The User and Business Impact of Server Delays, Additional Bytes, and HTTP Chunking in Web Search: Velocity 2009

57. Thank you :)

58. photo credit
- http://www.flickr.com/photos/polandeze/394280019/
- http://www.flickr.com/photos/fsvehla/3402701140/
- http://www.flickr.com/photos/kevinsteele/4845215034/
- http://www.flickr.com/photos/shiyazuni/3406692752/
- http://www.flickr.com/photos/titrans/4617500457/