frontend optimization dena_creativeseminar

Smartphoneフロントエンドの最適化と最前線

ソーシャルゲーム統括部

フロントエンド担当

ExGame メンテナ

AboutMe

@sou城戸総史（きどそうし）

リッチな表現 x 限られた性能

Display: 960 x 640

CPU: 800MHz (?)

Memory: 512MB

3G Network

リッチな表現 x 限られた性能

重い軽い

Front-end Optimization

「80% of the end-user response time is

spent on the front-end.」

2～3sec 800ms 未満

1. 計測する

2. TTI にフォーカスする

3. 最適化する

Google Page Speed

Date.now

HTTP Archive

1. 計測する

HTTP Archive

1. 計測する


3. 最適化する

開発用画面

TTI: Time to Interact

「お、動いた」「お、動かせる」

1. 計測する


3. 最適化する

原則

1. MAKE FEWER HTTP REQUESTS

2. USE A CDN3. ADD AN EXPIRES HEADER

4. GZIP COMPONENTS

5. PUT STYLESHEETS AT THE TOP

6. PUT SCRIPTS AT THE BOTTOM

7. AVOID CSS EXPRESSIONS

8. MAKE JS AND CSS EXTERNAL

9. REDUCE DNS LOOKUPS

10. MINIFY JS11. AVOID REDIRECTS

12. REMOVE DUPLICATE SCRIPTS

13. CONFIGURE ETAGS

14. MAKE AJAX CACHEABLE

1. MAKE FEWER HTTP REQUESTS

2. USE A CDN3. ADD AN EXPIRES HEADER

4. GZIP COMPONENTS

5. PUT STYLESHEETS AT THE TOP

6. PUT SCRIPTS AT THE BOTTOM

7. AVOID CSS EXPRESSIONS

8. MAKE JS AND CSS EXTERNAL

9. REDUCE DNS LOOKUPS

10. MINIFY JS11. AVOID REDIRECTS

12. REMOVE DUPLICATE SCRIPTS

13. CONFIGURE ETAGS

14. MAKE AJAX CACHEABLE

リクエスト数を削る

ブロックを回避する

遅延させる


画像の base64 encode、スプライト化

JavaScript, CSS の Unify


SCRIPT は後続処理をブロックする

回避方法

body の下部に置く

async, defer を使う

遅延させる

TTI: Time to Interact

最優先

遅れても良い

負荷部分の処理を後回しに

Smartphone の負荷部分

HTML のパース処理

画像取得（empty cache）

JavaScript ライブラリの evaluation

HTML をパーススキップ

画像を encode して CSS 化その CSS を遅延ロード

①

①

②

②



遅延させる

まとめ

計測する

「何が問題か」

TTI にフォーカスする

TTI 短縮のための最適化を行う

ブロッキングを避ける

defer / async を活用する

遅延可能なものは追い出して後に回す

Front-end Optimization

なめらかな体験をつくる取り組みHD

UI/UX高度・複雑化

Question ?

Smartphoneフロントエンドの最適化と最前線最前線

これからの Web

HD

UI/UX高度・複雑化

アニメーション

優れたオーサリングツールに支えられた

ベクタベースの

アニメーションフォーマット

→ Flash のような

アニメーション

HTML5 + Flash

Image Object

var img = new Image;

img.onload = function() {

....

}

img.src = “path.png”;

SWF Object

var img = new SWF;

img.onload = function() {

....

}

img.src = “path.swf”;

Mobile Web + Game の現場は楽しい !

ありがとうございました。

frontend optimization dena_creativeseminar

Technology