High Performance Webdesign
•
36 likes•3,892 views
The document discusses various techniques designers can use to improve website performance, including optimizing images, using CSS sprites, icon fonts, data URI schemes, and maintaining consistency with styles and rules. It provides examples of how to optimize images, create CSS sprites, use icon fonts, embed images via data URIs, and improve consistency. It also includes links to resources about gzip compression and gradient button styles.
High Performance Webdesign
- 1. High Performance Web Design デザイナーができるパフォーマンス施策 High Performance Web Design 谷 拓樹 2013.09.20 Skill Up Friday:
- 3. Developer
- 9. ⚒
- 10. ⚒
- 11. ⚒
- 12. 💡
- 13. px1px
- 14. ms1ms
- 15. 7s7 📱 ⏳❌ Page load time http://analytics.blogspot.jp/2013/04/is-web-getting-faster.html
- 17. ms1,0001,000 ♡👤❌
- 19. HTTP Request Structure DNS Look up ISP Client Server http://t32k.me/mol/log/reduce-http-requests-overview/
- 20. HTTP Request Structure DNS Look up ISP Client Server DNS Lookup http://t32k.me/mol/log/reduce-http-requests-overview/
- 21. HTTP Request Structure DNS Look up ISP Client Server DNS Lookup First Connect http://t32k.me/mol/log/reduce-http-requests-overview/
- 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. 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. 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. 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. 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. 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. 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. Demo time
- 32. .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%;*/ }
- 34. .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;*/ }
- 36. .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; }
- 45. 💥
- 46. 💥
- 47. 💥
- 48. 💥
- 49. 🌄
- 57. 📸
- 58. 📸
- 59. 📸
- 60. background-position: 0px 0px;
- 61. background-position: 0px 0px;
- 62. background-position: 0px -16px;
- 64. Heavy Wating Heavy Receiving vs
- 65. ⏶
- 66. page01.html page02.html
- 67. 💨☆☆
- 68.
- 69.
- 70.
- 71. with Sass Compass Grunt ex. grunt-spritesmith
- 73. 🎔
- 74. これはテキスト .text { color: yellow; }
- 75. これはテキスト .text { font-size: 12px; }
- 76. これはテキスト .text { text-shadow: 2px 2px #000; }
- 77.
- 78.
- 79. icon.ttf | .svg | .eot | .woff
- 80. .text { color: yellow; }
- 81. .text { font-size: 12px; }
- 82. .text { text-shadow: 2px 2px #000; }
- 83. ‖
- 88. .ico-twitter { background-image: url("data:image/ png;base64,iVBORw0KGgoAAA...5CYII="); }
- 99. .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); }
- 101. .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); }
- 102. .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; }
- 105. .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%); }
- 107. .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; }
- 109. 📱
- 110.
- 111. 📱💥 💥
- 116. 神は細部に宿る God is in the detail.
- 118. ♡Designer Developer
- 119. ♡ Thanks! Special Thanks: Koji Ishimoto@t32k / Ayumu Sato@ahomu Shogo Sensui@1000ch / Yuya Saito@cssradar