Front End Web Development Basics
Your SlideShare is downloading.
×
![Data URI
<!--[if lt IE 8]>
<img src=”logo.png” alt=”” />
<![endif]-->
<img class=”data-uri”
src=”data:image/gif;base64,R...](https://image.slidesharecdn.com/website-performance-091013103203-phpapp01/75/make-your-website-2-times-faster-28-2048.jpg?cb=1668667948)
![-moz-image-rendaring
img[src$=".gif"] {
image-rendering: -moz-crisp-edges;
/* Fx, (Gecko 1.9.2) */
-ms-interpolation-m...](https://image.slidesharecdn.com/website-performance-091013103203-phpapp01/75/make-your-website-2-times-faster-50-2048.jpg?cb=1668667948)
Check these out next
More Related Content
Slideshows for you (20)
Similar to Make your website 2 times faster (20)
More from Satoshi Kikuchi (17)
Recently uploaded (20)
Make your website 2 times faster
- 1. 6 10 10 Apple Store Shinsaibashi
- 2. AOL Money & Finance
- 3. AOL Shopping
- 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. Google • • • UX • Velocity09 Merissa Mayer
- 6. Google
- 7. shopzilla.com • 2.5 3.5sUP • 7 12%UP • PV 25%UP
- 8. 6 1. 2. 3. httpRequest 4. Js CSS 5. CSS 6.
- 9. •
- 10. Punyping
- 11. Punyping
- 12. Punyping 80KB
- 13. Punyping
- 14. Punyping 80KB 56KB
- 15. Js CSS
- 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. 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. http • CSS Sprite • Data URI • CSS
- 19. CSS Sprite • background-position • Http • Sprite
- 20. CSS Sprite
- 21. CSS Sprite
- 22. CSS Sprite
- 23. CSS Sprite http://ja.spritegen.website-performance.org/
- 24. CSS Sprite
- 25. CSS Sprite
- 26. Data URI data URI(RFC2397) inline image URI http IE6,7
- 27. Data URI <img class=”data-uri” src=”data:image/ png;base64,....R0lGO” alt=”” />
- 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. Webfonts
- 30. Webfont @font-face { font-family: Makiba; src: url(MakibaFont13.eot); /* IE */ src: local("Makiba"), /* webkit*/ url(MakibaFont13.ttf) format("truetype"); }
- 31. Data URI
- 32. CSS • ul li a{......} • li a{......} • a{.......}
- 33. CSS • ul li a{......} • li a{......} • a{.......}
- 34. CSS • ul li a{......} • li a{......} • a{.......}
- 35. CSS • ul#gloabal-navigation li a{display:block;} • ul#footer-navigation li a{display:block;} • .navigation-link{display:block;}
- 36. CSS
- 37. CSS • •
- 38. OOCSS
- 39. OOCSS CSS YUI Grid CSS OOCSS Grid CSS Nicole Sullivan Facebook
- 40. OOCSS
- 41. OOCSS unit line sizeXofY
- 42. OOCSS OOCSS
- 43. OOCSS
- 44. • Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -
- 45. Yslow!
- 46. W3C Link cheker
- 47. -moz-image-rendaring
- 48. -moz-image-rendaring •Firefox 3.6 •auto •optimizeQuality •optimizeSpeed •-moz-crisp-edges
- 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. -moz-image-rendaring img[src$=".gif"] { image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* IE 7+ */ }
- 51. 11 11 13 OOCSS Nicole Sullivan
