More Related Content
Similar to Coding Web Performance
Similar to Coding Web Performance (20)
More from Koji Ishimoto (17)
Coding Web Performance
- 2. Agenda
CSS Nite LP, Disk 9 : Coder's Higher
- 8. Before After
->
Coder Coder + Performance
CSS Nite LP, Disk 9 : Coder's Higher
- 17. Server
ISP
Client
DNS Lookup Connect Wait Receive
CSS Nite LP, Disk 9 : Coder's Higher
- 19. Wait Time!
CSS Nite LP, Disk 9 : Coder's Higher
- 20. Wait Time!
CSS Nite LP, Disk 9 : Coder's Higher
- 23. IE6 IE7 IE8 Fx3.6 Chrome4 Safari4 Opera10
2 2 6 6 6 5 4
CSS Nite LP, Disk 9 : Coder's Higher
- 32. #globalNav ul li a {
display: block; height: 28px;
background-image: url(/img/common/hd/bg_globalnav.png);}
#globalNav #home.on a {
background-position: 0 -60px;}
#globalNav #info.on a {
background-position: -108px -60px;}
#globalNav #news.on a {
background-position: -219px -60px;}
#globalNav #business.on a {
background-position: -375px -60px;}
...
CSS Nite LP, Disk 9 : Coder's Higher
- 33. Before
CSS Nite LP, Disk 9 : Coder's Higher
- 34. After
CSS Nite LP, Disk 9 : Coder's Higher
- 35. CSS Sprites Non Sprites
-150ms {
CSS Nite LP, Disk 9 : Coder's Higher
- 36. Pages Pages
Maintenance
Optimization
Maintenance Optimization
CSS Nite LP, Disk 9 : Coder's Higher
- 38. .pageTop a {
background: url(/img/common/ico_arrow.png) no-repeat;}
!
.pageTop a {
background: url(data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAqCAMAAAC0q5rDAAAABGdBTUEAAKI
NwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADAUExURenp6f
Lw7/b29vT09NjY2NPT05u20/7+/u3t7e/v7/Hw7/Pz8+/v7v39/fj4+Ofn5/Dv7/
Hx8fLy8uXl5UF6tODg4Dl1sfz8Nvb2n5+ePj49ra2vv73gCMTEL32budBhC9TCv6i99Ftv
3yaTB3IVufu8lTTkclSooenfZBBKpMzgPv3GrgrZHLTpldn4H2PYpnU7+zGd
+WgNZtc...) no-repeat;}
CSS Nite LP, Disk 9 : Coder's Higher
- 40. HTTP Requests 1-> 0
Data URI Scheme
(Non IE5-7)
CSS Nite LP, Disk 9 : Coder's Higher
- 41. <link rel="stylesheet" type="text/css" href="file/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="file/css/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="file/css/structure.css" />
!
<link rel="stylesheet" type="text/css" href="file/css/common.css" />
<script type="text/javascript" src="file/js/jquery-min.js"></script>
<script type="text/javascript" src="file/js/jquery-plugin1.js"></script>
<script type="text/javascript" src="file/js/jquery-plugin2.js"></script>
!
<script type="text/javascript" src="file/js/common.js"></script>
CSS Nite LP, Disk 9 : Coder's Higher
- 42. HTTP Requests 6 -> 2
Combined Scripts and Stylesheets
CSS Nite LP, Disk 9 : Coder's Higher
- 43. .hoge {opacity:0.5; color:rgba(255,255,0,0.5); color:hsla(120,100%,50%,0.5);}
.hoge { border-radius: 20px; }
.hoge { box-shadow: 5px 5px 5px #666666; }
.hoge { background-image: linear-gradient(top, #000000, #cccccc); }
CSS Nite LP, Disk 9 : Coder's Higher
- 44. HTTP Requests ? -> 0
CSS Level 3
(Non IE)
CSS Nite LP, Disk 9 : Coder's Higher
- 48. HTTP Requests 2 -> 1+α
Change Design!
CSS Nite LP, Disk 9 : Coder's Higher
- 54. Thank you!
Blog: http://t32k.com/mol/
Twitter: http://twitter.com/t32k/
- 55. Books
CSS Nite LP, Disk 9 : Coder's Higher
