Coding Web Performance
?
10 likes?4,582 views
The document discusses improving web performance through coding practices like using CSS sprites to reduce HTTP requests, combining stylesheets and scripts, and implementing CSS3 features for browsers that support them. It recommends techniques like optimizing images, minimizing wait time through better server configurations, and prioritizing page load speed in website design. The presentation provides examples of how to measure page load times and analyze where time is spent using tools like HTTPWatch.
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
Coding Web Performance
- 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
- 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=/slideshow/coding-web-performance/5026478/"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
- 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