Download as PDF, PPTX
Uploaded by拓樹 谷
PDF, PPTX3,904 views
High Performance Webdesign
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.
Recommended
High Performance Webdesign
- 1.High Performance WebDesignデザイナーができるパフォーマンス施策High Performance Web Design谷 拓樹2013.09.20 Skill Up Friday:
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.7s7📱 ⏳❌Page loadtimehttp://analytics.blogspot.jp/2013/04/is-web-getting-faster.html
- 16.
- 17.
- 18.
- 19.HTTP Request StructureDNSLook upISPClientServerhttp://t32k.me/mol/log/reduce-http-requests-overview/
- 20.HTTP Request StructureDNSLook upISPClientServerDNS Lookuphttp://t32k.me/mol/log/reduce-http-requests-overview/
- 21.HTTP Request StructureDNSLook upISPClientServerDNS LookupFirst Connecthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 22.HTTP Request StructureSetTCP ConnectionDNS Look upISPClientServerDNS LookupFirst Connecthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 23.HTTP Request StructureSetTCP ConnectionDNS Look upISPClientServerDNS Lookup ConnectingFirst Connecthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 24.HTTP Request StructureSetTCP ConnectionDNS Look upISPClientServerDNS Lookup ConnectingFirst Connect First HTTP Requesthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 25.HTTP Request StructureSetTCP ConnectionDNS Look upISPSend DataReceive DataClientServerDNS Lookup ConnectingFirst Connect First HTTP Requesthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 26.HTTP Request StructureSetTCP ConnectionDNS Look upISPSend DataReceive DataClientServerDNS Lookup Connecting WaitingFirst Connect First HTTP Requesthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 27.HTTP Request StructureSetTCP ConnectionDNS Look upISPSend DataReceive DataCompleteCompleteClientServerDNS Lookup Connecting WaitingFirst Connect First HTTP Requesthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 28.HTTP Request StructureSetTCP ConnectionDNS Look upISPSend DataReceive DataCompleteCompleteClientServerDNS Lookup Connecting Waiting ReceivingFirst Connect First HTTP Requesthttp://t32k.me/mol/log/reduce-http-requests-overview/
- 29.
- 30.
- 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%,#14ba4e100%);/* background-image: url("btn-primary.png"); -webkit-background-size: 166px 33px; background-size: 166px 33px;*/}
- 36..meetup { -webkit-border-image:url("box.png") 20stretch; 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.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 53.
- 54.
- 55.
- 56.
- 57. 📸
- 58. 📸
- 59.📸
- 60. background-position:0px 0px;
- 61. background-position: 0px 0px;
- 62.
- 63.
- 64. Heavy WatingHeavy Receivingvs
- 65. ⏶
- 66. page01.html page02.html
- 67.
- 68.
- 69.
- 70.
- 71.with SassCompass Gruntex.grunt-spritesmith
- 72.
- 73.
- 74.これはテキスト.text { color:yellow;}
- 75.
- 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.
- 86.
- 87.
- 88..ico-twitter { background-image:url("data:image/png;base64,iVBORw0KGgoAAA...5CYII=");}
- 89.
- 90.
- 91.
- 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.
- 104.
- 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.
- 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.
- 116.神は細部に宿るGod is inthe detail.
- 117.
- 118.
- 119.♡Thanks!Special Thanks:Koji Ishimoto@t32k/ Ayumu Sato@ahomuShogo Sensui@1000ch / Yuya Saito@cssradar
- 120.