Click here to load reader
Upload
perconaperformance
View
554
Download
2
Embed Size (px)
Citation preview
Websites on SpeedPhilip S TellisYahoo! Inc
Percona Performance is Everything • April 22-23, 2009 • SantaClara, CA
$ whoamiflickr:code_martial/1543735477
Philip Tellisgeek / opensource developeryahoo@bluesmoonhttp://bluesmoon.info/
What's this talk all about?flickr:justbecause/291874981
Find out what makes a website slowFind out what to do to make it fasterList some toolsShow off pretty pictures from flickr
What's this talk all about?flickr:justbecause/291874981
Find out what makes a website slowFind out what to do to make it fasterList some toolsShow off pretty pictures from flickr
What's this talk all about?flickr:justbecause/291874981
Find out what makes a website slowFind out what to do to make it fasterList some toolsShow off pretty pictures from flickr
What's this talk all about?flickr:justbecause/291874981
Find out what makes a website slowFind out what to do to make it fasterList some toolsShow off pretty pictures from flickr
What's this talk all about?flickr:justbecause/291874981
Find out what makes a website slowFind out what to do to make it fasterList some toolsShow off pretty pictures from flickr
What's a website made of?flickr:bounder/244867196
Content (HTML)Images/FlashStyle (CSS)Interaction (Javascript)A server farm below thisMaybe a database, Web services & CDN
Where does the time go?flickr:fabiolarebello/206950948
DNS lookups & HTTP requestsBuilding pagesDownloading stuffRendering stuffUser Interaction
How do we fix it?flickr:joe_gray/3292909762
Reduce lookups and connectionsReturn content as fast as possibleReduce the size of content
Structure pages for performanceCheat
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr: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("/var/www/$source"); }
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into spritesCache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
Reduce the number of domainsAvoid redirects
301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into sprites
Cache aggressively
1Fix it - reduce lookupsflickr:swanksalot/2453794337
<Location /static> ExpiresActive On ExpiresDefault "access plus 1 year" </Location>
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush oftenDon't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush oftenDon't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush oftenDon't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush often
Don't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush oftenDon't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
2Fix it - be quick on the returnflickr:revdancatt/197037896
Get the first chunk of bytes out as soon as possibleFlush oftenDon't bother your server with static contentCache expensive back end calls, and use a front-end cacheReduce MaxClients in apache
3Fix it - slim downflickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim downflickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim down
flickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim downflickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim downflickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim downflickr:frosted_peppercorn/481102393
gzip content over the wireMinify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)Avoid duplicate CSS and Javascript filesReduce cookie sizeUse a CDNPost-load components
3Fix it - slim downflickr: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 filesReduce cookie sizeUse a CDNPost-load components
4Fix it - restructure pagesflickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
4Fix it - restructure pagesflickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
4Fix it - restructure pagesflickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
4Fix it - restructure pagesflickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
4Fix it - restructure pages
flickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
4Fix it - restructure pagesflickr:bluesmoon/867742899
Put CSS at the top to avoid having to redraw the page laterPut Javascript at the bottom so that it doesn't block renderingAvoid tables for layoutDelay loading of invisible contentReduce the number of HTML elements
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each element
Delay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Old code:
<div> <div> <input class="entry" name="larry"> <input class="entry" name="curly"> </div> <div> <input class="entry" name="moe"> </div> </div>
5Fix it - cheat the DOMflickr:matthewblack/2140930591
New code:
<ul> <li> <input class="entry" name="larry"> <input class="entry" name="curly"> </li> <li> <input class="entry" name="moe"> </li> </ul>
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
5Fix it - cheat the DOMflickr:matthewblack/2140930591
Attach events on a container rather than on each elementDelay event attachmentCache DOM elements and work on invisible elementsReduce iterations on DOM elementsUse more specific, semantically correct HTML tagsUse local copies of global variablesProfile your Javascript (use YUI Profiler)
6More tipsflickr:eagereyes/2624337393
Preload expected contentProgressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
6More tipsflickr:eagereyes/2624337393
Preload expected contentProgressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
6More tipsflickr:eagereyes/2624337393
Preload expected contentProgressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
6More tipsflickr:eagereyes/2624337393
Preload expected content
Progressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
6More tipsflickr:eagereyes/2624337393
Preload expected contentProgressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
6More tipsflickr:eagereyes/2624337393
Preload expected contentProgressively enhance your pagesTry to send empty POST requestsUse <link> instead of @import and avoid CSS expressionsAvoid 404s and reduce IFRAMEs
YSlowFirebug plugin to analyse pages for performance gotchashttp://developer.yahoo.com/yslow/Follow YSlow's advice to improve page performancev2.0 coming soon
Closing notesflickr: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 notesflickr: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 notesflickr: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 notesflickr: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 notesflickr: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
Creditsflickr: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 Creditsflickr: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/
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