High Performance Webdesign

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

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

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

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

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

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

DNS Look up
ISP
Client
Server

DNS Look up
ISP
Client
Server
DNS Lookup

DNS Look up
ISP
Client
Server
DNS Lookup
First Connect

Set TCP Connection
DNS Look up
ISP
Client
Server
DNS Lookup
First Connect

Set TCP Connection
DNS Look up
ISP
Client
Server
DNS Lookup Connecting
First Connect

Set TCP Connection
DNS Look up
ISP
Client
Server
First Connect First HTTP Request

Set TCP Connection
DNS Look up
ISP
Send Data
Receive Data
Client
Server

Set TCP Connection
DNS Look up
ISP
Send Data
Receive Data
Client
Server
DNS Lookup Connecting Waiting

Set TCP Connection
DNS Look up
ISP
Send Data
Receive Data
Complete
Complete
Client
Server
DNS Lookup Connecting Waiting

Set TCP Connection
DNS Look up
ISP
Send Data
Receive Data
Complete
Complete
Client
Server
DNS Lookup Connecting Waiting Receiving

CSSデザイン
Power of CSS
✒

.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%;*/
}

.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;*/
}

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

CSS Hat
http://csshat.com/

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

画像の最適化
Image Optimization
🌄

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

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

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

CSSスプライト
CSS Sprites
🌄

       
📸

📸
       

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

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

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

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

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

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

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

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

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

with Sass
Compass Grunt
ex. grunt-spritesmith

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

これはテキスト
.text {
color: yellow;
}

.text {
font-size: 12px;
}

.text {
text-shadow: 2px 2px #000;
}

       
icon.ttf | .svg | .eot | .woff


.text {
font-size: 12px;
}

.text {
text-shadow: 2px 2px #000;
}

Illustrator Grunt
ex. grunt-webfont

画像埋め込み
Data URI Scheme
🌄

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

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

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=

一貫性
Consistency
📕
ルール・

.box-a {
margin: 10px;
border-radius: 6px;
background-color: rgba(239,206,130);
}
.box-b {
margin: 15px;
border-radius: 3px;
}
.ball-a {
margin: 15px 20px;
border-radius: 100%;
}
.ball-b {
margin: 12px 24px;
border-radius: 80%;
}

.box-a {
margin: 15px;
border-radius: 6px;
}
.box-b {
margin: 10px;
border-radius: 6px;
}
.ball-a {
margin: 15px 20px;
}
.ball-b {
margin: 15px;
}

.box {
border-radius: 6px;
}
.box-a {
margin: 15px;
}
.box-b {
margin: 10px;
}
.ball {
}
.ball-a {
margin: 15px 20px;
}
.ball-b {
margin: 15px;
}

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

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

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

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

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

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

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

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

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

High Performance Webdesign

More Related Content

What's hot (20)

More from 拓樹谷 (9)

Recently uploaded (20)