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.

Make your website 2 times faster

1,859 views

Published on

Web Directions East 09 Express. Web site performace slides

Published in: Technology
  • Be the first to comment

Make your website 2 times faster

  1. 1. 6 10 10 Apple Store Shinsaibashi
  2. 2. AOL Money & Finance
  3. 3. AOL Shopping
  4. 4. Bing 50ms 200ms -0.3% -0.4% 500 500ms -0.6% -1.2% -1.0% -0.9% 1200 1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 1900 2000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100
  5. 5. Google • • • UX • Velocity09 Merissa Mayer
  6. 6. Google
  7. 7. shopzilla.com • 2.5 3.5sUP • 7 12%UP • PV 25%UP
  8. 8. 6 1. 2. 3. httpRequest 4. Js CSS 5. CSS 6.
  9. 9.
  10. 10. Punyping
  11. 11. Punyping
  12. 12. Punyping 80KB
  13. 13. Punyping
  14. 14. Punyping 80KB 56KB
  15. 15. Js CSS
  16. 16. Js CSS 300ms <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> </head>
  17. 17. Js CSS 200ms <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> </head>
  18. 18. http • CSS Sprite • Data URI • CSS
  19. 19. CSS Sprite • background-position • Http • Sprite
  20. 20. CSS Sprite
  21. 21. CSS Sprite
  22. 22. CSS Sprite
  23. 23. CSS Sprite http://ja.spritegen.website-performance.org/
  24. 24. CSS Sprite
  25. 25. CSS Sprite
  26. 26. Data URI data URI(RFC2397) inline image URI http IE6,7
  27. 27. Data URI <img class=”data-uri” src=”data:image/ png;base64,....R0lGO” alt=”” />
  28. 28. Data URI <!--[if lt IE 8]> <img src=”logo.png” alt=”” /> <![endif]--> <img class=”data-uri” src=”data:image/gif;base64,R0lGO” alt=”” />
  29. 29. Webfonts
  30. 30. Webfont @font-face { font-family: Makiba; src: url(MakibaFont13.eot); /* IE */ src: local("Makiba"), /* webkit*/ url(MakibaFont13.ttf) format("truetype"); }
  31. 31. Data URI
  32. 32. CSS • ul li a{......} • li a{......} • a{.......}
  33. 33. CSS • ul li a{......} • li a{......} • a{.......}
  34. 34. CSS • ul li a{......} • li a{......} • a{.......}
  35. 35. CSS • ul#gloabal-navigation li a{display:block;} • ul#footer-navigation li a{display:block;} • .navigation-link{display:block;}
  36. 36. CSS
  37. 37. CSS • •
  38. 38. OOCSS
  39. 39. OOCSS CSS YUI Grid CSS OOCSS Grid CSS Nicole Sullivan Facebook
  40. 40. OOCSS
  41. 41. OOCSS unit line sizeXofY
  42. 42. OOCSS OOCSS
  43. 43. OOCSS
  44. 44. • Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -
  45. 45. Yslow!
  46. 46. W3C Link cheker
  47. 47. -moz-image-rendaring
  48. 48. -moz-image-rendaring •Firefox 3.6 •auto •optimizeQuality •optimizeSpeed •-moz-crisp-edges
  49. 49. -moz-image-rendaring img { image-rendering: optimizeSpeed; /* Firefox, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* Internet Explorer 7.0+ */ } ‣IE7 ‣Firefox 3.6
  50. 50. -moz-image-rendaring img[src$=".gif"] { image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* IE 7+ */ }
  51. 51. 11 11 13 OOCSS Nicole Sullivan

×