Websites On Speed

  • 3,352 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,352
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
141
Comments
0
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Sites on Speed
  • 2. About me
  • 3. About me • Tom Hughes-Croucher
  • 4. About me • Tom Hughes-Croucher • @sh1mmer
  • 5. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist
  • 6. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in
  • 7. About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in • Wrote Web Standards (W3C, BSI, etc)
  • 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. Overview
  • 10. Overview • What makes a web site slow?
  • 11. Overview • What makes a web site slow? • What can we do to make it faster?
  • 12. Overview • What makes a web site slow? • What can we do to make it faster? • What tools can help?
  • 13. Why are web sites slow? http://www.flickr.com/photos/topaz-mcnumpty/3544574591/sizes/l/
  • 14. What is a website made of?
  • 15. What is a website made of? • Content (HTML)
  • 16. What is a website made of? • Content (HTML) • Images / Flash
  • 17. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS)
  • 18. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript)
  • 19. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm
  • 20. What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm • Maybe a database, Web services, CDN
  • 21. PHP is only a part 9% 91%
  • 22. Where does the time go?
  • 23. Where does the time go? • DNS lookups & HTTP requests
  • 24. Where does the time go? • DNS lookups & HTTP requests • Building pages
  • 25. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff
  • 26. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff
  • 27. Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff • User Interaction
  • 28. It’s about perception!
  • 29. How do we speed it up?
  • 30. How do we speed it up? • DNS lookups & HTTP requests
  • 31. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections
  • 32. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages
  • 33. How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible
  • 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. 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. 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. 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. 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. 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. Fixing stuff http://www.flickr.com/photos/sharynmorrow/29351619/
  • 41. 1. Reduce DNS Lookups & connections
  • 42. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4)
  • 43. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects
  • 44. 1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=...
  • 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. 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. 1. Reduce DNS Lookups & connections
  • 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. 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. 30px 30px 0px
  • 51. 1. Reduce DNS Lookups & connections
  • 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. 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. 1. Reduce DNS Lookups & connections <Location /static> ExpiresActive On ExpiresDefault "access plus 1 year" </Location>
  • 55. 2. Return Quickly
  • 56. 2. Return Quickly • Get the first chunk of bytes out as soon as possible
  • 57. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often
  • 58. 2. Return Quickly
  • 59. 2. Return Quickly • Get the first chunk of bytes out as soon as possible • Flush often
  • 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. 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. 2. Return Quickly Cache expensive back end calls, and use a front-end cache
  • 63. 2. Return Quickly
  • 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. 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. 3. Slim down
  • 67. 3. Slim down • gzip content over the wire
  • 68. 3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)
  • 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. 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. 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. 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. 4. Restructure pages
  • 74. 4. Restructure pages • Put CSS at the top to avoid having to redraw the page later
  • 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. 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. 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. 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. 5. Cheat the DOM
  • 80. 5. Cheat the DOM • Attach events on a container rather than on each element
  • 81. 5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment
  • 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. 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. 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. 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. 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. 5. Cheat the DOM
  • 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. 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. 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. More tips
  • 92. More tips • Preload expected content
  • 93. More tips
  • 94. More tips • Preload expected content
  • 95. More tips • Preload expected content • Progressively enhance your pages
  • 96. It’s about perception!
  • 97. More tips
  • 98. More tips • Preload expected content • Progressively enhance your pages
  • 99. More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions
  • 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. More tips
  • 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. 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. YSlow
  • 105. YSlow • Firebug plugin to analyse pages for performance gotchas
  • 106. YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/
  • 107. YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/ • Follow YSlow's advice to improve page performance
  • 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. Tools http://www.flickr.com/photos/bre/552152780/sizes/l/
  • 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. 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. 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. Questions Tom Hughes-Croucher croucher@yahoo-inc.com @sh1mmer & @ydn on Twitter http://speakerrate.com/sh1mmer Rate me!