Successfully reported this slideshow.
Your SlideShare is downloading. ×

Compact Web - Remind "web compression" -

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
COSCUP Jetpack Lighting Talk
COSCUP Jetpack Lighting Talk
Loading in …3
×

Check these out next

1 of 80 Ad
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Compact Web - Remind "web compression" - (20)

More from Tomokazu Kiyohara (15)

Advertisement

Recently uploaded (20)

Compact Web - Remind "web compression" -

  1. 1. Compact Web Remind “web compression” 2012.04.07 WCAF vol.8
  2. 2. Good Response, Good Conversion vs 1 sec
  3. 3. High Performance Technique
  4. 4. Smar t Phone Narrow band + Big contents
  5. 5. 細い回線でも レスポンスよく 多くのコンテンツを届けたい
  6. 6. Today’s Focus web compression over view & trend
  7. 7. コンテンツはそのままに データ量はコンパクトにすることで レスポンスを向上させる
  8. 8. DEMO
  9. 9. 作るものは「いつもと一緒」 公開前にちょっと一手間
  10. 10. Target Image files ( jpg, png ) Text files ( html, style sheet, javascript ) Transport (http)
  11. 11. Target Image files ( jpg, png ) Text files ( html, style sheet, javascript ) Transport (http)
  12. 12. Image files Quality VS File Size
  13. 13. Application
  14. 14. ImageOptim jpg, png ( +gif ) http://imageoptim.com
  15. 15. JPEGmini jpg http://www.jpegmini.com
  16. 16. advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP
  17. 17. advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP $ brew install advancecomp
  18. 18. 圧縮専用のツールを使えば Photoshop, Illustrator, Fireworks の出力はもっと圧縮できる
  19. 19. Target Image files ( jpg, png ) Text files ( html, style sheet, javascript ) Transport (http)
  20. 20. Text files Delete sentence for developer ( Indent Space and Comments ) + High context minify
  21. 21. html
  22. 22. html
  23. 23. html
  24. 24. style sheet
  25. 25. style sheet
  26. 26. style sheet
  27. 27. style sheet
  28. 28. style sheet
  29. 29. style sheet
  30. 30. style sheet
  31. 31. style sheet
  32. 32. javascript
  33. 33. javascript
  34. 34. javascript
  35. 35. javascript
  36. 36. javascript
  37. 37. javascript
  38. 38. javascript
  39. 39. javascript
  40. 40. Application
  41. 41. Smaller HTML, JavaScript, CSS http://smallerapp.com/ $20 ( free trial 30 days )
  42. 42. CodeKit JavaScript http://incident57.com/codekit/ Beta ( beta : free / release : $20 )
  43. 43. HTMLCompressor.com HTML http://htmlcompressor.com/
  44. 44. CLEAN CSS CSS http://www.cleancss.com/
  45. 45. Online YUI Compressor JavaScript, CSS http://www.refresh-sf.com/yui/
  46. 46. htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/
  47. 47. htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/ $ brew install htmlcompressor
  48. 48. YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/
  49. 49. YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/ $ brew install yuicompressor
  50. 50. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css
  51. 51. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css $ npm install clean-css
  52. 52. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css +α(node.js) $ npm install clean-css
  53. 53. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS
  54. 54. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS $ npm install uglify-js
  55. 55. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS +α(node.js) $ npm install uglify-js
  56. 56. Recommend Designer Programmer ImageOptim htmlcompressor Smaller YUI Compressor
  57. 57. ! Don’t delete JavaScript Copyright
  58. 58. 圧縮専用のツールを使えば Dreamweaver の出力はもっと圧縮できる
  59. 59. Target Image files ( jpg, png ) Text files ( html, style sheet, javascript ) Transport (http)
  60. 60. Transpor t http1.1 Accept-Encoding: gzip, deflate + Content-Encoding: gzip
  61. 61. Normal transpor t
  62. 62. Normal transpor t
  63. 63. Normal transpor t
  64. 64. Normal transpor t
  65. 65. Zipped transpor t
  66. 66. Zipped transpor t COMPRESS
  67. 67. Zipped transpor t COMPRESS
  68. 68. Zipped transpor t COMPRESS EXPAND
  69. 69. Apache keyword : “DEFLATE” (mod_deflate) Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html Sample : httpd.conf LoadModule deflate_module libexec/apache22/mod_deflate.so <Directory "/your-server-root/manual"> AddOutputFilterByType DEFLATE text/html application/javascript text/css </Directory>
  70. 70. nginx keyword : “gzip” (HttpGzipModule) Reference : http://wiki.nginx.org/HttpGzipModule Sample : nginx.conf server { gzip on; gzip_types text/css application/javascript # text/html default included }
  71. 71. ! Check ser ver performance
  72. 72. コンフィグを書き換えるだけで サーバー の出力はもっと圧縮できる
  73. 73. Conclusion Good response for Smart Phone ( Narrow band & Big contents ) “Web Compression” Many Techniques Image Files, Text Files → Use software Transport → Setup server
  74. 74. ちょっとの一手間 はじめるだけ
  75. 75. thank you Tomokazu Kiyohara http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara
  76. 76. one more thing
  77. 77. Let’s delete CSS Vender Prefix
  78. 78. When can I use ... http://caniuse.com/
  79. 79. When can I use ...
  80. 80. photo credit http://www.flickr.com/photos/julianlim/4598412264/ http://www.flickr.com/photos/intelfreepress/6722296265/ http://www.flickr.com/photos/scobleizer/4697192856/

