スマートフォン奥别产アプリ最适化”３つの极意”
- 1. スマートフォン Webアプリ最適化“３つの極意” - ストレスフリーのスマホコーディング術 - ネットビジネス総合事業本部 Webデベロッパー 石本 光司 2012.11.17 @Tap App Awards Smartphone UI
- 2. @t32k
- 4. agenda - なぜWeb Perf.なのか？ - Web Perf.のための3つの極意 - Web Perf.のためのTools - まとめ
- 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
- 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=/slideshow/web-15218538/15218538/""は避ける 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. favicon1.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 Mini?cation & 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
- 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
- 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
- 49. Performance Tuning from: Talk: Tooling & The Webapp Development Stack ? Paul Irish
- 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/