Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compact Web - Remind "web compression" -

Compact Web - Remind "web compression" -

WCAF Vol.8 (2012/04/07) の発表資料。
Web に関する圧縮技術についてのお話。

Cb057b585817007ba2a931a81ef9398f?s=128

Tomokazu Kiyohara

April 07, 2012
Tweet

Transcript

  1. Compact Web Remind “web compression” 2012.04.07 WCAF vol.8

  2. Good Response, Good Conversion vs 1 sec

  3. High Performance Technique

  4. Smart Phone Narrow band + Big contents

  5. ࡉ͍ճઢͰ΋ ϨεϙϯεΑ͘ ଟ͘ͷίϯςϯπΛಧ͚͍ͨ

  6. web compression overview & trend Today’s Focus

  7. ίϯςϯπ͸ͦͷ··ʹ σʔλྔ͸ίϯύΫτʹ͢Δ͜ͱͰ ϨεϙϯεΛ޲্ͤ͞Δ

  8. DEMO

  9. ࡞Δ΋ͷ͸ʮ͍ͭ΋ͱҰॹʯ ެ։લʹͪΐͬͱҰखؒ

  10. Target Image files ( jpg, png ) Text files (

    html, style sheet, javascript ) Transport (http)
  11. Target Image files ( jpg, png ) Text files (

    html, style sheet, javascript ) Transport (http)
  12. Image files Quality VS File Size

  13. Application

  14. ImageOptim jpg, png ( +gif ) http://imageoptim.com

  15. JPEGmini jpg http://www.jpegmini.com

  16. advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP

  17. advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP $ brew install advancecomp

  18. ѹॖઐ༻ͷπʔϧΛ࢖͑͹ 1IPUPTIPQ *MMVTUSBUPS 'JSFXPSLT ͷग़ྗ͸΋ͬͱѹॖͰ͖Δ

  19. Target Image files ( jpg, png ) Text files (

    html, style sheet, javascript ) Transport (http)
  20. Text files Delete sentence for developer ( Indent Space and

    Comments ) + High context minify
  21. html

  22. html

  23. html

  24. style sheet

  25. style sheet

  26. style sheet

  27. style sheet

  28. style sheet

  29. style sheet

  30. style sheet

  31. style sheet

  32. javascript

  33. javascript

  34. javascript

  35. javascript

  36. javascript

  37. javascript

  38. javascript

  39. javascript

  40. Application

  41. Smaller HTML, JavaScript, CSS http://smallerapp.com/ $20 ( free trial 30

    days )
  42. CodeKit JavaScript http://incident57.com/codekit/ Beta ( beta : free / release

    : $20 )
  43. HTMLCompressor.com HTML http://htmlcompressor.com/

  44. CLEAN CSS CSS http://www.cleancss.com/

  45. Online YUI Compressor JavaScript, CSS http://www.refresh-sf.com/yui/

  46. htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/

  47. htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/ $ brew install

    htmlcompressor
  48. YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/

  49. YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/ $ brew

    install yuicompressor
  50. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css

  51. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css $ npm install clean-css

  52. clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css $ npm install clean-css

    +α(node.js)
  53. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS

  54. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS $ npm install uglify-js

  55. UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS $ npm install uglify-js

    +α(node.js)
  56. Recommend Programmer htmlcompressor YUI Compressor Designer ImageOptim Smaller

  57. Don’t delete JavaScript Copyright !

  58. ѹॖઐ༻ͷπʔϧΛ࢖͑͹ %SFBNXFBWFS ͷग़ྗ͸΋ͬͱѹॖͰ͖Δ

  59. Target Image files ( jpg, png ) Text files (

    html, style sheet, javascript ) Transport (http)
  60. Transport http1.1 Accept-Encoding: gzip, deflate + Content-Encoding: gzip

  61. Normal transport

  62. Normal transport

  63. Normal transport

  64. Normal transport

  65. Zipped transport

  66. Zipped transport COMPRESS

  67. Zipped transport COMPRESS

  68. Zipped transport COMPRESS EXPAND

  69. LoadModule deflate_module libexec/apache22/mod_deflate.so <Directory "/your-server-root/manual"> AddOutputFilterByType DEFLATE text/html application/javascript text/css

    </Directory> Apache keyword : “DEFLATE” (mod_deflate) Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html Sample : httpd.conf
  70. server { gzip on; gzip_types text/css application/javascript # text/html default

    included } nginx keyword : “gzip” (HttpGzipModule) Reference : http://wiki.nginx.org/HttpGzipModule Sample : nginx.conf
  71. Check server performance !

  72. ίϯϑΟάΛॻ͖׵͑Δ͚ͩͰ αʔόʔ ͷग़ྗ͸΋ͬͱѹॖͰ͖Δ

  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. ͪΐͬͱͷҰखؒ ͸͡ΊΔ͚ͩ

  75. thank you Tomokazu Kiyohara http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara

  76. one more thing

  77. Let’s delete CSS Vender Prefix

  78. When can I use ... http://caniuse.com/

  79. When can I use ...

  80. photo credit http://www.flickr.com/photos/julianlim/4598412264/ http://www.flickr.com/photos/intelfreepress/6722296265/ http://www.flickr.com/photos/scobleizer/4697192856/