1. Coding Web Performance
Koji Ishimoto
Web Designer
April 17, 2010
CSS Nite LP, Disk 9
Twitter:#cssnitelp9

2. Agenda
CSS Nite LP, Disk 9 : Coder's Higher

3. Business Impact and Stance

4. Google Ranking Algorithm
2010.04.09
CSS Nite LP, Disk 9 : Coder's Higher

5. Google AdWords
CSS Nite LP, Disk 9 : Coder's Higher

6. Google Webmaster Tools
CSS Nite LP, Disk 9 : Coder's Higher

7. CSS Nite LP, Disk 9 : Coder's Higher

8. Before After
->
Coder Coder + Performance
CSS Nite LP, Disk 9 : Coder's Higher

9. CSS Nite LP, Disk 9 : Coder's Higher

10. Web Performance?
CSS Nite LP, Disk 9 : Coder's Higher

11. CSS Nite LP, Disk 9 : Coder's Higher

13. Where is the time spent?

14. HTTPWatch 7.0
CSS Nite LP, Disk 9 : Coder's Higher

15. Waterfall Chart
CSS Nite LP, Disk 9 : Coder's Higher

16. Blocking
DNS Lookup
Connect
Send
Wait
Receieve
Cashe Read
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

18. Waterfall Chart
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

21. Internet Explorer 6
CSS Nite LP, Disk 9 : Coder's Higher

22. Firefox 3.6
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

24. Waterfall Chart
2
IE6
6
Fx3.6
CSS Nite LP, Disk 9 : Coder's Higher

25. Internet Explorer 6
CSS Nite LP, Disk 9 : Coder's Higher

26. Internet Explorer 6 (Blocking)
CSS Nite LP, Disk 9 : Coder's Higher

27. Blocking Time!
CSS Nite LP, Disk 9 : Coder's Higher

28. Blocking Time!
CSS Nite LP, Disk 9 : Coder's Higher

30. Recommend Practice

31. 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

37. HTTP Requests 11-> 3
CSS Sprites
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

39. 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

45. CSS Nite LP, Disk 9 : Coder's Higher

46. Change Design!
CSS Nite LP, Disk 9 : Coder's Higher

47. CSS Nite LP, Disk 9 : Coder's Higher

48. HTTP Requests 2 -> 1+α
Change Design!
CSS Nite LP, Disk 9 : Coder's Higher

49. Google Site Performance
CSS Nite LP, Disk 9 : Coder's Higher

50. Google Site Performance
CSS Nite LP, Disk 9 : Coder's Higher

51. Today’s Conclusion

52. CSS Nite LP, Disk 9 : Coder's Higher

53. 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

56. URLs
http://t32k.com/mol/2010/04/using-site-speed-in-web-search-ranking/
http://t32k.com/mol/2010/04/data-uri-scheme/
http://t32k.com/mol/2010/04/httpwatch-6-2-basic-edtion/
http://t32k.com/mol/2010/03/performance-business/
http://t32k.com/mol/2009/11/introduction-to-web-performance/
http://t32k.com/mol/2009/11/high-performance-web-design/
http://www.slideshare.net/sigwyg/css3-for-tomorrow
http://www.phpied.com/css-performance-ui-with-fewer-images/
http://www.google.com/webmasters/tools/
http://adwords.google.com/support/aw/bin/answer.py?hl=jp&answer=93112
http://www.findmebyip.com/litmus/
CSS Nite LP, Disk 9 : Coder's Higher

57. Photo Credits
http://www.flickr.com/photos/kkoshy/4035720581/
http://www.flickr.com/photos/38446022@N00/2940461586/
http://www.flickr.com/photos/38446022@N00/2940461918/
http://www.flickr.com/photos/lcledward/3600542728/
http://www.flickr.com/photos/nostri-imago/3582034044/
http://www.flickr.com/photos/consumerist/614750305/
http://www.flickr.com/photos/consumerist/614655989/
http://www.flickr.com/photos/mah_aaah/3660470519/
CSS Nite LP, Disk 9 : Coder's Higher