Más contenido relacionado La actualidad más candente (20) Similar a モバイル制作におけるパフォーマンス最適化について (7) Más de Koji Ishimoto (16) モバイル制作におけるパフォーマンス最適化について10. 高速サイトのためのベストプラクティス
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をキャッシュ可能にする
11. 高い
効果
低い
for front-end engineer
難しい 易しい
難易度
12. 高い
1
2
3
4 5
6
7
8
効果
9
10
11
12
13
低い
14
for front-end engineer
難しい 易しい
難易度
13. 高い
1
2
3
4 5
6
7
8
効果
9
10
11
12
13
低い
14
for front-end engineer
難しい 易しい
難易度
14. フロントエンドタスク
1. HTTP リクエストを減らす
5. スタイルシートは上部に設置
6. スクリプトは下部に設置
7. CSS Expressionsは避ける
8. JS/CSSファイルを外部化する
-------------------------
9. DNSルックアップを減らす
12. 重複スクリプトを削除する
15. フロントエンドタスク
1. HTTP リクエストを減らす
5. スタイルシートは上部に設置
6. スクリプトは下部に設置
7. CSS Expressionsは避ける
8. JS/CSSファイルを外部化する
-------------------------
9. DNSルックアップを減らす
12. 重複スクリプトを削除する
24. 帯域幅別のページの読み込み速度
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
31. HTTPリクエストの中身
接続の確立
サーバー
ISP
DNSルックアップ 最初の接続
クライアント
DNS Lookup
32. HTTPリクエストの中身
接続の確立
サーバー
ISP
DNSルックアップ 最初の接続
クライアント
DNS Lookup Connecting
33. HTTPリクエストの中身
接続の確立
サーバー
ISP
DNSルックアップ 最初の接続 最初のHTTPリクエスト
クライアント
DNS Lookup Connecting
34. HTTPリクエストの中身
接続の確立 最初のデータ送信
サーバー
ISP
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信
クライアント
DNS Lookup Connecting
35. HTTPリクエストの中身
接続の確立 最初のデータ送信
サーバー
ISP
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信
クライアント
DNS Lookup Connecting Waiting
36. HTTPリクエストの中身
接続の確立 最初のデータ送信 最後のデータ送信
サーバー
ISP
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信
クライアント
DNS Lookup Connecting Waiting
37. HTTPリクエストの中身
接続の確立 最初のデータ送信 最後のデータ送信
サーバー
ISP
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信
クライアント
DNS Lookup Connecting Waiting Receiving
38. HTTPリクエストの中身
接続の確立 最初のデータ送信 最後のデータ送信
サーバー
ISP RTT
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信
クライアント
DNS Lookup Connecting Waiting Receiving
39. HTTPリクエストの中身
接続の確立 最初のデータ送信 最後のデータ送信
サーバー
ISP RTT
DL
DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信
クライアント
DNS Lookup Connecting Waiting Receiving
40. DNS Lookup: DNSの名前解決
Connecting: TCPコネクション確立に要する時間
Blocking: ブラウザーキューからネットワークに接続するまでの時間
Sending: データのリクエストをサーバーに送信するのに要する時間
Waiting: レスポンスの待ち時間
Receiving: レスポンスボディをダウンロードするのに要する時間
41. RTT ラウンドトリップタイム
DL ペイロードサイズ
44. RTT ラウンドトリップタイム
CSS Sprite
54. Command line
t32k at MacBookPro in ~
$ gem install compass
$ compass create my_project
$ cd /my_project
$ compass watch
55. Command line
t32k at MacBookPro in ~
$ gem install compass
$ compass create my_project
$ cd /my_project
$ compass watch
56. Sass + compass
@import "compass";
@import "/sprites/category/*.png";
@include all-category-sprites;
57. 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; }
58. 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; }
59. @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;
}
}
60. 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);
}
61. 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;
}
75. CSS
.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
78. Sass + compass
@import "compass";
.foo {
@include border-radius(5px);
}
79. Output CSS
.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
83. 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;
border-radius: 3px; border-radius: 3px;
} }
.baz { .baz {
-webkit-border-radius: 5px; -o-border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-ms-border-radius: 5px; -ms-border-radius: 5px;
-o-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
84. Uncompressed:
.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;
} }
416B
.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;
border-radius: 3px; border-radius: 3px;
} }
.baz { .baz {
-webkit-border-radius: 5px; -o-border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-ms-border-radius: 5px; -ms-border-radius: 5px;
-o-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
85. Compressed:
.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;
} }
122B 130B
.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;
border-radius: 3px; border-radius: 3px;
} }
.baz { .baz {
-webkit-border-radius: 5px; -o-border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-ms-border-radius: 5px; -ms-border-radius: 5px;
-o-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
86. 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;
} }
-71% -69%
.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;
border-radius: 3px; border-radius: 3px;
} }
.baz { .baz {
-webkit-border-radius: 5px; -o-border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-ms-border-radius: 5px; -ms-border-radius: 5px;
-o-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
} }
99. Thank you :)
t32k @t32k koji.ishimoto
このスライドはJina Boltonさんのスライドを参考にしました。
ありがとう @jina :)
100. 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/
- http://www.flickr.com/photos/expose_switch/4566783201/
- http://www.flickr.com/photos/expose_switch/4566783171/