Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Coding Web Performance

6,851 views

Published on

Published in: Design
  • Be the first to comment

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

×