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. 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. 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. 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. 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. 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. 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. 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. 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. 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. <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. 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. 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. 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. 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