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

1. High Performance Web Design
デザイナーができるパフォーマンス施策
High Performance Web Design
谷 拓樹
2013.09.20 Skill Up Friday:

2. DesignerDesignerDesigner

3. Developer

4. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン

5. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン

6. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン

7. 🛇
Performance

8. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン
🛇

9. ⚒


10. ⚒

11. ⚒

12. 💡

13. px1px

14. ms1ms

15. 7s7
📱 ⏳❌
Page load time
http://analytics.blogspot.jp/2013/04/is-web-getting-faster.html

16. 1s1
♡👤❌
Response times
http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

17. ms1,0001,000
♡👤❌

18. HTTP Request Structure
Client
Server
http://t32k.me/mol/log/reduce-http-requests-overview/

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

30. CSSデザイン
Power of CSS
✒

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;
}

42. CSS Hat
http://csshat.com/

43. https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu

44. https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu

45. 💥

46. 💥

47. 💥

48. 💥

49. 🌄

50. 画像の最適化
Image Optimization
🌄

53. ImageOptim ImageAlpha
http://pngmini.com/http://imageoptim.com/

54. https://gist.github.com/t32k/6606334

55. ImageOptim ImageAlpha
http://pngmini.com/http://imageoptim.com/
Grunt
ex. grunt-imageoptim

56. CSSスプライト
CSS Sprites
🌄

57.        
📸

58.        
📸

59. 📸
       

60.   
background-position: 0px 0px;

61.    
background-position: 0px 0px;

62. background-position: 0px -16px;
   

63. http://www.youtube.com/watch?v=s__XwfwxMW8

64.        
       
Heavy Wating
Heavy Receiving
vs

65.        
⏶     

66.    
   
   
 
       
page01.html page02.html
     

67. 💨☆☆

68.    
   
   

69.    
   
   

70. 


71. with Sass
Compass Grunt
ex. grunt-spritesmith

72. アイコンフォント
Web Font Icon
🌄

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. 
‖

84. Illustrator Grunt
ex. grunt-webfont

86. 画像埋め込み
Data URI Scheme
🌄

87. data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqA
AAAGFBMVEUAAAD///////////////////////////
8jfp1fAAAAB3RSTlMAbkGY5hXClU3VWgAAAM1JREFUeNqdlNGOwzAIBI
Fd4P//
uO2pVo1xqXTzlmgMtpdENtwQzGRAXe44mB9gVyUPolUzZkero3kF3Zkt
y0br6MzvrEMiB/
gulCP6pRCD20PdEba1Cl3vrRzNdavvGmtt6SZi8XKPuwsRibJFw4ost8
XCXMBlUSSrDxvWpR4nutQHjUWKluY5F8eFq1/mgucswfucYs
+XugopW8L4WH8xVSVZ+s+zGZNDl9+ltF1KB5cMxq8YozN2hP/
8GVClo6yKyxUD3wZUJuyJ/IsHfX8VVLDqtPAAAAAASUVORK5CYII=

88. .ico-twitter {
background-image: url("data:image/
png;base64,iVBORw0KGgoAAA...5CYII=");
}

89. <img src="data:image/
png;base64,iVBORw0KGgoAAA...5CYII=">

90. 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=

91. 一貫性
Consistency
📕
ルール・

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;
}

103. https://github.com/t32k/speed/blob/master/articles/gzip.md

104. http://codepen.io/hiloki/pen/JemyE

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%);
}

106. http://codepen.io/hiloki/pen/JemyE

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;
}

108. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン

109. 📱

110. 

111. 📱💥
💥

112. 企
画
設
計
開
発
検
証
公
開
運
用
デ
ザ
イ
ン

113. 企
画
公
開
運
用
設
計
開
発
検
証
デ
ザ
イ
ン

114. 企
画
公
開
運
用
設
計
開
発
検
証
デ
ザ
イ
ン

115. In ConclusionIn Conclusion

116. 神は細部に宿る
God is in the detail.

117. Less is more.
より少ないことは、より豊かなこと

118. ♡Designer Developer

119. ♡
Thanks!
Special Thanks:
Koji Ishimoto@t32k / Ayumu Sato@ahomu
Shogo Sensui@1000ch / Yuya Saito@cssradar

120. Photo Credit
http://www.flickr.com/photos/ujh/4307773392/
http://www.flickr.com/photos/mantissa/4648768635/
http://www.flickr.com/photos/ruiwen/3260092832/