Websites on Speed
Philip S Tellis
Yahoo! Inc

Percona Performance is Everything • April 22-23, 2009 • Santa
Clara, CA


$ ...
What's this talk all about?
flickr:justbecause/291874981

      Find out what makes a website slow
      Find out what to ...
Structure pages for performance
     Cheat


1Fix it - reduce lookups
flickr:swanksalot/2453794337

     Reduce the number...
1Fix it - reduce lookups
flickr:swanksalot/2453794337

Sample combo handler:


      $combo = preg_replace('/^.*?/', '', $...
Cache aggressively


1Fix it - reduce lookups
flickr:swanksalot/2453794337

    <Location /static>
       ExpiresActive On...
Don't bother your server with static content
     Cache expensive back end calls, and use a front-end cache
     Reduce Ma...
flickr:frosted_peppercorn/481102393

     gzip content over the wire
     Minify CSS and Javascript (use YUI Compressor) &...
Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)
     Avoid duplicate CSS and Javascript fi...
flickr:bluesmoon/867742899

     Put CSS at the top to avoid having to redraw the page later
     Put Javascript at the bo...
Delay event attachment
     Cache DOM elements and work on invisible elements
     Reduce iterations on DOM elements
     ...
<div>
       <div>
         <input class=quot;entryquot; name=quot;larryquot;>
         <input class=quot;entryquot; name=...
5Fix it - cheat the DOM
flickr:matthewblack/2140930591

     Attach events on a container rather than on each element
    ...
Progressively enhance your pages
      Try to send empty POST requests
      Use <link> instead of @import and avoid CSS e...
Performance is not the same as scalability, you probably need both.
      KISS


Closing notes
flickr:thetaleoflight/33620...
http://flickr.com/photos/bounder/244867196/
           http://flickr.com/photos/fabiolarebello/206950948/
           http:...
Upcoming SlideShare
Loading in...5
×

Websites On Speed

