High Performance Webdesign

High Performance Web Designデザイナーができるパフォーマンス施策

High Performance Web Design

谷拓樹

2013.09.20 Skill Up Friday:

DesignerDesignerDesigner

Developer

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



🛇Performance


🛇

⚒

⚒

⚒

💡

px1px

ms1ms

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/



ms1,0001,000♡👤❌

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





Demo time

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 Hathttp://csshat.com/

http://csshat.com/

http://csshat.com/

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






💥

💥

💥

💥

🌄

画像の最適化Image Optimization

🌄

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

http://pngmini.com/

http://pngmini.com/

http://imageoptim.com/


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



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

Gruntex. grunt-imageoptim

http://pngmini.com/

http://pngmini.com/



https://github.com/JamieMason/grunt-imageoptim

https://github.com/JamieMason/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 Gruntex. grunt-spritesmith

アイコンフォントWeb Font Icon

🌄

🎔

これはテキスト

.text { color: yellow;}


.text { font-size: 12px;}


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

icon.ttf | .svg | .eot | .woff

.text { color: yellow;}

.text { font-size: 12px;}

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

‖

Illustrator Gruntex. grunt-webfont

画像埋め込みData URI Scheme

🌄

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAGFBMVEUAAAD///////////////////////////8jfp1fAAAAB3RSTlMAbkGY5hXClU3VWgAAAM1JREFUeNqdlNGOwzAIBIFd4P//uO2pVo1xqXTzlmgMtpdENtwQzGRAXe44mB9gVyUPolUzZkero3kF3Zkty0br6MzvrEMiB/gulCP6pRCD20PdEba1Cl3vrRzNdavvGmtt6SZi8XKPuwsRibJFw4ost8XCXMBlUSSrDxvWpR4nutQHjUWKluY5F8eFq1/mgucswfucYs+XugopW8L4WH8xVSVZ+s+zGZNDl9+ltF1KB5cMxq8YozN2hP/8GVClo6yKyxUD3wZUJuyJ/IsHfX8VVLDqtPAAAAAASUVORK5CYII=

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

}

<img src="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+Hu6YPTyLH5l0Hzusr8hLsPkyKZ24jVlJsmCfHpu9rf5P9Rqur75lUK89p9bj64Tc2oTiZOFt7m8kxTgNjBa5LkPlZRDz2rLYdVs/wPavKL07DfxfUAAAAASUVORK5CYII=

一貫性Consistency

📕

ルール・

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

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

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

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




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


📱

📱💥

💥


企画公開運用設計

開発検証デザイン

企画公開運用設計

開発検証デザイン

In ConclusionIn Conclusion

http://ejje.weblio.jp/content/In+conclusion

http://ejje.weblio.jp/content/In+conclusion

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

http://en.wikipedia.org/wiki/God_is_in_the_detail

http://en.wikipedia.org/wiki/God_is_in_the_detail

Less is more.

より少ないことは、より豊かなこと

♡Designer Developer

♡Thanks!

Special Thanks:

Koji Ishimoto@t32k / Ayumu Sato@ahomu

Shogo Sensui@1000ch / Yuya Saito@cssradar

Photo Credithttp://www.flickr.com/photos/ujh/4307773392/

http://www.flickr.com/photos/mantissa/4648768635/

http://www.flickr.com/photos/ruiwen/3260092832/

http://www.flickr.com/photos/ujh/4307773392/

http://www.flickr.com/photos/ujh/4307773392/

http://www.flickr.com/photos/mantissa/4648768635

http://www.flickr.com/photos/mantissa/4648768635



Technology

High Performance Webdesign