6
10   10   Apple Store Shinsaibashi
AOL Money & Finance
AOL Shopping
Bing

50ms
200ms                          -0.3%   -0.4%   500
500ms          -0.6%   -1.2%   -1.0%   -0.9%   1200
1000ms -...
Google
•
•
• UX
•
          Velocity09 Merissa Mayer
Google
shopzilla.com

• 2.5 3.5sUP
•              7 12%UP

• PV 25%UP
6

1.

2.

3. httpRequest

4. Js    CSS

5. CSS

6.
•
Punyping
Punyping
Punyping




 80KB
Punyping
Punyping


           80KB




           56KB
Js CSS
Js CSS

                                                     300ms


<head>
<link rel="stylesheet" type="text/css" href="s...
Js CSS


                                                  200ms

<head>
<link rel="stylesheet" type="text/css" href="styl...
http


• CSS Sprite
• Data URI
• CSS
CSS Sprite

• background-position
• Http
•                       Sprite
CSS Sprite
CSS Sprite
CSS Sprite
CSS Sprite




http://ja.spritegen.website-performance.org/
CSS Sprite
CSS Sprite
Data URI

data           URI(RFC2397)

inline image
URI

http

IE6,7
Data URI



<img class=”data-uri”
src=”data:image/
png;base64,....R0lGO”
alt=”” />
Data URI


<!--[if lt IE 8]>
<img src=”logo.png” alt=”” />
<![endif]-->
<img class=”data-uri”
src=”data:image/gif;base64,R...
Webfonts
Webfont

@font-face {
    font-family: Makiba;
    src: url(MakibaFont13.eot);     /* IE */
    src: local("Makiba"),   /*...
Data URI
CSS


• ul li a{......}
• li a{......}
• a{.......}
CSS


• ul li a{......}
• li a{......}
• a{.......}
CSS


• ul li a{......}
• li a{......}
• a{.......}
CSS


• ul#gloabal-navigation li a{display:block;}
• ul#footer-navigation li a{display:block;}
• .navigation-link{display:...
CSS
CSS



•
•
OOCSS
OOCSS



           CSS


YUI   Grid CSS          OOCSS
Grid CSS
Nicole Sullivan   Facebook
OOCSS
OOCSS

unit
line
sizeXofY
OOCSS



OOCSS
OOCSS
• Yslow ! - Firebug plugin
• Google Page Speed - Firebug plugin
• MS Fiddler -
• AOL modsconcat - Apach
• W3C linkchecker -
Yslow!
W3C Link cheker
-moz-image-rendaring
-moz-image-rendaring


•Firefox 3.6
•auto
•optimizeQuality
•optimizeSpeed
•-moz-crisp-edges
-moz-image-rendaring
  img {
       image-rendering: optimizeSpeed;
/* Firefox,               (Gecko 1.9.2) */
       -ms-...
-moz-image-rendaring


  img[src$=".gif"] {
image-rendering: -moz-crisp-edges;
/* Fx, (Gecko 1.9.2) */
-ms-interpolation-m...
11   11   13
OOCSS        Nicole Sullivan
Make your website 2 times faster
Make your website 2 times faster
Make your website 2 times faster
Make your website 2 times faster
Make your website 2 times faster
Make your website 2 times faster
Upcoming SlideShare
Loading in...5
×

Make your website 2 times faster

1,614

Published on

Web Directions East 09 Express. Web site performace slides

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,614
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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

    ×