Compact Web - Remind "web compression" -

5,435 views
5,362 views

Published on

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

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,435
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • Web UI の大家、ヤコブニールセンによれば、レスポンスに1秒以上かかる場合人はストレスを感じ始める\nアマゾンで0.1秒遅くなれば、1%売り上げが落ち、 ヤフーで0.4秒遅くなれば、全ページで5~9%のトラフィックが減少し、 グーグルで0.5秒遅くなれば、検索数が20%減る\n「1秒」でもレスポンスをよくしたい\n
  • レスポンスをよくするために様々な施策が検討されている\n本も出てる、ツールも出てる、サーバーソリューションも検討されている\n
  • スマートフォンを購入した理由:1位「PC用のWebサイトを閲覧したかった」(64.8%) via kakaku.com @ 2011 Summer\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • クオリティは高いまま、ファイルサイズを小さくするための試みは、今も盛んに研究されている\n古くから語られているジャンルではあるが、決して枯れていない\nGoogle の WebP のように、新しいフォーマットを作ろうという動きもあるぐらい\n表示出来るブラウザが限られるため、まだまだ利用できる段階にはないけどホットな分野\n
  • \n
  • バックエンドは OptiPNG, JpegOptim\nこれ一つで何でも出来るというのは便利\n
  • 非常に綺麗でオススメできる\nWeb ベースだと使い勝手が悪いので、Desktop App の登場に期待\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • これ一つで全部できるのは便利\n
  • 元データを更新するだけで、自動的に処理してくれる点がとても良い\n
  • \n
  • \n
  • \n
  • smaller の中身\n
  • smaller の中身\n
  • \n
  • \n
  • codekit の中身\n
  • codekit の中身\n
  • \n
  • JavaScript のコメントを消す場合は、copyright について注意が必要\n昔それでクレームが来たことがある\nYUI Compressor なら、 /*! */ は残す\nUglifyJS なら、ファイル先頭のコメントは残す(オプションで消すことも出来る)\n
  • \n
  • \n
  • この辺はキーワードではあるが、覚えなくてもよい(ググる時だけ参照)\nこの後スライド2枚で説明する\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • サーバーの CPU に負荷がかかる点は注意\n事前に圧縮して送信する gzip precompressed module というのもある\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Vender prefix は css のサイズを大きくする\nサポートするブラウザにもよるが、prefix なしのものだけでOKの場合が多い\nチェックの上、削除することを検討するのはあり\n
  • \n
  • \n
  • \n
  • Compact Web - Remind "web compression" -

    1. 1. Compact Web Remind “web compression”2012.04.07 WCAF vol.8
    2. 2. Good Response, Good Conversion vs 1 sec
    3. 3. High Performance Technique
    4. 4. Smar t PhoneNarrow band + Big contents
    5. 5. 細い回線でも レスポンスよく多くのコンテンツを届けたい
    6. 6. Today’s Focusweb compression over view & trend
    7. 7. コンテンツはそのままにデータ量はコンパクトにすることで レスポンスを向上させる
    8. 8. DEMO
    9. 9. 作るものは「いつもと一緒」 公開前にちょっと一手間
    10. 10. TargetImage files ( jpg, png )Text files ( html, style sheet, javascript )Transport (http)
    11. 11. TargetImage files ( jpg, png )Text files ( html, style sheet, javascript )Transport (http)
    12. 12. Image filesQuality VS File Size
    13. 13. Application
    14. 14. ImageOptimjpg, png ( +gif )http://imageoptim.com
    15. 15. JPEGminijpghttp://www.jpegmini.com
    16. 16. advpngpnghttp://advancemame.sourceforge.net/comp-readme.htmlAdvanceCOMP
    17. 17. advpngpnghttp://advancemame.sourceforge.net/comp-readme.htmlAdvanceCOMP $ brew install advancecomp
    18. 18. 圧縮専用のツールを使えばPhotoshop, Illustrator, Fireworks の出力はもっと圧縮できる
    19. 19. TargetImage files ( jpg, png )Text files ( html, style sheet, javascript )Transport (http)
    20. 20. Text filesDelete sentence for developer ( Indent Space and Comments ) + High context minify
    21. 21. html
    22. 22. html
    23. 23. html
    24. 24. style sheet
    25. 25. style sheet
    26. 26. style sheet
    27. 27. style sheet
    28. 28. style sheet
    29. 29. style sheet
    30. 30. style sheet
    31. 31. style sheet
    32. 32. javascript
    33. 33. javascript
    34. 34. javascript
    35. 35. javascript
    36. 36. javascript
    37. 37. javascript
    38. 38. javascript
    39. 39. javascript
    40. 40. Application
    41. 41. SmallerHTML, JavaScript, CSShttp://smallerapp.com/$20 ( free trial 30 days )
    42. 42. CodeKitJavaScripthttp://incident57.com/codekit/Beta ( beta : free / release : $20 )
    43. 43. HTMLCompressor.comHTMLhttp://htmlcompressor.com/
    44. 44. CLEAN CSSCSShttp://www.cleancss.com/
    45. 45. Online YUI CompressorJavaScript, CSShttp://www.refresh-sf.com/yui/
    46. 46. htmlcompressorHTML ( + php )http://code.google.com/p/htmlcompressor/
    47. 47. htmlcompressorHTML ( + php )http://code.google.com/p/htmlcompressor/ $ brew install htmlcompressor
    48. 48. YUI CompressorJavaScript, CSSYahoo! UI Libraryhttp://developer.yahoo.com/yui/compressor/
    49. 49. YUI CompressorJavaScript, CSSYahoo! UI Libraryhttp://developer.yahoo.com/yui/compressor/ $ brew install yuicompressor
    50. 50. clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css
    51. 51. clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css $ npm install clean-css
    52. 52. clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css +α(node.js) $ npm install clean-css
    53. 53. UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS
    54. 54. UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS $ npm install uglify-js
    55. 55. UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS +α(node.js) $ npm install uglify-js
    56. 56. RecommendDesigner Programmer ImageOptim htmlcompressor Smaller YUI Compressor
    57. 57. ! Don’t deleteJavaScript Copyright
    58. 58. 圧縮専用のツールを使えば Dreamweaverの出力はもっと圧縮できる
    59. 59. TargetImage files ( jpg, png )Text files ( html, style sheet, javascript )Transport (http)
    60. 60. Transpor t http1.1Accept-Encoding: gzip, deflate + Content-Encoding: gzip
    61. 61. Normal transpor t
    62. 62. Normal transpor t
    63. 63. Normal transpor t
    64. 64. Normal transpor t
    65. 65. Zipped transpor t
    66. 66. Zipped transpor tCOMPRESS
    67. 67. Zipped transpor tCOMPRESS
    68. 68. Zipped transpor tCOMPRESS EXPAND
    69. 69. Apache keyword : “DEFLATE” (mod_deflate) Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html Sample : httpd.confLoadModule deflate_module libexec/apache22/mod_deflate.so<Directory "/your-server-root/manual"> AddOutputFilterByType DEFLATE text/html application/javascript text/css</Directory>
    70. 70. nginx keyword : “gzip” (HttpGzipModule) Reference : http://wiki.nginx.org/HttpGzipModule Sample : nginx.confserver { gzip on; gzip_types text/css application/javascript # text/html default included}
    71. 71. ! Checkser ver performance
    72. 72. コンフィグを書き換えるだけで サーバーの出力はもっと圧縮できる
    73. 73. ConclusionGood response for Smart Phone ( Narrow band & Big contents ) “Web Compression”Many Techniques Image Files, Text Files → Use software Transport → Setup server
    74. 74. ちょっとの一手間 はじめるだけ
    75. 75. thank youTomokazu Kiyoharahttp://twitter.com/kiyoharahttp://facebook.com/tomokazu.kiyohara
    76. 76. one more thing
    77. 77. Let’s deleteCSS Vender Prefix
    78. 78. When can I use ...http://caniuse.com/
    79. 79. When can I use ...
    80. 80. photo credithttp://www.flickr.com/photos/julianlim/4598412264/http://www.flickr.com/photos/intelfreepress/6722296265/http://www.flickr.com/photos/scobleizer/4697192856/

    ×