Coding Web Performance

6,377 views

Published on

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,377
On SlideShare
0
From Embeds
0
Number of Embeds
3,331
Actions
Shares
0
Downloads
28
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Coding Web Performance

  1. 1. Coding Web Performance Koji Ishimoto Web Designer April 17, 2010 CSS Nite LP, Disk 9 Twitter:#cssnitelp9
  2. 2. Agenda CSS Nite LP, Disk 9 : Coder's Higher
  3. 3. Business Impact and Stance
  4. 4. Google Ranking Algorithm 2010.04.09 CSS Nite LP, Disk 9 : Coder's Higher
  5. 5. Google AdWords CSS Nite LP, Disk 9 : Coder's Higher
  6. 6. Google Webmaster Tools CSS Nite LP, Disk 9 : Coder's Higher
  7. 7. CSS Nite LP, Disk 9 : Coder's Higher
  8. 8. Before After -> Coder Coder + Performance CSS Nite LP, Disk 9 : Coder's Higher
  9. 9. CSS Nite LP, Disk 9 : Coder's Higher
  10. 10. Web Performance? CSS Nite LP, Disk 9 : Coder's Higher
  11. 11. CSS Nite LP, Disk 9 : Coder's Higher
  12. 12. Where is the time spent?
  13. 13. HTTPWatch 7.0 CSS Nite LP, Disk 9 : Coder's Higher
  14. 14. Waterfall Chart CSS Nite LP, Disk 9 : Coder's Higher
  15. 15. Blocking DNS Lookup Connect Send Wait Receieve Cashe Read CSS Nite LP, Disk 9 : Coder's Higher
  16. 16. Server ISP Client DNS Lookup Connect Wait Receive CSS Nite LP, Disk 9 : Coder's Higher
  17. 17. Waterfall Chart CSS Nite LP, Disk 9 : Coder's Higher
  18. 18. Wait Time! CSS Nite LP, Disk 9 : Coder's Higher
  19. 19. Wait Time! CSS Nite LP, Disk 9 : Coder's Higher
  20. 20. Internet Explorer 6 CSS Nite LP, Disk 9 : Coder's Higher
  21. 21. Firefox 3.6 CSS Nite LP, Disk 9 : Coder's Higher
  22. 22. IE6 IE7 IE8 Fx3.6 Chrome4 Safari4 Opera10 2 2 6 6 6 5 4 CSS Nite LP, Disk 9 : Coder's Higher
  23. 23. Waterfall Chart 2 IE6 6 Fx3.6 CSS Nite LP, Disk 9 : Coder's Higher
  24. 24. Internet Explorer 6 CSS Nite LP, Disk 9 : Coder's Higher
  25. 25. Internet Explorer 6 (Blocking) CSS Nite LP, Disk 9 : Coder's Higher
  26. 26. Blocking Time! CSS Nite LP, Disk 9 : Coder's Higher
  27. 27. Blocking Time! CSS Nite LP, Disk 9 : Coder's Higher
  28. 28. Recommend Practice
  29. 29. CSS Nite LP, Disk 9 : Coder's Higher
  30. 30. #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
  31. 31. Before CSS Nite LP, Disk 9 : Coder's Higher
  32. 32. After CSS Nite LP, Disk 9 : Coder's Higher
  33. 33. CSS Sprites Non Sprites -150ms { CSS Nite LP, Disk 9 : Coder's Higher
  34. 34. Pages Pages Maintenance Optimization Maintenance Optimization CSS Nite LP, Disk 9 : Coder's Higher
  35. 35. HTTP Requests 11-> 3 CSS Sprites CSS Nite LP, Disk 9 : Coder's Higher
  36. 36. .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
  37. 37. CSS Nite LP, Disk 9 : Coder's Higher
  38. 38. HTTP Requests 1-> 0 Data URI Scheme (Non IE5-7) CSS Nite LP, Disk 9 : Coder's Higher
  39. 39. <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
  40. 40. HTTP Requests 6 -> 2 Combined Scripts and Stylesheets CSS Nite LP, Disk 9 : Coder's Higher
  41. 41. .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
  42. 42. HTTP Requests ? -> 0 CSS Level 3 (Non IE) CSS Nite LP, Disk 9 : Coder's Higher
  43. 43. CSS Nite LP, Disk 9 : Coder's Higher
  44. 44. Change Design! CSS Nite LP, Disk 9 : Coder's Higher
  45. 45. CSS Nite LP, Disk 9 : Coder's Higher
  46. 46. HTTP Requests 2 -> 1+α Change Design! CSS Nite LP, Disk 9 : Coder's Higher
  47. 47. Google Site Performance CSS Nite LP, Disk 9 : Coder's Higher
  48. 48. Google Site Performance CSS Nite LP, Disk 9 : Coder's Higher
  49. 49. Today’s Conclusion
  50. 50. CSS Nite LP, Disk 9 : Coder's Higher
  51. 51. CSS Nite LP, Disk 9 : Coder's Higher
  52. 52. Thank you! Blog: http://t32k.com/mol/ Twitter: http://twitter.com/t32k/
  53. 53. Books CSS Nite LP, Disk 9 : Coder's Higher
  54. 54. 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
  55. 55. 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

×