Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Websites On Speed

4,260 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

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!

×