Websites On Speed

3,859 views
3,768 views

Published on

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

Published in: Technology, Design
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,859
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
149
Comments
0
Likes
17
Embeds 0
No embeds

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

    ×