Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Web Sites on Speed
About me
About me
• Tom Hughes-Croucher
About me
• Tom Hughes-Croucher
• @sh1mmer
About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
 • Evangelism = stuff I believe in
About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
 • Evangelism = stuff I believe in
• Wrote Web Sta...
About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
 • Evangelism = stuff I believe in
• Wrote Web Sta...
Overview
Overview

• What makes a web site slow?
Overview

• What makes a web site slow?
• What can we do to make it faster?
Overview

• What makes a web site slow?
• What can we do to make it faster?
• What tools can help?
Why are web
                               sites slow?




http://www.flickr.com/photos/topaz-mcnumpty/3544574591/sizes/l/
What is a website
   made of?
What is a website
       made of?
• Content (HTML)
What is a website
       made of?
• Content (HTML)
• Images / Flash
What is a website
       made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
What is a website
        made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)
What is a website
        made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)
• Server fa...
What is a website
       made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)
• Server far...
PHP is only a part
 9%     91%
Where does the
  time go?
Where does the
       time go?
• DNS lookups & HTTP requests
Where does the
       time go?
• DNS lookups & HTTP requests
• Building pages
Where does the
       time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
Where does the
       time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
• Rendering stuff
Where does the
       time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
• Rendering stuff
• User...
It’s about perception!
How do we speed it up?
How do we speed it up?
•   DNS lookups & HTTP
    requests
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
How do we speed it up?
•   DNS lookups & HTTP   ➡ Reduce lookups and
    requests               connections

•   Building ...
Fixing stuff


http://www.flickr.com/photos/sharynmorrow/29351619/
1. Reduce DNS
Lookups & connections
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
 • 301, 302, location.href=...
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
 • 301, 302, location.href=...
...
Simple Combo Handler
$combo = preg_replace('/^.*?/', '',
$_SERVER['REQUEST_URI']);

$sources = split('&', $combo);

header...
1. Reduce DNS
Lookups & connections
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
 • 301, 302, location.href=...
...
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
 • 301, 302, location.href=...
...
30px




30px

       0px
1. Reduce DNS
Lookups & connections
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
  • 301, 302, location.href=......
1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
  • 301, 302, location.href=......
1. Reduce DNS
 Lookups & connections

<Location /static>
   ExpiresActive On
   ExpiresDefault     "access plus 1 year"
</...
2. Return Quickly
2. Return Quickly


• Get the first chunk of bytes out as soon as
  possible
2. Return Quickly


• Get the first chunk of bytes out as soon as
  possible
• Flush often
2. Return Quickly
2. Return Quickly
• Get the first chunk of bytes out as soon as
  possible
• Flush often
2. Return Quickly
• Get the first chunk of bytes out as soon as
  possible
• Flush often
• Don't bother your server with st...
2. Return Quickly
• Get the first chunk of bytes out as soon as
  possible
• Flush often
• Don't bother your server with st...
2. Return Quickly
Cache expensive back end calls, and use a front-end cache
2. Return Quickly
2. Return Quickly
• Get the first chunk of bytes out as soon as
  possible
• Flush often
• Don't bother your server with st...
2. Return Quickly
• Get the first chunk of bytes out as soon as
  possible