Editor's Notes

  • \n
  • Web UI &amp;#x306E;&amp;#x5927;&amp;#x5BB6;&amp;#x3001;&amp;#x30E4;&amp;#x30B3;&amp;#x30D6;&amp;#x30CB;&amp;#x30FC;&amp;#x30EB;&amp;#x30BB;&amp;#x30F3;&amp;#x306B;&amp;#x3088;&amp;#x308C;&amp;#x3070;&amp;#x3001;&amp;#x30EC;&amp;#x30B9;&amp;#x30DD;&amp;#x30F3;&amp;#x30B9;&amp;#x306B;1&amp;#x79D2;&amp;#x4EE5;&amp;#x4E0A;&amp;#x304B;&amp;#x304B;&amp;#x308B;&amp;#x5834;&amp;#x5408;&amp;#x4EBA;&amp;#x306F;&amp;#x30B9;&amp;#x30C8;&amp;#x30EC;&amp;#x30B9;&amp;#x3092;&amp;#x611F;&amp;#x3058;&amp;#x59CB;&amp;#x3081;&amp;#x308B;\n&amp;#x30A2;&amp;#x30DE;&amp;#x30BE;&amp;#x30F3;&amp;#x3067;0.1&amp;#x79D2;&amp;#x9045;&amp;#x304F;&amp;#x306A;&amp;#x308C;&amp;#x3070;&amp;#x3001;1%&amp;#x58F2;&amp;#x308A;&amp;#x4E0A;&amp;#x3052;&amp;#x304C;&amp;#x843D;&amp;#x3061;&amp;#x3001; &amp;#x30E4;&amp;#x30D5;&amp;#x30FC;&amp;#x3067;0.4&amp;#x79D2;&amp;#x9045;&amp;#x304F;&amp;#x306A;&amp;#x308C;&amp;#x3070;&amp;#x3001;&amp;#x5168;&amp;#x30DA;&amp;#x30FC;&amp;#x30B8;&amp;#x3067;5~9&amp;#xFF05;&amp;#x306E;&amp;#x30C8;&amp;#x30E9;&amp;#x30D5;&amp;#x30A3;&amp;#x30C3;&amp;#x30AF;&amp;#x304C;&amp;#x6E1B;&amp;#x5C11;&amp;#x3057;&amp;#x3001; &amp;#x30B0;&amp;#x30FC;&amp;#x30B0;&amp;#x30EB;&amp;#x3067;0.5&amp;#x79D2;&amp;#x9045;&amp;#x304F;&amp;#x306A;&amp;#x308C;&amp;#x3070;&amp;#x3001;&amp;#x691C;&amp;#x7D22;&amp;#x6570;&amp;#x304C;20%&amp;#x6E1B;&amp;#x308B;\n&amp;#x300C;1&amp;#x79D2;&amp;#x300D;&amp;#x3067;&amp;#x3082;&amp;#x30EC;&amp;#x30B9;&amp;#x30DD;&amp;#x30F3;&amp;#x30B9;&amp;#x3092;&amp;#x3088;&amp;#x304F;&amp;#x3057;&amp;#x305F;&amp;#x3044;\n
  • &amp;#x30EC;&amp;#x30B9;&amp;#x30DD;&amp;#x30F3;&amp;#x30B9;&amp;#x3092;&amp;#x3088;&amp;#x304F;&amp;#x3059;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x306B;&amp;#x69D8;&amp;#x3005;&amp;#x306A;&amp;#x65BD;&amp;#x7B56;&amp;#x304C;&amp;#x691C;&amp;#x8A0E;&amp;#x3055;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;\n&amp;#x672C;&amp;#x3082;&amp;#x51FA;&amp;#x3066;&amp;#x308B;&amp;#x3001;&amp;#x30C4;&amp;#x30FC;&amp;#x30EB;&amp;#x3082;&amp;#x51FA;&amp;#x3066;&amp;#x308B;&amp;#x3001;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x30BD;&amp;#x30EA;&amp;#x30E5;&amp;#x30FC;&amp;#x30B7;&amp;#x30E7;&amp;#x30F3;&amp;#x3082;&amp;#x691C;&amp;#x8A0E;&amp;#x3055;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;\n
  • &amp;#x30B9;&amp;#x30DE;&amp;#x30FC;&amp;#x30C8;&amp;#x30D5;&amp;#x30A9;&amp;#x30F3;&amp;#x3092;&amp;#x8CFC;&amp;#x5165;&amp;#x3057;&amp;#x305F;&amp;#x7406;&amp;#x7531;&amp;#xFF1A;1&amp;#x4F4D;&amp;#x300C;PC&amp;#x7528;&amp;#x306E;Web&amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x3092;&amp;#x95B2;&amp;#x89A7;&amp;#x3057;&amp;#x305F;&amp;#x304B;&amp;#x3063;&amp;#x305F;&amp;#x300D;(64.8%) via kakaku.com @ 2011 Summer\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x30AF;&amp;#x30AA;&amp;#x30EA;&amp;#x30C6;&amp;#x30A3;&amp;#x306F;&amp;#x9AD8;&amp;#x3044;&amp;#x307E;&amp;#x307E;&amp;#x3001;&amp;#x30D5;&amp;#x30A1;&amp;#x30A4;&amp;#x30EB;&amp;#x30B5;&amp;#x30A4;&amp;#x30BA;&amp;#x3092;&amp;#x5C0F;&amp;#x3055;&amp;#x304F;&amp;#x3059;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x306E;&amp;#x8A66;&amp;#x307F;&amp;#x306F;&amp;#x3001;&amp;#x4ECA;&amp;#x3082;&amp;#x76DB;&amp;#x3093;&amp;#x306B;&amp;#x7814;&amp;#x7A76;&amp;#x3055;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;\n&amp;#x53E4;&amp;#x304F;&amp;#x304B;&amp;#x3089;&amp;#x8A9E;&amp;#x3089;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x30B8;&amp;#x30E3;&amp;#x30F3;&amp;#x30EB;&amp;#x3067;&amp;#x306F;&amp;#x3042;&amp;#x308B;&amp;#x304C;&amp;#x3001;&amp;#x6C7A;&amp;#x3057;&amp;#x3066;&amp;#x67AF;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x306A;&amp;#x3044;\nGoogle &amp;#x306E; WebP &amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x3001;&amp;#x65B0;&amp;#x3057;&amp;#x3044;&amp;#x30D5;&amp;#x30A9;&amp;#x30FC;&amp;#x30DE;&amp;#x30C3;&amp;#x30C8;&amp;#x3092;&amp;#x4F5C;&amp;#x308D;&amp;#x3046;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x52D5;&amp;#x304D;&amp;#x3082;&amp;#x3042;&amp;#x308B;&amp;#x3050;&amp;#x3089;&amp;#x3044;\n&amp;#x8868;&amp;#x793A;&amp;#x51FA;&amp;#x6765;&amp;#x308B;&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x304C;&amp;#x9650;&amp;#x3089;&amp;#x308C;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x3001;&amp;#x307E;&amp;#x3060;&amp;#x307E;&amp;#x3060;&amp;#x5229;&amp;#x7528;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x6BB5;&amp;#x968E;&amp;#x306B;&amp;#x306F;&amp;#x306A;&amp;#x3044;&amp;#x3051;&amp;#x3069;&amp;#x30DB;&amp;#x30C3;&amp;#x30C8;&amp;#x306A;&amp;#x5206;&amp;#x91CE;\n
  • \n
  • &amp;#x30D0;&amp;#x30C3;&amp;#x30AF;&amp;#x30A8;&amp;#x30F3;&amp;#x30C9;&amp;#x306F; OptiPNG, JpegOptim\n&amp;#x3053;&amp;#x308C;&amp;#x4E00;&amp;#x3064;&amp;#x3067;&amp;#x4F55;&amp;#x3067;&amp;#x3082;&amp;#x51FA;&amp;#x6765;&amp;#x308B;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x306E;&amp;#x306F;&amp;#x4FBF;&amp;#x5229;\n
  • &amp;#x975E;&amp;#x5E38;&amp;#x306B;&amp;#x7DBA;&amp;#x9E97;&amp;#x3067;&amp;#x30AA;&amp;#x30B9;&amp;#x30B9;&amp;#x30E1;&amp;#x3067;&amp;#x304D;&amp;#x308B;\nWeb &amp;#x30D9;&amp;#x30FC;&amp;#x30B9;&amp;#x3060;&amp;#x3068;&amp;#x4F7F;&amp;#x3044;&amp;#x52DD;&amp;#x624B;&amp;#x304C;&amp;#x60AA;&amp;#x3044;&amp;#x306E;&amp;#x3067;&amp;#x3001;Desktop App &amp;#x306E;&amp;#x767B;&amp;#x5834;&amp;#x306B;&amp;#x671F;&amp;#x5F85;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x3053;&amp;#x308C;&amp;#x4E00;&amp;#x3064;&amp;#x3067;&amp;#x5168;&amp;#x90E8;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x306E;&amp;#x306F;&amp;#x4FBF;&amp;#x5229;\n
  • &amp;#x5143;&amp;#x30C7;&amp;#x30FC;&amp;#x30BF;&amp;#x3092;&amp;#x66F4;&amp;#x65B0;&amp;#x3059;&amp;#x308B;&amp;#x3060;&amp;#x3051;&amp;#x3067;&amp;#x3001;&amp;#x81EA;&amp;#x52D5;&amp;#x7684;&amp;#x306B;&amp;#x51E6;&amp;#x7406;&amp;#x3057;&amp;#x3066;&amp;#x304F;&amp;#x308C;&amp;#x308B;&amp;#x70B9;&amp;#x304C;&amp;#x3068;&amp;#x3066;&amp;#x3082;&amp;#x826F;&amp;#x3044;\n
  • \n
  • \n
  • \n
  • smaller &amp;#x306E;&amp;#x4E2D;&amp;#x8EAB;\n
  • smaller &amp;#x306E;&amp;#x4E2D;&amp;#x8EAB;\n
  • \n
  • \n
  • codekit &amp;#x306E;&amp;#x4E2D;&amp;#x8EAB;\n
  • codekit &amp;#x306E;&amp;#x4E2D;&amp;#x8EAB;\n
  • \n
  • JavaScript &amp;#x306E;&amp;#x30B3;&amp;#x30E1;&amp;#x30F3;&amp;#x30C8;&amp;#x3092;&amp;#x6D88;&amp;#x3059;&amp;#x5834;&amp;#x5408;&amp;#x306F;&amp;#x3001;copyright &amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x6CE8;&amp;#x610F;&amp;#x304C;&amp;#x5FC5;&amp;#x8981;\n&amp;#x6614;&amp;#x305D;&amp;#x308C;&amp;#x3067;&amp;#x30AF;&amp;#x30EC;&amp;#x30FC;&amp;#x30E0;&amp;#x304C;&amp;#x6765;&amp;#x305F;&amp;#x3053;&amp;#x3068;&amp;#x304C;&amp;#x3042;&amp;#x308B;\nYUI Compressor &amp;#x306A;&amp;#x3089;&amp;#x3001; /*! */ &amp;#x306F;&amp;#x6B8B;&amp;#x3059;\nUglifyJS &amp;#x306A;&amp;#x3089;&amp;#x3001;&amp;#x30D5;&amp;#x30A1;&amp;#x30A4;&amp;#x30EB;&amp;#x5148;&amp;#x982D;&amp;#x306E;&amp;#x30B3;&amp;#x30E1;&amp;#x30F3;&amp;#x30C8;&amp;#x306F;&amp;#x6B8B;&amp;#x3059;(&amp;#x30AA;&amp;#x30D7;&amp;#x30B7;&amp;#x30E7;&amp;#x30F3;&amp;#x3067;&amp;#x6D88;&amp;#x3059;&amp;#x3053;&amp;#x3068;&amp;#x3082;&amp;#x51FA;&amp;#x6765;&amp;#x308B;)\n
  • \n
  • \n
  • &amp;#x3053;&amp;#x306E;&amp;#x8FBA;&amp;#x306F;&amp;#x30AD;&amp;#x30FC;&amp;#x30EF;&amp;#x30FC;&amp;#x30C9;&amp;#x3067;&amp;#x306F;&amp;#x3042;&amp;#x308B;&amp;#x304C;&amp;#x3001;&amp;#x899A;&amp;#x3048;&amp;#x306A;&amp;#x304F;&amp;#x3066;&amp;#x3082;&amp;#x3088;&amp;#x3044;&amp;#xFF08;&amp;#x30B0;&amp;#x30B0;&amp;#x308B;&amp;#x6642;&amp;#x3060;&amp;#x3051;&amp;#x53C2;&amp;#x7167;&amp;#xFF09;\n&amp;#x3053;&amp;#x306E;&amp;#x5F8C;&amp;#x30B9;&amp;#x30E9;&amp;#x30A4;&amp;#x30C9;2&amp;#x679A;&amp;#x3067;&amp;#x8AAC;&amp;#x660E;&amp;#x3059;&amp;#x308B;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x306E; CPU &amp;#x306B;&amp;#x8CA0;&amp;#x8377;&amp;#x304C;&amp;#x304B;&amp;#x304B;&amp;#x308B;&amp;#x70B9;&amp;#x306F;&amp;#x6CE8;&amp;#x610F;\n&amp;#x4E8B;&amp;#x524D;&amp;#x306B;&amp;#x5727;&amp;#x7E2E;&amp;#x3057;&amp;#x3066;&amp;#x9001;&amp;#x4FE1;&amp;#x3059;&amp;#x308B; gzip precompressed module &amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x306E;&amp;#x3082;&amp;#x3042;&amp;#x308B;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Vender prefix &amp;#x306F; css &amp;#x306E;&amp;#x30B5;&amp;#x30A4;&amp;#x30BA;&amp;#x3092;&amp;#x5927;&amp;#x304D;&amp;#x304F;&amp;#x3059;&amp;#x308B;\n&amp;#x30B5;&amp;#x30DD;&amp;#x30FC;&amp;#x30C8;&amp;#x3059;&amp;#x308B;&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x306B;&amp;#x3082;&amp;#x3088;&amp;#x308B;&amp;#x304C;&amp;#x3001;prefix &amp;#x306A;&amp;#x3057;&amp;#x306E;&amp;#x3082;&amp;#x306E;&amp;#x3060;&amp;#x3051;&amp;#x3067;OK&amp;#x306E;&amp;#x5834;&amp;#x5408;&amp;#x304C;&amp;#x591A;&amp;#x3044;\n&amp;#x30C1;&amp;#x30A7;&amp;#x30C3;&amp;#x30AF;&amp;#x306E;&amp;#x4E0A;&amp;#x3001;&amp;#x524A;&amp;#x9664;&amp;#x3059;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x3092;&amp;#x691C;&amp;#x8A0E;&amp;#x3059;&amp;#x308B;&amp;#x306E;&amp;#x306F;&amp;#x3042;&amp;#x308A;\n
  • \n
  • \n
  • \n

×