モバイル制作におけるパフォーマンス最適化について

モバイルフロントエンド最適化
基礎編 : 2012

ネットビジネス総合事業本部
マークアップエンジニア石本光司
2012.11.10 @Webridge Meeting SP12 featuring Frontrend

Webパフォーマンス最適化のためのコーディング手法心理学から考えるWebパフォーマンス

デザインから考えるハイパフォーマンスWebサイト

今日の流れ
- あなたは何をされていますか？

- どちらが遅いのでしょうか？

- 私たちは何をすべきでしょうか？

- まとめ

あなたは
何をされていますか？

つまり、あなたは？

front-end
back-end

僕は、
フロントエンジニアだ！

高速サイトのためのベストプラクティス
by Yahoo! Developer Network

1. HTTP リクエストを減らす 8. JS/CSSファイルを外部化する

2. CDNを使用する 9. DNSルックアップを減らす

3. ブラウザーキャッシュを有効にする 10. JS/CSSを縮小化する

4. Gzipを有効にする 11. リダイレクトを避ける

5. スタイルシートは上部に設置 12. 重複スクリプトを削除する

6. スクリプトは下部に設置 13. ETagを設定する

7. CSS Expressionsは避ける 14. Ajaxをキャッシュ可能にする

高い
効果
低い

for front-end engineer
難しい易しい
難易度

高い
1
2
3
4 5
6
7
8
効果

9
10
11
12
13
低い

14
for front-end engineer
難しい易しい
難易度

フロントエンドタスク

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

5. スタイルシートは上部に設置

6. スクリプトは下部に設置

7. CSS Expressionsは避ける

8. JS/CSSファイルを外部化する

-------------------------

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

12. 重複スクリプトを削除する

developers.google.com/speed/pagespeed/insights

バックエンドタスク

2. CDNを使用する

3. ブラウザーキャッシュを有効にする

4. Gzipを有効にする

-----------------------------

10. JS/CSSを縮小化する

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

13. ETagを設定する

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

どちらが遅いのでしょうか？

ネットワーク
vs.
ハードウェア

今後10年間でインターネットの
帯域幅速度は57倍になると思
われているが、コンピューターの
処理能力は100倍以上になるだ
ろう。
モバイルサイト vs. アプリ：来るべき戦略の転換 ‒ U-Site

ネットワークは、
重いのよ！！

帯域幅別のページの読み込み速度
3,500

3,000

2,500
(ms)

2,000

1,500

1,000

ps
s

s

s

s

ps
s

s

s

s
bp

bp

bp

bp
bp

bp

bp

bp

b

Mb
7M
1M

3M

8M

9M
2M

4M

5M

6M

10
More Bandwidth Doesn’t Matter (Much) « Mike's Lookout

Chrome開発者ツール：ネットワークパネル

HTTPリクエストの中身

サーバー

クライアント


サーバー

ISP

DNSルックアップ

クライアント


サーバー

ISP

DNSルックアップ

クライアント

DNS Lookup


サーバー

ISP

DNSルックアップ最初の接続

クライアント

DNS Lookup


接続の確立

サーバー

ISP


クライアント

DNS Lookup


接続の確立

サーバー

ISP


クライアント

DNS Lookup Connecting


接続の確立

サーバー

ISP

DNSルックアップ最初の接続最初のHTTPリクエスト

クライアント



接続の確立最初のデータ送信

サーバー

ISP

DNSルックアップ最初の接続最初のHTTPリクエスト最初のデータ受信

クライアント



接続の確立最初のデータ送信

サーバー

ISP

DNSルックアップ最初の接続最初のHTTPリクエスト最初のデータ受信

クライアント

DNS Lookup Connecting Waiting


接続の確立最初のデータ送信最後のデータ送信

サーバー

ISP

DNSルックアップ最初の接続最初のHTTPリクエスト最初のデータ受信最後のデータ受信

クライアント

DNS Lookup Connecting Waiting



サーバー

ISP


クライアント

DNS Lookup Connecting Waiting Receiving



サーバー

ISP RTT


クライアント




サーバー

ISP RTT
DL


クライアント


DNS Lookup: DNSの名前解決

Connecting: TCPコネクション確立に要する時間

Blocking: ブラウザーキューからネットワークに接続するまでの時間

Sending: データのリクエストをサーバーに送信するのに要する時間

Waiting: レスポンスの待ち時間

Receiving: レスポンスボディをダウンロードするのに要する時間

RTT ラウンドトリップタイム

DL ペイロードサイズ

私たちは
何をすべきでしょうか？


CSS Sprite

Requests 30 vs. 1 (CSS Sprite)

spritegen.website-performance.org

No Retina!

spritegen.website-performance.org

Command line

t32k at MacBookPro in ~
$ gem install compass
$ compass create my_project
$ cd /my_project
$ compass watch

Sass + compass

@import "compass";
@import "/sprites/category/*.png";
@include all-category-sprites;

CSS
.category-sprite, .category-chat, .category-
fav, .category-home, .category-love, .category-
mind, .category-new, .category-nightlife, .category-work
{ background: url(/sprites/category-s87c70fb891.png) no-
repeat; }

