Make your website 2 times faster
•
3 likes•883 views
The document discusses various techniques for improving website performance, including: 1. Using CSS sprites and data URIs to reduce the number of HTTP requests by embedding images and other files directly in CSS or HTML code. 2. Optimizing the order of CSS and JavaScript links in the head section to allow pages to render more quickly. 3. Implementing techniques like OOCSS to better structure CSS rules and selectors for improved rendering speed and smaller file sizes. 4. Leveraging browser-specific optimizations like -moz-image-rendering in Firefox to improve how images are displayed. A variety of tools are also mentioned for analyzing page performance bottlenecks. In summary, the document covers strategies for front-
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Make your website 2 times faster
Similar to Make your website 2 times faster (20)
More from Satoshi Kikuchi
More from Satoshi Kikuchi (17)
Recently uploaded
Recently uploaded (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