562

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Websites On Speed"

  1. 1. Websites on Speed Philip S Tellis Yahoo! Inc Percona Performance is Everything • April 22-23, 2009 • Santa Clara, CA $ whoami flickr:code_martial/1543735477 Philip Tellis geek / opensource developer yahoo @bluesmoon http://bluesmoon.info/ What's this talk all about? flickr:justbecause/291874981 Find out what makes a website slow Find out what to do to make it faster List some tools Show off pretty pictures from flickr What's this talk all about? flickr:justbecause/291874981 Find out what makes a website slow Find out what to do to make it faster List some tools Show off pretty pictures from flickr What's this talk all about? flickr:justbecause/291874981 Find out what makes a website slow Find out what to do to make it faster List some tools Show off pretty pictures from flickr
  2. 2. What's this talk all about? flickr:justbecause/291874981 Find out what makes a website slow Find out what to do to make it faster List some tools Show off pretty pictures from flickr What's this talk all about? flickr:justbecause/291874981 Find out what makes a website slow Find out what to do to make it faster List some tools Show off pretty pictures from flickr What's a website made of? flickr:bounder/244867196 Content (HTML) Images/Flash Style (CSS) Interaction (Javascript) A server farm below this Maybe a database, Web services & CDN Where does the time go? flickr:fabiolarebello/206950948 DNS lookups & HTTP requests Building pages Downloading stuff Rendering stuff User Interaction How do we fix it? flickr:joe_gray/3292909762 Reduce lookups and connections Return content as fast as possible Reduce the size of content
  3. 3. Structure pages for performance Cheat 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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
  4. 4. 1Fix it - reduce lookups flickr:swanksalot/2453794337 Sample 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(quot;/var/www/$sourcequot;); } 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains 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 1Fix it - reduce lookups flickr:swanksalot/2453794337 Reduce the number of domains Avoid redirects 301, 302, location.href=... Combine CSS and Javascript files into a single file for each type Combine decorative images into sprites
  5. 5. Cache aggressively 1Fix it - reduce lookups flickr:swanksalot/2453794337 <Location /static> ExpiresActive On ExpiresDefault quot;access plus 1 yearquot; </Location> 2Fix it - be quick on the return flickr:revdancatt/197037896 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 2Fix it - be quick on the return flickr:revdancatt/197037896 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 2Fix it - be quick on the return flickr:revdancatt/197037896 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 2Fix it - be quick on the return flickr:revdancatt/197037896 Get the first chunk of bytes out as soon as possible Flush often
  6. 6. Don't bother your server with static content Cache expensive back end calls, and use a front-end cache Reduce MaxClients in apache 2Fix it - be quick on the return flickr:revdancatt/197037896 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 2Fix it - be quick on the return flickr:revdancatt/197037896 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 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 3Fix it - slim down
  7. 7. flickr:frosted_peppercorn/481102393 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 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 3Fix it - slim down flickr:frosted_peppercorn/481102393 gzip content over the wire
  8. 8. 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 4Fix it - restructure pages flickr:bluesmoon/867742899 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 4Fix it - restructure pages flickr:bluesmoon/867742899 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 4Fix it - restructure pages flickr:bluesmoon/867742899 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 4Fix it - restructure pages flickr:bluesmoon/867742899 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 4Fix it - restructure pages
  9. 9. flickr:bluesmoon/867742899 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 4Fix it - restructure pages flickr:bluesmoon/867742899 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 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 Attach events on a container rather than on each element
  10. 10. 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 Old code:
  11. 11. <div> <div> <input class=quot;entryquot; name=quot;larryquot;> <input class=quot;entryquot; name=quot;curlyquot;> </div> <div> <input class=quot;entryquot; name=quot;moequot;> </div> </div> 5Fix it - cheat the DOM flickr:matthewblack/2140930591 New code: <ul> <li> <input class=quot;entryquot; name=quot;larryquot;> <input class=quot;entryquot; name=quot;curlyquot;> </li> <li> <input class=quot;entryquot; name=quot;moequot;> </li> </ul> 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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)
  12. 12. 5Fix it - cheat the DOM flickr:matthewblack/2140930591 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) 6More tips flickr:eagereyes/2624337393 Preload expected content Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs 6More tips flickr:eagereyes/2624337393 Preload expected content Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs 6More tips flickr:eagereyes/2624337393 Preload expected content Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs 6More tips flickr:eagereyes/2624337393 Preload expected content
  13. 13. Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs 6More tips flickr:eagereyes/2624337393 Preload expected content Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs 6More tips flickr:eagereyes/2624337393 Preload expected content Progressively enhance your pages Try to send empty POST requests Use <link> instead of @import and avoid CSS expressions Avoid 404s and reduce IFRAMEs YSlow Firebug plugin to analyse pages for performance gotchas http://developer.yahoo.com/yslow/ Follow YSlow's advice to improve page performance v2.0 coming soon Closing notes flickr:thetaleoflight/3362048052 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 Closing notes flickr:thetaleoflight/3362048052 Don't optimise prematurely. Profile first. Go for the low hanging fruit. Configuration is cheaper than redevelopment.
  14. 14. Performance is not the same as scalability, you probably need both. KISS Closing notes flickr:thetaleoflight/3362048052 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 Closing notes flickr:thetaleoflight/3362048052 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 Closing notes flickr:thetaleoflight/3362048052 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 Credits flickr:jackhynes/519904699 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 http://developer.yahoo.net/performance Photo Credits flickr:25602112@N07/2539754489 Shouts to each photographer for these most excellent CC licensed photos: http://flickr.com/photos/code_martial/1543735477/ http://www.flickr.com/photos/justbecause/291874981/
  15. 15. http://flickr.com/photos/bounder/244867196/ http://flickr.com/photos/fabiolarebello/206950948/ http://www.flickr.com/photos/joe_gray/3292909762/ http://flickr.com/photos/swanksalot/2453794337/ http://flickr.com/photos/revdancatt/197037896/ http://flickr.com/photos/frosted_peppercorn/481102393/ http://flickr.com/photos/matthewblack/2140930591/ http://flickr.com/photos/eagereyes/2624337393/ http://flickr.com/photos/thetaleoflight/3362048052/ http://flickr.com/photos/jackhynes/519904699/ http://flickr.com/photos/25602112@N07/2539754489/ Made with Eric A Meyer's S5

×