.category-chat { background-position: 0 -168px; }
.category-fav { background-position: 0 -42px; }
.category-home { background-position: 0 -294px; }
.category-love { background-position: 0 -252px; }
.category-mind { background-position: 0 -84px; }
.category-new { background-position: 0 -210px; }
.category-nightlife { background-position: 0 0; }
.category-work { background-position: 0 -126px; }

@mixin

// For Retina @2x
@mixin sprites($map, $map-item, $isCommon:false) {
@if $isCommon {
display: inline-block;
background-image: sprite-url($map);
background-repeat: no-repeat;
background-size: (image-width(sprite-path($map)) / 2) (image-
height(sprite-path($map)) / 2);
} @else {
$pos-y: round(nth(sprite-position($map, $map-item), 2) / 2);
width: image-width(sprite-file($map, $map-item)) / 2;
height: image-height(sprite-file($map, $map-item)) / 2;
background-position: 0 $pos-y;
}
}

Usage

$sprites-category: sprite-map("sprites/category/*.png");
.common-property {
@include sprites($sprites-category, foo, true);
}
.indivisual-property-fav {
@include sprites($sprites-category, fav, false);
}
.indivisual-property-chat {
@include sprites($sprites-category, chat, false);
}

CSS

.common-property {
display: inline-block;
background-image: url('/images/sprites/category-s13fa409ec6.png');
background-repeat: no-repeat;
background-size: 21px 168px;
}

.indivisual-property-fav {
width: 21px;
height: 21px;
background-position: 0 -21px;
}

.indivisual-property-chat {
width: 21px;
height: 21px;
background-position: 0 -84px;
}

• 画像をPs/Fwで並べる


• background-positionを測る



• コードに反映する



• コードに反映する

／(^o^)＼ｵﾜﾀ

• 画像ディレクトリに出し入れするだけ

• 画像ディレクトリに出し入れするだけ

(´∀｀)つミ

DL ペイロードサイズ

Gzip

github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/htaccess.md

圧縮効率を最大化する

CSS

.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

Sass + compass

@import "compass";
.foo {
@include border-radius(5px);
}

Output CSS

.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

t32k.github.com/speed/articles/gzip.html

コードの一貫性を保つ

CSS
.foo { .foo {
-webkit-border-radius: 1px; -ms-border-radius: 1px;
-moz-border-radius: 1px; -webkit-border-radius: 1px;
-ms-border-radius: 1px; -moz-border-radius: 1px;
-o-border-radius: 1px; -o-border-radius: 1px;
border-radius: 1px; border-radius: 1px;
} }
.bar { .bar {
-webkit-border-radius: 3px; -moz-border-radius: 3px;
-moz-border-radius: 3px; -ms-border-radius: 3px;
-ms-border-radius: 3px; -o-border-radius: 3px;
-o-border-radius: 3px; -webkit-border-radius: 3px;
} }
.baz { .baz {
-webkit-border-radius: 5px; -o-border-radius: 5px;
-ms-border-radius: 5px; -ms-border-radius: 5px;
-o-border-radius: 5px; -moz-border-radius: 5px;
} }

Uncompressed:
.foo { .foo {
} }

416B
.bar { .bar {
} }
.baz { .baz {
} }

Compressed:
.foo { .foo {
} }

122B 130B
.bar { .bar {
} }
.baz { .baz {
} }

CSS
.foo { .foo {
} }

-71% -69%
.bar { .bar {
} }
.baz { .baz {
} }

Googleの検索結果ページでは、
HTML属性をアルファベット順に
記述した場合、gzip後のサイズが

1.5%削減することができた。
圧縮を有効にする - Make the Web Faster ̶ Google Developers

神は細部に宿る
― Ludwig Mies van der Rohe

そんなに
心配しすぎない

$ 私たちは何をすべきでしょうか？


>> フロントエンドに着目しなさい




>> ネットワーク段階を改善しなさい






>> RTTとペイロードサイズを縮小しなさい

Thank you :)
t32k @t32k koji.ishimoto

このスライドはJina Boltonさんのスライドを参考にしました。
ありがとう @jina :)

photo credit
- http://www.flickr.com/photos/expose_switch/4566783151/
- http://www.flickr.com/photos/ivko999/5082864854/
- http://www.flickr.com/photos/peasap/4684467836/
- http://www.flickr.com/photos/emrank/2191608962/
- http://www.flickr.com/photos/spilt-milk/6042115943/
- http://www.flickr.com/photos/avidlyabide/7509737450/
- http://www.flickr.com/photos/hinkelstone/2435823037/
- http://www.flickr.com/photos/alex-d/2770828285/

モバイル制作におけるパフォーマンス最適化について

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to モバイル制作におけるパフォーマンス最適化について

Similar to モバイル制作におけるパフォーマンス最適化について (7)

More from Koji Ishimoto

More from Koji Ishimoto (16)

モバイル制作におけるパフォーマンス最適化について