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 に関する圧縮技術についてのお話。

Tomokazu Kiyohara

April 07, 2012
Tweet

More Decks by Tomokazu Kiyohara

Other Decks in Technology

Transcript

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

    View Slide

  2. Good Response, Good Conversion
    vs 1 sec

    View Slide

  3. High Performance Technique

    View Slide

  4. Smart Phone
    Narrow band + Big contents

    View Slide

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

    View Slide

  6. web compression
    overview & trend
    Today’s Focus

    View Slide

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

    View Slide

  8. DEMO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Image files
    Quality VS
    File Size

    View Slide

  13. Application

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. Text files
    Delete sentence for developer
    ( Indent Space and Comments )
    +
    High context minify

    View Slide

  21. html

    View Slide

  22. html

    View Slide

  23. html

    View Slide

  24. style sheet

    View Slide

  25. style sheet

    View Slide

  26. style sheet

    View Slide

  27. style sheet

    View Slide

  28. style sheet

    View Slide

  29. style sheet

    View Slide

  30. style sheet

    View Slide

  31. style sheet

    View Slide

  32. javascript

    View Slide

  33. javascript

    View Slide

  34. javascript

    View Slide

  35. javascript

    View Slide

  36. javascript

    View Slide

  37. javascript

    View Slide

  38. javascript

    View Slide

  39. javascript

    View Slide

  40. Application

    View Slide

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

    View Slide

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

    View Slide

  43. HTMLCompressor.com
    HTML
    http://htmlcompressor.com/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. UglifyJS
    JavaScript
    node.js - npm
    https://github.com/mishoo/UglifyJS

    View Slide

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

    View Slide

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

    View Slide

  56. Recommend
    Programmer
    htmlcompressor
    YUI Compressor
    Designer
    ImageOptim
    Smaller

    View Slide

  57. Don’t delete
    JavaScript Copyright
    !

    View Slide

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

    View Slide

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

    View Slide

  60. Transport
    http1.1
    Accept-Encoding: gzip, deflate
    +
    Content-Encoding: gzip

    View Slide

  61. Normal transport

    View Slide

  62. Normal transport

    View Slide

  63. Normal transport

    View Slide

  64. Normal transport

    View Slide

  65. Zipped transport

    View Slide

  66. Zipped transport
    COMPRESS

    View Slide

  67. Zipped transport
    COMPRESS

    View Slide

  68. Zipped transport
    COMPRESS EXPAND

    View Slide

  69. LoadModule deflate_module libexec/apache22/mod_deflate.so

    AddOutputFilterByType DEFLATE text/html application/javascript text/css

    Apache
    keyword : “DEFLATE” (mod_deflate)
    Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html
    Sample : httpd.conf

    View Slide

  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

    View Slide

  71. Check
    server performance
    !

    View Slide

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

    View Slide

  73. Conclusion
    Good response for Smart Phone ( Narrow band & Big contents )
    “Web Compression”
    Many Techniques
    Image Files, Text Files → Use software
    Transport → Setup server

    View Slide

  74. ͪΐͬͱͷҰखؒ
    ͸͡ΊΔ͚ͩ

    View Slide

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

    View Slide

  76. one more thing

    View Slide

  77. Let’s delete
    CSS Vender Prefix

    View Slide

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

    View Slide

  79. When can I use ...

    View Slide

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

    View Slide