- ストレスフリーのスマホコーディング術 -

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

ネットビジネス総合事業本部 Webデベロッパー 石本 光司2012.11.17 @Tap App Awards Smartphone UI

@t32k

www.ca-girlstalk.jp

- なぜWeb Perf.なのか？

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

- Web Perf.のためのTools

- まとめ

agenda

なぜWeb Perf.なのか？

Android Design Principles

Make important things fast

すべてのアクションは等価ではありません。

例えば、カメラのシャッターボタンや、音楽プレーヤーの休止ボ

タンなど何がアプリで最も重要か決めて、簡単にすぐに使えるよ

うにしてください。

重要なものを速くする

Design Principles | Android Developers

iOS Human InterfaceDesign Guidelines

Direct Manipulation/Feedback

ユーザは、画面上のオブジェクトを、別のコントロールを通じて

ではなく直接操作すると、より深く 作業に関わることになり、ア

クションの結果をより簡単に理解できます。

ユーザは、コントロールを操作しているときは即座のフィードバ

ック を期待し、処理時間が長くかかっているときには状況の最新

情報が得られると助かります。

直接操作・フィードバック

iOS Human Interface Guidelines: Human Interface Principles

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

User eXperienceユーザー体験

FlowFlow is an "optimal experience" that is "intrinsically enjoyable."

Mihaly Csikszentmihalyi,

人間がそのときしていることに、

完全に浸り、精力的に集中してい

る感覚に特徴づけられ、完全にの

めり込んでいて、その過程が活発

さにおいて成功しているような活

動における、精神的な状態をい

う。ZONE、ピークエクスペリエ

ンスとも呼ばれる。フロー - Wikipedia

1. 明確な目的

2. 専念と集中、注意力の限定された分野への高度な集中

3. 自己に対する意識の感覚の低下、活動と意識の融合

4. 時間感覚のゆがみ

5. 直接的で即座な反応

6. 能力の水準と難易度とのバランス

7. 状況や活動を自分で制御している感覚

8. 活動に本質的な価値がある、だから活動が苦にならない

フローの構成要素

1. 明確な目的

2. 専念と集中、注意力の限定された分野への高度な集中

3. 自己に対する意識の感覚の低下、活動と意識の融合

4. 時間感覚のゆがみ

5. 直接的で即座な反応

6. 能力の水準と難易度とのバランス

7. 状況や活動を自分で制御している感覚

8. 活動に本質的な価値がある、だから活動が苦にならない

フローの構成要素

Responsiveness応答性

Web Apps

0.1sPowers of 10: Time Scales in User Experience

Jakob Nielsen

もし、ユーザー自身の行動が直接

起因して画面上で何かが起きてい

るのだとユーザーに感じてほしい

のであれば、0.1秒がその応答時間

の限界である。 10の累乗： ユーザーエクスペリエンスにおける時間スケール ‒ U-Site

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

developer.yahoo.com/performance/rules.html

developer.yahoo.com/performance/rules.html

35

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

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

31

Make Fewer HTTP Requests

Use a Content Delivery Network (CDN)

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

Mini! JavaScript and CSS

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make Ajax Cacheable

Flush Bu"er Early

Use GET for Ajax Requests

Postload Components

Preload Components

Reduce the Number of DOM Elements

Split Components Across Domains

Minimize Number of iframes

Avoid 404s

Reduce Cookie Size

Use Cookie-Free Domains for Components

Minimize DOM Access

Develop Smart Event Handlers

Choose <link> Over @import

Avoid Filters

Optimize Images

Optimize CSS Sprites

Do Not Scale Images in HTML

Make favicon.ico Small and Cacheable

Keep Components Under 25 KB

Pack Components Into a Multipart Document

Avoid Empty Image src

Leverage browser caching

Leverage proxy caching

Minimize DNS lookups

Minimize redirects

Avoid bad requests

Combine external JavaScript

Combine external CSS

Combine images using CSS sprites

Optimize the order of styles and scripts

Avoid document.write

Avoid CSS @import

Prefer asynchronous resources

Parallelize downloads across hostnames

Minimize request size

Serve static content from a cookieless domain

Enable compression

Remove unused CSS

Mini! JavaScript

Mini! CSS

Mini! HTML

Defer loading of JavaScript

Optimize images

Serve scaled images

Serve resources from a consistent URL

Use e#cient CSS selectors

Avoid CSS expressions

Put CSS in the document head

Speci! image dimensions

Speci! a character set

Defer parsing of JavaScript

Make landing page redirects cacheable

数を減らす 無駄を減らす量を減らす

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

Web Apps

VS.

Native Apps

Web Apps

VS.

Native Apps

Web Apps

VS.

Native Apps

Web Apps

VS.

Native Apps

Web Apps

VS.

Native Apps

数を減らす

Web Apps

VS.

Native Apps

数を減らす量を減らす

Web Apps

VS.

Native Apps

数を減らす無駄を減らす

量を減らす

数を減らす1. HTTPリクエストを減らす

2. ExpiresまたはCache-Controlヘッダーを追加する

3. DNSルックアップを減らす

4. リダイレクトを避ける

5. 重複スクリプトを取り除く

6. Ajaxをキャッシュ可能にする

7. AjaxリクエストはGETを使用する

8. コンポーネントの後読みする

9. コンポーネントの先読みする

10. CSSスプライトを最適化する

11. favicon.icoは小さくキャッシュ可能にする

12. 複数ドキュメントにコンポーネントをまとめる

13. 空のIMG src=""は避ける

14. プロキシーキャッシングを活用する

15. 不正なリクエストは避ける

16. 外部JavaScriptをまとめる

17. 外部CSSをまとめる

18. リソースは一貫したURLで提供する

19. ランディングページのリダイレクトはキャッシュ

可能にする

20. 並列DLを可能にするためにホスト名を分ける

21. ETagを設定する

1. コンポーネントをGzipする

2. JavaScriptとCSSは外部ファイル化する

3. JavaScriptとCSSを縮小化する

4. Cookieサイズを減らす

5. 画像を最適化する

6. リクエストサイズを減らす

7. 静的コンテンツはクッキーなしドメインから読み込む

8. 使用していないCSSは削除する

9. HTMLを縮小化する

10. 適切なサイズの画像を提供する

量を減らす

1. CDNを使用する

2. スタイルシートは上部設置する

3. スクリプトは下部に設置する

4. CSSエクスプレッションは避ける

5. 早めにバッファーをフラッシュする

6. iframeの数を減らす

7. 404は避ける

8. DOMアクセスを最小限にする

9. 効率的なイベントハンドラを開発する

10. @importではなく<link>タグを使用する

11. フィルターは避ける

12. コンポーネントは25KBより小さくする

13. document.writeを避ける

14. 非同期にリソースを読み込む

15. JavaScriptの読み込みを遅延させる

16. 効率の良いCSSセレクタを使用する

17. 画像サイズを指定する

18. 文字セットを指定する

19. JavaScriptのパースを遅延させる

20. DOM要素の数を減らす

21. HTMLで画像サイズを変更しない

無駄を減らす

sass compass less stylus markdown haml jade co!eescript 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

(ヽ́ ω ` ;)ノ

(ヽ́ ω ` ;)ノ

(ヽ́ ω ` ;)ノ

(ヽ́ ω ` ;)ノ

(ヽ́ ω ` ;) ノ

(ヽ́ ω ` ;) ノ

Web Perf.のためのTools

Tooling in the Web App Development Lifecycle

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

Boilerplate

from: 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 Workflow

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

incident57.com/codekit/

www.sublimetext.com

Performance Tuning

from: 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

$ank 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/