Make your website 2 times faster
•
3 j'aime•882 vues
Web Directions East 09 Express. Web site performace slides
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Make your website 2 times faster
Similaire à Make your website 2 times faster (20)
Plus de Satoshi Kikuchi
Plus de Satoshi Kikuchi (17)
Dernier
Dernier (20)
Make your website 2 times faster
- 1. 6 10 10 Apple Store Shinsaibashi
- 3. AOL Money & Finance
- 4. AOL Shopping
- 5. 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
- 6. Google • • • UX • Velocity09 Merissa Mayer
- 7. Google
- 8. shopzilla.com • 2.5 3.5sUP • 7 12%UP • PV 25%UP
- 10. 6 1. 2. 3. httpRequest 4. Js CSS 5. CSS 6.
- 11. •
- 12. Punyping
- 13. Punyping
- 14. Punyping 80KB
- 15. Punyping
- 16. Punyping 80KB 56KB
- 17. Js CSS
- 18. 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>
- 19. 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>
- 20. http • CSS Sprite • Data URI • CSS
- 21. CSS Sprite • background-position • Http • Sprite
- 22. CSS Sprite
- 23. CSS Sprite
- 24. CSS Sprite
- 26. CSS Sprite
- 27. CSS Sprite
- 28. Data URI data URI(RFC2397) inline image URI http IE6,7
- 30. Data URI <!--[if lt IE 8]> <img src=”logo.png” alt=”” /> <![endif]--> <img class=”data-uri” src=”data:image/gif;base64,R0lGO” alt=”” />
- 31. Webfonts
- 32. Webfont @font-face { font-family: Makiba; src: url(MakibaFont13.eot); /* IE */ src: local("Makiba"), /* webkit*/ url(MakibaFont13.ttf) format("truetype"); }
- 33. Data URI
- 34. CSS • ul li a{......} • li a{......} • a{.......}
- 35. CSS • ul li a{......} • li a{......} • a{.......}
- 36. CSS • ul li a{......} • li a{......} • a{.......}
- 37. CSS • ul#gloabal-navigation li a{display:block;} • ul#footer-navigation li a{display:block;} • .navigation-link{display:block;}
- 38. CSS
- 39. CSS • •
- 40. OOCSS
- 41. OOCSS CSS YUI Grid CSS OOCSS Grid CSS Nicole Sullivan Facebook
- 42. OOCSS
- 44. OOCSS OOCSS
- 45. OOCSS
- 47. • Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -
- 49. Yslow!
- 50. W3C Link cheker
- 54. -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
- 55. -moz-image-rendaring img[src$=".gif"] { image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* IE 7+ */ }
- 57. 11 11 13 OOCSS Nicole Sullivan