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

4,256 views

Published on

世の中にはパフォーマンス最適化のためのベストプラクティスと呼ばれるものがたくさんありますが、一体どれから手をつければよいのしょうか、また一体どれが一番効果のある対策と言えるのでしょうか?一般論を言えば、ネットワーク改善から手をつけるべきで、その中でもHTTPリクエストを減らすのが一番効果的です。リクエストを減らすポピュラーなテクニックであるCSS SpriteをSass/Compassを利用しながら効率良く改善していきましょう。

Published in: Design
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,256
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
31
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

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

  1. 1. モバイルフロントエンド最適化基礎編 : 2012 ネットビジネス総合事業本部 マークアップエンジニア 石本 光司 2012.11.10 @Webridge Meeting SP12 featuring Frontrend
  2. 2. @t32k
  3. 3. Webパフォーマンス最適化のためのコーディング手法 心理学から考えるWebパフォーマンス デザインから考えるハイパフォーマンスWebサイト
  4. 4. t32k.github.com/speed/
  5. 5. 今日の流れ- あなたは何をされていますか?- どちらが遅いのでしょうか?- 私たちは何をすべきでしょうか?- まとめ
  6. 6. あなたは何をされていますか?
  7. 7. つまり、あなたは?front-endback-end
  8. 8. つまり、あなたは?front-endback-end
  9. 9. 僕は、フロントエンジニアだ!
  10. 10. 高速サイトのためのベストプラクティス by Yahoo! Developer Network1. 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. 11. 高い効果低い for front-end engineer 難しい 易しい 難易度
  12. 12. 高い 1 2 3 4 5 6 7 8効果 9 10 11 12 13低い 14 for front-end engineer 難しい 易しい 難易度
  13. 13. 高い 1 2 3 4 5 6 7 8効果 9 10 11 12 13低い 14 for front-end engineer 難しい 易しい 難易度
  14. 14. フロントエンドタスク1. HTTP リクエストを減らす5. スタイルシートは上部に設置6. スクリプトは下部に設置7. CSS Expressionsは避ける8. JS/CSSファイルを外部化する-------------------------9. DNSルックアップを減らす12. 重複スクリプトを削除する
  15. 15. フロントエンドタスク1. HTTP リクエストを減らす5. スタイルシートは上部に設置6. スクリプトは下部に設置7. CSS Expressionsは避ける8. JS/CSSファイルを外部化する-------------------------9. DNSルックアップを減らす12. 重複スクリプトを削除する
  16. 16. developers.google.com/speed/pagespeed/insights
  17. 17. バックエンドタスク2. CDNを使用する3. ブラウザーキャッシュを有効にする4. Gzipを有効にする-----------------------------10. JS/CSSを縮小化する11. リダイレクトを避ける13. ETagを設定する14. Ajaxをキャッシュ可能にする
  18. 18. バックエンドタスク2. CDNを使用する3. ブラウザーキャッシュを有効にする4. Gzipを有効にする-----------------------------10. JS/CSSを縮小化する11. リダイレクトを避ける13. ETagを設定する14. Ajaxをキャッシュ可能にする
  19. 19. PageSpeed Score 90+
  20. 20. どちらが遅いのでしょうか?
  21. 21. ネットワーク vs.ハードウェア
  22. 22. 今後10年間でインターネットの帯域幅速度は57倍になると思われているが、コンピューターの処理能力は100倍以上になるだろう。 モバイルサイト vs. アプリ: 来るべき戦略の転換 ‒ U-Site
  23. 23. ネットワークは、 重いのよ!!
  24. 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) « Mikes Lookout
  25. 25. なんで?
  26. 26. Chrome開発者ツール:ネットワークパネル
  27. 27. HTTPリクエストの中身サーバークライアント
  28. 28. HTTPリクエストの中身サーバー ISP DNSルックアップクライアント
  29. 29. HTTPリクエストの中身サーバー ISP DNSルックアップクライアント DNS Lookup
  30. 30. HTTPリクエストの中身サーバー ISP DNSルックアップ 最初の接続クライアント DNS Lookup
  31. 31. HTTPリクエストの中身 接続の確立サーバー ISP DNSルックアップ 最初の接続クライアント DNS Lookup
  32. 32. HTTPリクエストの中身 接続の確立サーバー ISP DNSルックアップ 最初の接続クライアント DNS Lookup Connecting
  33. 33. HTTPリクエストの中身 接続の確立サーバー ISP DNSルックアップ 最初の接続 最初のHTTPリクエストクライアント DNS Lookup Connecting
  34. 34. HTTPリクエストの中身 接続の確立 最初のデータ送信サーバー ISP DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信クライアント DNS Lookup Connecting
  35. 35. HTTPリクエストの中身 接続の確立 最初のデータ送信サーバー ISP DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信クライアント DNS Lookup Connecting Waiting
  36. 36. HTTPリクエストの中身 接続の確立 最初のデータ送信 最後のデータ送信サーバー ISP DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信クライアント DNS Lookup Connecting Waiting
  37. 37. HTTPリクエストの中身 接続の確立 最初のデータ送信 最後のデータ送信サーバー ISP DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信クライアント DNS Lookup Connecting Waiting Receiving
  38. 38. HTTPリクエストの中身 接続の確立 最初のデータ送信 最後のデータ送信サーバー ISP RTT DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信クライアント DNS Lookup Connecting Waiting Receiving
  39. 39. HTTPリクエストの中身 接続の確立 最初のデータ送信 最後のデータ送信サーバー ISP RTT DL DNSルックアップ 最初の接続 最初のHTTPリクエスト 最初のデータ受信 最後のデータ受信クライアント DNS Lookup Connecting Waiting Receiving
  40. 40. DNS Lookup: DNSの名前解決Connecting: TCPコネクション確立に要する時間 Blocking: ブラウザーキューからネットワークに接続するまでの時間 Sending: データのリクエストをサーバーに送信するのに要する時間 Waiting: レスポンスの待ち時間 Receiving: レスポンスボディをダウンロードするのに要する時間
  41. 41. RTT ラウンドトリップタイムDL ペイロードサイズ
  42. 42. 私たちは何をすべきでしょうか?
  43. 43. RTT ラウンドトリップタイム
  44. 44. RTT ラウンドトリップタイム CSS Sprite
  45. 45. Requests 30 vs. 1 (CSS Sprite)
  46. 46. Requests 30 vs. 1 (CSS Sprite)
  47. 47. spritegen.website-performance.org
  48. 48. No Retina!spritegen.website-performance.org
  49. 49. めんどくさい...
  50. 50. 知ってる?
  51. 51. compass-style.org
  52. 52. Command line t32k at MacBookPro in ~ $ gem install compass $ compass create my_project $ cd /my_project $ compass watch
  53. 53. Command line t32k at MacBookPro in ~ $ gem install compass $ compass create my_project $ cd /my_project $ compass watch
  54. 54. Sass + compass @import "compass"; @import "/sprites/category/*.png"; @include all-category-sprites;
  55. 55. 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; }
  56. 56. 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; }
  57. 57. @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; } }
  58. 58. 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); }
  59. 59. 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; }
  60. 60. • 画像をPs/Fwで並べる
  61. 61. • 画像をPs/Fwで並べる• background-positionを測る
  62. 62. • 画像をPs/Fwで並べる• background-positionを測る• コードに反映する
  63. 63. • 画像をPs/Fwで並べる• background-positionを測る• コードに反映する /(^o^)\オワタ
  64. 64. • 画像ディレクトリに出し入れするだけ
  65. 65. • 画像ディレクトリに出し入れするだけ (´∀`)つ ミ
  66. 66. DL ペイロードサイズ
  67. 67. DL ペイロードサイズ Gzip
  68. 68. github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/htaccess.md
  69. 69. 圧縮効率を最大化する
  70. 70. Don’tRepeatYourself
  71. 71. CSS .foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
  72. 72. F****** CSS
  73. 73. 知ってる?
  74. 74. Sass + compass @import "compass"; .foo { @include border-radius(5px); }
  75. 75. Output CSS .foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
  76. 76. F****** CSS
  77. 77. t32k.github.com/speed/articles/gzip.html
  78. 78. コードの一貫性を保つ
  79. 79. 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; } }
  80. 80. 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; } }
  81. 81. 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; } }
  82. 82. 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; } }
  83. 83. csscomb.com
  84. 84. Googleの検索結果ページでは、HTML属性をアルファベット順に記述した場合、gzip後のサイズが1.5%削減することができた。 圧縮を有効にする - Make the Web Faster ̶ Google Developers
  85. 85. 神は細部に宿る ― Ludwig Mies van der Rohe
  86. 86. そんなに心配しすぎない
  87. 87. まとめ
  88. 88. $ 私たちは何をすべきでしょうか?
  89. 89. $ 私たちは何をすべきでしょうか?>> フロントエンドに着目しなさい
  90. 90. $ 私たちは何をすべきでしょうか?>> フロントエンドに着目しなさい$ 私たちは何をすべきでしょうか?
  91. 91. $ 私たちは何をすべきでしょうか?>> フロントエンドに着目しなさい$ 私たちは何をすべきでしょうか?>> ネットワーク段階を改善しなさい
  92. 92. $ 私たちは何をすべきでしょうか?>> フロントエンドに着目しなさい$ 私たちは何をすべきでしょうか?>> ネットワーク段階を改善しなさい$ 私たちは何をすべきでしょうか?
  93. 93. $ 私たちは何をすべきでしょうか?>> フロントエンドに着目しなさい$ 私たちは何をすべきでしょうか?>> ネットワーク段階を改善しなさい$ 私たちは何をすべきでしょうか?>> RTTとペイロードサイズを縮小しなさい
  94. 94. Thank you :) t32k @t32k koji.ishimoto このスライドはJina Boltonさんのスライドを参考にしました。 ありがとう @jina :)
  95. 95. 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/

×