• Flush often
• Don't bother your server with st...
3. Slim down
3. Slim down
•   gzip content over the wire
3. Slim down
•   gzip content over the wire
•   Minify CSS and Javascript (use YUI
    Compressor) & Optimise images (use ...
3. Slim down
•   gzip content over the wire
•   Minify CSS and Javascript (use YUI
    Compressor) & Optimise images (use ...
3. Slim down
•   gzip content over the wire
•   Minify CSS and Javascript (use YUI
    Compressor) & Optimise images (use ...
3. Slim down
•   gzip content over the wire
•   Minify CSS and Javascript (use YUI
    Compressor) & Optimise images (use ...
3. Slim down
•   gzip content over the wire
•   Minify CSS and Javascript (use YUI
    Compressor) & Optimise images (use ...
4. Restructure pages
4. Restructure pages
• Put CSS at the top to avoid having to
  redraw the page later
4. Restructure pages
• Put CSS at the top to avoid having to
  redraw the page later
• Put Javascript at the bottom so tha...
4. Restructure pages
• Put CSS at the top to avoid having to
  redraw the page later
• Put Javascript at the bottom so tha...
4. Restructure pages
• Put CSS at the top to avoid having to
  redraw the page later
• Put Javascript at the bottom so tha...
4. Restructure pages
• Put CSS at the top to avoid having to
  redraw the page later
• Put Javascript at the bottom so tha...
5. Cheat the DOM
5. Cheat the DOM
•   Attach events on a container rather than on
    each element
5. Cheat the DOM
•   Attach events on a container rather than on
    each element
•   Delay event attachment
5. Cheat the DOM
•   Attach events on a container rather than on
    each element
•   Delay event attachment
•   Cache DOM...
5. Cheat the DOM
•   Attach events on a container rather than on
    each element
•   Delay event attachment
•   Cache DOM...
5. Cheat the DOM
•   Attach events on a container rather than on
    each element
•   Delay event attachment
•   Cache DOM...
Use the right tags

<div>
   <div>
       <input class="entry" name="larry">
       <input class="entry" name="curly">
   ...
Use the right tags

<ul>
   <li>
      <input class="entry" name="larry">
      <input class="entry" name="curly">
   </li...
5. Cheat the DOM
5. Cheat the DOM
•   Attach events on a container rather than on each
    element
•   Delay event attachment
•   Cache DOM...
5. Cheat the DOM
•   Attach events on a container rather than on each
    element
•   Delay event attachment
•   Cache DOM...
5. Cheat the DOM
•   Attach events on a container rather than on each
    element
•   Delay event attachment
•   Cache DOM...
More tips
More tips


• Preload expected content
More tips
More tips


• Preload expected content
More tips


• Preload expected content
• Progressively enhance your pages
It’s about perception!
More tips
More tips

• Preload expected content
• Progressively enhance your pages
More tips

• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
  CSS e...
More tips

• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
  CSS e...
More tips
More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
  CSS ex...
More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
  CSS ex...
YSlow
YSlow
• Firebug plugin to analyse pages for
  performance gotchas
YSlow
• Firebug plugin to analyse pages for
  performance gotchas
• http://developer.yahoo.com/yslow/
YSlow
• Firebug plugin to analyse pages for
  performance gotchas
• http://developer.yahoo.com/yslow/
• Follow YSlow's adv...
YSlow
• Firebug plugin to analyse pages for
  performance gotchas
• http://developer.yahoo.com/yslow/
• Follow YSlow's adv...
Tools


http://www.flickr.com/photos/bre/552152780/sizes/l/
Tools
•   YSlow: developer.yahoo.com/yslow/
•   SmushIt: smushit.com
•   CSS Sprites: pt.spritegen.website-performance.org...
Conclusion
• Don't optimise prematurely. Profile first.
• Go for the low hanging fruit. Configuration
  is cheaper than redev...
Credits
•   The following people were directly or indirectly
    involved in research leading to this content:
    •   Sto...
Questions
            Tom Hughes-Croucher
           croucher@yahoo-inc.com
        @sh1mmer & @ydn on Twitter



http://s...
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Websites On Speed
Próxima SlideShare
Cargando en…5
×

Websites On Speed

4.271 visualizaciones

Publicado el

How to make your web sites perform better. Presented at the PHP Conference Brazil.

Publicado en: Tecnología, Diseño
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Websites On Speed

  1. 1. Web Sites on Speed
  2. 2. About me
  3. 3. About me • Tom Hughes-Croucher
  4. 4. About me • Tom Hughes-Croucher • @sh1mmer
  5. 5. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist
  6. 6. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in
  7. 7. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in • Wrote Web Standards (W3C, BSI, etc)
  8. 8. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in • Wrote Web Standards (W3C, BSI, etc) • Currently doing performance research
  9. 9. Overview
  10. 10. Overview • What makes a web site slow?
  11. 11. Overview • What makes a web site slow? • What can we do to make it faster?
  12. 12. Overview • What makes a web site slow? • What can we do to make it faster? • What tools can help?
  13. 13. Why are web sites slow? http://www.flickr.com/photos/topaz-mcnumpty/3544574591/sizes/l/
  14. 14. What is a website made of?
  15. 15. What is a website made of? • Content (HTML)
  16. 16. What is a website made of? • Content (HTML) • Images / Flash
  17. 17. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS)
  18. 18. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript)
  19. 19. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm
  20. 20. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm • Maybe a database, Web services, CDN
  21. 21. PHP is only a part 9% 91%
  22. 22. Where does the time go?
  23. 23. Where does the time go? • DNS lookups & HTTP requests
  24. 24. Where does the time go? • DNS lookups & HTTP requests • Building pages
  25. 25. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff
  26. 26. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff
  27. 27. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff • User Interaction
  28. 28. It’s about perception!
  29. 29. How do we speed it up?
  30. 30. How do we speed it up? • DNS lookups & HTTP requests
  31. 31. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections
  32. 32. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages
  33. 33. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible
  34. 34. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff
  35. 35. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content
  36. 36. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff
  37. 37. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff ➡ Structure pages for performance
  38. 38. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff ➡ Structure pages for performance • User Interaction
  39. 39. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff ➡ Structure pages for performance • User Interaction ➡ Cheat
  40. 40. Fixing stuff http://www.flickr.com/photos/sharynmorrow/29351619/
  41. 41. 1. Reduce DNS Lookups & connections
  42. 42. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4)
  43. 43. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects
  44. 44. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=...
  45. 45. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript files into a single file for each type
  46. 46. Simple Combo Handler $combo = preg_replace('/^.*?/', '', $_SERVER['REQUEST_URI']); $sources = split('&', $combo); header('Content-type: text/javascript'); foreach($sources as $source) { // TODO: Verify that $source is safe and exists include("/var/www/$source"); }
  47. 47. 1. Reduce DNS Lookups & connections
  48. 48. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript files into a single file for each type
  49. 49. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript files into a single file for each type • Combine decorative images into sprites
  50. 50. 30px 30px 0px
  51. 51. 1. Reduce DNS Lookups & connections
  52. 52. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript files into a single file for each type • Combine decorative images into sprites
  53. 53. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript files into a single file for each type • Combine decorative images into sprites • Cache aggressively
  54. 54. 1. Reduce DNS Lookups & connections <Location /static> ExpiresActive On ExpiresDefault "access plus 1 year" </Location>
  55. 55. 2. Return Quickly
  56. 56. 2. Return Quickly • Get the first chunk of bytes out as soon as possible
  57. 57. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often
  58. 58. 2. Return Quickly
  59. 59. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often
  60. 60. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often • Don't bother your server with static content
  61. 61. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often • Don't bother your server with static content • Cache expensive back end calls, and use a front-end cache
  62. 62. 2. Return Quickly Cache expensive back end calls, and use a front-end cache
  63. 63. 2. Return Quickly
  64. 64. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often • Don't bother your server with static content • Cache expensive back end calls, and use a front-end cache
  65. 65. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often • Don't bother your server with static content • Cache expensive back end calls, and use a front-end cache • Reduce MaxClients in apache
  66. 66. 3. Slim down
  67. 67. 3. Slim down • gzip content over the wire
  68. 68. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)
  69. 69. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript files
  70. 70. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript files • Reduce cookie size
  71. 71. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript files • Reduce cookie size • Use a CDN
  72. 72. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript files • Reduce cookie size • Use a CDN • Post-load components
  73. 73. 4. Restructure pages
  74. 74. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later
  75. 75. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later • Put Javascript at the bottom so that it doesn't block rendering
  76. 76. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later • Put Javascript at the bottom so that it doesn't block rendering • Avoid tables for layout
  77. 77. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later • Put Javascript at the bottom so that it doesn't block rendering • Avoid tables for layout • Delay loading of invisible content
  78. 78. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later • Put Javascript at the bottom so that it doesn't block rendering • Avoid tables for layout • Delay loading of invisible content • Reduce the number of HTML elements
  79. 79. 5. Cheat the DOM
  80. 80. 5. Cheat the DOM • Attach events on a container rather than on each element
  81. 81. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment
  82. 82. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements
  83. 83. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements • Reduce iterations on DOM elements
  84. 84. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements • Reduce iterations on DOM elements • Use more specific, semantically correct HTML tags
  85. 85. Use the right tags <div> <div> <input class="entry" name="larry"> <input class="entry" name="curly"> </div> <div> <input class="entry" name="moe"> </div> </div>
  86. 86. Use the right tags <ul> <li> <input class="entry" name="larry"> <input class="entry" name="curly"> </li> <li> <input class="entry" name="moe"> </li> </ul>
  87. 87. 5. Cheat the DOM
  88. 88. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements • Reduce iterations on DOM elements • Use more specific, semantically correct HTML tags
  89. 89. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements • Reduce iterations on DOM elements • Use more specific, semantically correct HTML tags • Use local copies of global variables
  90. 90. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements • Reduce iterations on DOM elements • Use more specific, semantically correct HTML tags • Use local copies of global variables • Profile your Javascript (use YUI Profiler)
  91. 91. More tips
  92. 92. More tips • Preload expected content
  93. 93. More tips
  94. 94. More tips • Preload expected content
  95. 95. More tips • Preload expected content • Progressively enhance your pages
  96. 96. It’s about perception!
  97. 97. More tips
  98. 98. More tips • Preload expected content • Progressively enhance your pages
  99. 99. More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions
  100. 100. More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions • Avoid 404s and reduce IFRAMEs
  101. 101. More tips
  102. 102. More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions • Avoid 404s and reduce IFRAMEs
  103. 103. More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions • Avoid 404s and reduce IFRAMEs • Turn off .htaccess
  104. 104. YSlow
  105. 105. YSlow • Firebug plugin to analyse pages for performance gotchas
  106. 106. YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/
  107. 107. YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/ • Follow YSlow's advice to improve page performance
  108. 108. YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/ • Follow YSlow's advice to improve page performance • Try Sergey Chernyshev's ShowSlow to automate YSlow usage
  109. 109. Tools http://www.flickr.com/photos/bre/552152780/sizes/l/
  110. 110. Tools • YSlow: developer.yahoo.com/yslow/ • SmushIt: smushit.com • CSS Sprites: pt.spritegen.website-performance.org • YUI Profiler: developer.yahoo.com/yui/profiler/ • ShowSlow: showslow.com • Webpage Test: webpagetest.org • Page Speed: code.google.com/speed/page-speed
  111. 111. Conclusion • Don't optimise prematurely. Profile first. • Go for the low hanging fruit. Configuration is cheaper than redevelopment. • Performance is not the same as scalability, you probably need both. • KISS
  112. 112. Credits • The following people were directly or indirectly involved in research leading to this content: • Stoyan Stefanov, Nicole Sullivan, Tenni Theurer, Wayne Shea, • Julien Lecompte, Iain Lamb, Philip Tellis, Subramanyan Murali, • Nicholas Zakas, Jimmy Byrum, Steve Souders • http://developer.yahoo.net/performance
  113. 113. Questions Tom Hughes-Croucher croucher@yahoo-inc.com @sh1mmer & @ydn on Twitter http://speakerrate.com/sh1mmer Rate me!

×