Compact Web - Remind "web compression" -

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

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/