Make your website 2 times faster

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    1 Favorite

    Make your website 2 times faster - Presentation Transcript

    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. Punyping
    10. Punyping
    11. Punyping 80KB
    12. Punyping
    13. Punyping 80KB 56KB
    14. Js CSS
    15. 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>
    16. 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>
    17. http • CSS Sprite • Data URI • CSS
    18. CSS Sprite • background-position • Http • Sprite
    19. CSS Sprite
    20. CSS Sprite
    21. CSS Sprite
    22. CSS Sprite http://ja.spritegen.website-performance.org/
    23. CSS Sprite
    24. CSS Sprite
    25. Data URI data URI(RFC2397) inline image URI http IE6,7
    26. Data URI <img class=”data-uri” src=”data:image/ png;base64,....R0lGO” alt=”” />
    27. Data URI <!--[if lt IE 8]> <img src=”logo.png” alt=”” /> <![endif]--> <img class=”data-uri” src=”data:image/gif;base64,R0lGO” alt=”” />
    28. Webfonts
    29. Webfont @font-face { font-family: Makiba; src: url(MakibaFont13.eot); /* IE */ src: local("Makiba"), /* webkit*/ url(MakibaFont13.ttf) format("truetype"); }
    30. Data URI
    31. CSS • ul li a{......} • li a{......} • a{.......}
    32. CSS • ul li a{......} • li a{......} • a{.......}
    33. CSS • ul li a{......} • li a{......} • a{.......}
    34. CSS • ul#gloabal-navigation li a{display:block;} • ul#footer-navigation li a{display:block;} • .navigation-link{display:block;}
    35. CSS
    36. CSS • •
    37. OOCSS
    38. OOCSS CSS YUI Grid CSS OOCSS Grid CSS Nicole Sullivan Facebook
    39. OOCSS
    40. OOCSS unit line sizeXofY
    41. OOCSS OOCSS
    42. OOCSS
    43. • Yslow ! - Firebug plugin • Google Page Speed - Firebug plugin • MS Fiddler - • AOL modsconcat - Apach • W3C linkchecker -
    44. Yslow!
    45. W3C Link cheker
    46. -moz-image-rendaring
    47. -moz-image-rendaring •Firefox 3.6 •auto •optimizeQuality •optimizeSpeed •-moz-crisp-edges
    48. -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
    49. -moz-image-rendaring img[src$=".gif"] { image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ -ms-interpolation-mode: nearest- neighbor; /* IE 7+ */ }
    50. 11 11 13 OOCSS Nicole Sullivan
    SlideShare Zeitgeist 2009

    + satoshi kikuchisatoshi kikuchi Nominate

    custom

    76 views, 1 favs, 0 embeds more stats

    Web Directions East 09 Express. Web site performace more

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 76
      • 76 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories