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

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. Smar t Phone
Narrow band + Big contents

5. 細い回線でも
レスポンスよく
多くのコンテンツを届けたい

6. Today’s Focus
web compression
over view & trend

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. 圧縮専用のツールを使えば
Photoshop, Illustrator, Fireworks
の出力はもっと圧縮できる

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
+α(node.js)
$ npm install clean-css

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
+α(node.js)
$ npm install uglify-js

56. Recommend
Designer Programmer
ImageOptim htmlcompressor
Smaller YUI Compressor

57. !
Don’t delete
JavaScript Copyright

58. 圧縮専用のツールを使えば
Dreamweaver
の出力はもっと圧縮できる

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

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

61. Normal transpor t

62. Normal transpor t

63. Normal transpor t

64. Normal transpor t

65. Zipped transpor t

66. Zipped transpor t
COMPRESS

67. Zipped transpor t
COMPRESS

68. Zipped transpor t
COMPRESS EXPAND

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. 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. !
Check
ser ver 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/