High Performance Webdesign

3,053 views

Published on

デザイナー向け社内勉強会でのスライド資料です。

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

No Downloads
Views
Total views
3,053
On SlideShare
0
From Embeds
0
Number of Embeds
280
Actions
Shares
0
Downloads
33
Comments
0
Likes
36
Embeds 0
No embeds

No notes for slide

High Performance Webdesign

  1. 1. High Performance Web Design デザイナーができるパフォーマンス施策 High Performance Web Design 谷 拓樹 2013.09.20 Skill Up Friday:
  2. 2. DesignerDesignerDesigner
  3. 3. Developer
  4. 4. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン
  5. 5. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン
  6. 6. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン
  7. 7. 🛇 Performance
  8. 8. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン 🛇
  9. 9. ⚒ 
  10. 10. ⚒
  11. 11. ⚒
  12. 12. 💡
  13. 13. px1px
  14. 14. ms1ms
  15. 15. 7s7 📱 ⏳❌ Page load time http://analytics.blogspot.jp/2013/04/is-web-getting-faster.html
  16. 16. 1s1 ♡👤❌ Response times http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
  17. 17. ms1,0001,000 ♡👤❌
  18. 18. HTTP Request Structure Client Server http://t32k.me/mol/log/reduce-http-requests-overview/
  19. 19. HTTP Request Structure DNS Look up ISP Client Server http://t32k.me/mol/log/reduce-http-requests-overview/
  20. 20. HTTP Request Structure DNS Look up ISP Client Server DNS Lookup http://t32k.me/mol/log/reduce-http-requests-overview/
  21. 21. HTTP Request Structure DNS Look up ISP Client Server DNS Lookup First Connect http://t32k.me/mol/log/reduce-http-requests-overview/
  22. 22. HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup First Connect http://t32k.me/mol/log/reduce-http-requests-overview/
  23. 23. HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup Connecting First Connect http://t32k.me/mol/log/reduce-http-requests-overview/
  24. 24. HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup Connecting First Connect First HTTP Request http://t32k.me/mol/log/reduce-http-requests-overview/
  25. 25. HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Client Server DNS Lookup Connecting First Connect First HTTP Request http://t32k.me/mol/log/reduce-http-requests-overview/
  26. 26. HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request http://t32k.me/mol/log/reduce-http-requests-overview/
  27. 27. HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request http://t32k.me/mol/log/reduce-http-requests-overview/
  28. 28. HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request http://t32k.me/mol/log/reduce-http-requests-overview/
  29. 29. Demo time
  30. 30. CSSデザイン Power of CSS ✒
  31. 31. .session-speaker > img { margin: 4px 4px 9px 4px; padding: 1px; display: block; width: 67px; height: 67px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.8); box-shadow: 0 0 4px rgba(0,0,0,.8); /* background-image: url("avatar.png"); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%;*/ }
  32. 32. .btn-primary { box-shadow: 0px 1px 1px rgba(0,0,0,.40); border: 1px solid #15b94d; border-radius: 4px; background: #3ae789; background: linear-gradient(to bottom, #3ae789 0%,#33de82 20%,#19c269 72%,#14ba4e 100%); /* background-image: url("btn-primary.png"); -webkit-background-size: 166px 33px; background-size: 166px 33px;*/ }
  33. 33. .meetup { -webkit-border-image: url("box.png") 20 stretch; border-image: url("box.png") 20 stretch; border-width: 10px; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 0 10px; width: 250px; }
  34. 34. CSS Hat http://csshat.com/
  35. 35. https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu
  36. 36. https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu
  37. 37. 💥
  38. 38. 💥
  39. 39. 💥
  40. 40. 💥
  41. 41. 🌄
  42. 42. 画像の最適化 Image Optimization 🌄
  43. 43. ImageOptim ImageAlpha http://pngmini.com/http://imageoptim.com/
  44. 44. https://gist.github.com/t32k/6606334
  45. 45. ImageOptim ImageAlpha http://pngmini.com/http://imageoptim.com/ Grunt ex. grunt-imageoptim
  46. 46. CSSスプライト CSS Sprites 🌄
  47. 47.         📸
  48. 48.         📸
  49. 49. 📸        
  50. 50.    background-position: 0px 0px;
  51. 51.     background-position: 0px 0px;
  52. 52. background-position: 0px -16px;    
  53. 53. http://www.youtube.com/watch?v=s__XwfwxMW8
  54. 54.                 Heavy Wating Heavy Receiving vs
  55. 55.         ⏶     
  56. 56.                       page01.html page02.html      
  57. 57. 💨☆☆
  58. 58.            
  59. 59.            
  60. 60.  
  61. 61. with Sass Compass Grunt ex. grunt-spritesmith
  62. 62. アイコンフォント Web Font Icon 🌄
  63. 63. 🎔
  64. 64. これはテキスト .text { color: yellow; }
  65. 65. これはテキスト .text { font-size: 12px; }
  66. 66. これはテキスト .text { text-shadow: 2px 2px #000; }
  67. 67.
  68. 68.  
  69. 69.         icon.ttf | .svg | .eot | .woff
  70. 70. .text { color: yellow; }
  71. 71.  .text { font-size: 12px; }
  72. 72. .text { text-shadow: 2px 2px #000; }
  73. 73.  ‖
  74. 74. Illustrator Grunt ex. grunt-webfont
  75. 75. 画像埋め込み Data URI Scheme 🌄
  76. 76. data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqA AAAGFBMVEUAAAD/////////////////////////// 8jfp1fAAAAB3RSTlMAbkGY5hXClU3VWgAAAM1JREFUeNqdlNGOwzAIBI Fd4P// uO2pVo1xqXTzlmgMtpdENtwQzGRAXe44mB9gVyUPolUzZkero3kF3Zkt y0br6MzvrEMiB/ gulCP6pRCD20PdEba1Cl3vrRzNdavvGmtt6SZi8XKPuwsRibJFw4ost8 XCXMBlUSSrDxvWpR4nutQHjUWKluY5F8eFq1/mgucswfucYs +XugopW8L4WH8xVSVZ+s+zGZNDl9+ltF1KB5cMxq8YozN2hP/ 8GVClo6yKyxUD3wZUJuyJ/IsHfX8VVLDqtPAAAAAASUVORK5CYII=
  77. 77. .ico-twitter { background-image: url("data:image/ png;base64,iVBORw0KGgoAAA...5CYII="); }
  78. 78. <img src="data:image/ png;base64,iVBORw0KGgoAAA...5CYII=">
  79. 79. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB +0KVeAAAAGFBMVEXt7Ovv7+7y8fDl5OTp6Ofe3d3Z2Nf39/ cunfntAAACOUlEQVR4AS2Sy7abIBSGN3IZaxHHmhUcS9N0DIkwVg8PgCkPkNS8/+omp2PWx3/b8HQSLt5kQQbZTMol7SIcMEmZ/ G31L0ObC7eZE+gpscptgu1vYlr65auHgudE64tnmdc9BadOSfQbHI1r6eJtDvgMF2HzdYaB1oaTVbTrUU +SZn9eBDwNJRfFkq562Rg1b7pPgO9UZnFKGs01l/ FH9ABDC1adYzfno7ZSLprFgDirr7pavRvaelL9Q91QnUxS7QKielmJ5lwcGxgYGF1tnqSDGCq/VL94eFoJVw9RGFR3qtn0KX +rJ18lVczfPdu5g16C4XPEoG8wUu7+nDX8NRSuHeweBgkTn5NqFniDkzT6eeGIN16R1bdQwvEm +qqYp3QfzxuHj7uuzQpxzE6SqhZs3jCag0vh9ROHGZsczp/qVB/ HW34Xc9vYluwT4sIlUZo3yq7CRijheBphF0+DeBiitjhc7XiTR3gcUPCO5QAvI8uwS2DFvGq3QAqOyzxGtmD2FtVZHu/Qt/ gOqxjiAbbFZtnewbPg3byKuZe4a73xc6nO4fehfehXOYtQL77H7MSo5k+o16NUF/Xtgbs7Ri6Cbd5itonXq252xPE9KRfFB +fkEW7YTY34Iuz6MR85HiWqt/V9nFc1o3nLf +Hu6YPTyLH5l0Hzusr8hLsPkyKZ24jVlJsmCfHpu9rf5P9Rqur75lUK89p9bj64Tc2oTiZOFt7m8kxTgNjBa5LkPlZRDz2rLYdV s/wPavKL07DfxfUAAAAASUVORK5CYII=
  80. 80. 一貫性 Consistency 📕 ルール・
  81. 81. .box-a { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 15px; border-radius: 3px; background-color: rgba(201,173,109); } .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 12px 24px; border-radius: 80%; background-color: rgba(186,99,100); }
  82. 82. .box-a { margin: 15px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 15px; border-radius: 100%; background-color: rgba(239,129,128); }
  83. 83. .box { border-radius: 6px; background-color: rgba(239,206,130); } .box-a { margin: 15px; } .box-b { margin: 10px; } .ball { border-radius: 100%; background-color: rgba(239,129,128); } .ball-a { margin: 15px 20px; } .ball-b { margin: 15px; }
  84. 84. https://github.com/t32k/speed/blob/master/articles/gzip.md
  85. 85. http://codepen.io/hiloki/pen/JemyE
  86. 86. .button-primary { background-color: #0099AA; background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#63b0b9), color-stop(100%,#198c99)); background: -webkit-linear-gradient(top, #63b0b9 0%,#198c99 100%); background: linear-gradient(to bottom, #63b0b9 0%,#198c99 100%); } .button-success { background-color: #339900; background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#7cb063), color-stop(100%,#3f8c19)); background: -webkit-linear-gradient(top, #7cb063 0%,#3f8c19 100%); background: linear-gradient(to bottom, #7cb063 0%,#3f8c19 100%); } .button-danger { background-color: #CC3300; background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#ca7c63), color-stop(100%,#b23f19)); background: -webkit-linear-gradient(top, #ca7c63 0%,#b23f19 100%); background: linear-gradient(to bottom, #ca7c63 0%,#b23f19 100%); }
  87. 87. http://codepen.io/hiloki/pen/JemyE
  88. 88. .button-default { background-image: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(200,200,200,0.5)), color-stop(100%,rgba(100,100,100,0.25))); background-image: -webkit-linear-gradient(top, rgba(200,200,200,0.5) 0%,rgba(100,100,100,0.25) 100%); background-image: linear-gradient(to bottom, rgba(200,200,200,0.5) 0%,rgba(100,100,100,0.25) 100%); } .button-primary { background-color: #0099AA; } .button-success { background-color: #339900; } .button-danger { background-color: #CC3300; }
  89. 89. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン
  90. 90. 📱
  91. 91.
  92. 92. 📱💥 💥
  93. 93. 企 画 設 計 開 発 検 証 公 開 運 用 デ ザ イ ン
  94. 94. 企 画 公 開 運 用 設 計 開 発 検 証 デ ザ イ ン
  95. 95. 企 画 公 開 運 用 設 計 開 発 検 証 デ ザ イ ン
  96. 96. In ConclusionIn Conclusion
  97. 97. 神は細部に宿る God is in the detail.
  98. 98. Less is more. より少ないことは、より豊かなこと
  99. 99. ♡Designer Developer
  100. 100. ♡ Thanks! Special Thanks: Koji Ishimoto@t32k / Ayumu Sato@ahomu Shogo Sensui@1000ch / Yuya Saito@cssradar
  101. 101. Photo Credit http://www.flickr.com/photos/ujh/4307773392/ http://www.flickr.com/photos/mantissa/4648768635/ http://www.flickr.com/photos/ruiwen/3260092832/

×