スマートフォンWebアプリ最適化”3つの極意”
Upcoming SlideShare
Loading in...5
×
 

スマートフォンWebアプリ最適化”3つの極意”

on

  • 5,998 views

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

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

Statistics

Views

Total Views
5,998
Slideshare-icon Views on SlideShare
5,466
Embed Views
532

Actions

Likes
29
Downloads
41
Comments
0

7 Embeds 532

http://ofsilvers.hatenablog.com 499
https://twitter.com 23
http://tweetedtimes.com 5
http://localhost 2
http://sc.dotbranch.com 1
http://twitter.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    スマートフォンWebアプリ最適化”3つの極意” スマートフォンWebアプリ最適化”3つの極意” Presentation Transcript

    • スマートフォンWebアプリ最適化“3つの極意”- ストレスフリーのスマホコーディング術 - ネットビジネス総合事業本部 Webデベロッパー 石本 光司 2012.11.17 @Tap App Awards Smartphone UI
    • @t32k
    • www.ca-girlstalk.jp
    • agenda- なぜWeb Perf.なのか?- Web Perf.のための3つの極意- Web Perf.のためのTools- まとめ
    • なぜ Web Perf.なのか?
    • Android Design Principles
    • Make important things fast重要なものを速くするすべてのアクションは等価ではありません。例えば、カメラのシャッターボタンや、音楽プレーヤーの休止ボタンなど何がアプリで最も重要か決めて、簡単にすぐに使えるようにしてください。 Design Principles | Android Developers
    • iOS Human Interface Design Guidelines
    • Direct Manipulation/Feedback直接操作・フィードバックユーザは、画面上のオブジェクトを、別のコントロールを通じてではなく直接操作すると、より深く 作業に関わることになり、アクションの結果をより簡単に理解できます。ユーザは、コントロールを操作しているときは即座のフィードバック を期待し、処理時間が長くかかっているときには状況の最新情報が得られると助かります。 iOS Human Interface Guidelines: Human Interface Principles
    • User Interface ユーザーインターフェイス
    • User eXperience ユーザー体験
    • FlowFlow is an "optimal experience"that is "intrinsically enjoyable."
    • 人間がそのときしていることに、 完全に浸り、精力的に集中してい る感覚に特徴づけられ、完全にの めり込んでいて、その過程が活発 さにおいて成功しているような活 動における、精神的な状態をい う。ZONE、ピークエクスペリエ ンスとも呼ばれる。 フロー - WikipediaMihaly Csikszentmihalyi,
    • フローの構成要素1. 明確な目的2. 専念と集中、注意力の限定された分野への高度な集中3. 自己に対する意識の感覚の低下、活動と意識の融合4. 時間感覚のゆがみ5. 直接的で即座な反応6. 能力の水準と難易度とのバランス7. 状況や活動を自分で制御している感覚8. 活動に本質的な価値がある、だから活動が苦にならない
    • フローの構成要素1. 明確な目的2. 専念と集中、注意力の限定された分野への高度な集中3. 自己に対する意識の感覚の低下、活動と意識の融合4. 時間感覚のゆがみ5. 直接的で即座な反応6. 能力の水準と難易度とのバランス7. 状況や活動を自分で制御している感覚8. 活動に本質的な価値がある、だから活動が苦にならない
    • Web AppsResponsiveness 応答性
    • 0.1sPowers of 10: Time Scales in User Experience
    • もし、ユーザー自身の行動が直接 起因して画面上で何かが起きてい るのだとユーザーに感じてほしい のであれば、0.1秒がその応答時間 の限界である。 10の累乗: ユーザーエクスペリエンスにおける時間スケール ‒ U-SiteJakob Nielsen
    • Web Perf.のための3つの極意
    • developer.yahoo.com/performance/rules.html
    • 35developer.yahoo.com/performance/rules.html
    • developers.google.com/speed/docs/best-practices/rules_intro
    • 31developers.google.com/speed/docs/best-practices/rules_intro
    • 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
    • Web Perf.のための3つの極意数を減らす 量を減らす 無駄を減らす
    • VS.Web Apps Native Apps
    • VS.Web Apps Native Apps
    • VS.Web Apps Native Apps
    • VS.Web Apps Native Apps
    • 数を減らす VS.Web Apps Native Apps
    • 量を減らす 数を減らす VS. Web Apps Native Apps
    • 無駄を減らす量を減らす 数を減らす VS. Web Apps Native Apps
    • 数を減らす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を設定する
    • 量を減らす1. コンポーネントをGzipする2. JavaScriptとCSSは外部ファイル化する3. JavaScriptとCSSを縮小化する4. Cookieサイズを減らす5. 画像を最適化する6. リクエストサイズを減らす7. 静的コンテンツはクッキーなしドメインから読み込む8. 使用していないCSSは削除する9. HTMLを縮小化する10. 適切なサイズの画像を提供する
    • 無駄を減らす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. フィルターは避ける
    • 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 codingselenium browserstack mogotest require sprockets jQuery Mobile Sencha jQuery UI Sproutcore Selenium Jenkins QUnit Jasmine jstestdriver from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • ヽ(´ω`;)ノヽ(´ω`;)ノヽ(´ω`;)ノヽ(´ω`;)ノヽ(´ω`;)ノヽ(´ω`;)ノ
    • Web Perf.のためのTools
    • Tooling in the Web App Development Lifecycle from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • Boilerplatefrom: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • html5boilerplate.com/mobile/
    • Authoring Abstractions from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • Frameworks
    • backbonejs.org
    • Iteration Workflowfrom: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • incident57.com/codekit/
    • www.sublimetext.com
    • Performance Tuningfrom: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • developers.google.com/chrome-developer-tools/
    • Build & Optimization from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    • gruntjs.com
    • 続きは... Frontrend powered by CyberAgent
    • まとめ
    • Fast is better than slow遅いより速いほうがいいGoogle は、Google のサイトのページから余計なビットやバイトを削ぎ落とし、サーバー環境の効率を向上させることで、自己の持つスピード記録を何度も塗り替えてきました。検索結果の平均応答時間は 1 秒足らずです。Google が新しいサービスをリリースするときには、常にスピードを念頭に置いています。モバイル アプリケーションをリリースするときも同じです。今後も、さらなるスピード アップを目指して努力を続けていきます。 Ten things Google has found to be true – Google
    • ユーザーあたりの日別検索数 ヘッダー遅延の持続的影響 from: The User and Business Impact of Server Delays, Additional Bytes, and HTTP Chunking in Web Search: Velocity 2009
    • Thank you :)
    • 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/