Compact Web - Remind "web compression" -

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/