Websites On Speed

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





http://flickr.com/photos/code_martial/1543735477/

http://twitter.com/bluesmoon

http://bluesmoon.info/

http://flickr.com/photos/justbecause/291874981/







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



http://flickr.com/photos/bounder/244867196/

http://flickr.com/photos/fabiolarebello/206950948/

http://flickr.com/photos/joe_gray/3292909762/

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










http://flickr.com/photos/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"); }









301, 302, location.href=...Combine CSS and Javascript files into a single file for each typeCombine decorative images into sprites





Cache aggressively


<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






Get the first chunk of bytes out as soon as possibleFlush often


http://flickr.com/photos/revdancatt/197037896/




Don'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 down



http://flickr.com/photos/frosted_peppercorn/481102393/

http://developer.yahoo.com/yui/compressor/

http://smush.it/



http://smush.it/

flickr:frosted_peppercorn/481102393









gzip content over the wire



http://smush.it/



http://smush.it/



http://smush.it/



http://smush.it/


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 pages


http://smush.it/

http://flickr.com/photos/bluesmoon/867742899/




flickr:bluesmoon/867742899




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)




Attach events on a container rather than on each element



http://flickr.com/photos/matthewblack/2140930591/

http://developer.yahoo.com/yui/profiler/




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)








Old code:









<div> <div> <input class="entry" name="larry"> <input class="entry" name="curly"> </div> <div> <input class="entry" name="moe"> </div> </div>


New code:

<ul> <li> <input class="entry" name="larry"> <input class="entry" name="curly"> </li> <li> <input class="entry" name="moe"> </li> </ul>












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






Preload expected content



http://flickr.com/photos/eagereyes/2624337393/




Progressively 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


Don't optimise prematurely. Profile first.Go for the low hanging fruit. Configuration is cheaper than redevelopment.



http://developer.yahoo.com/yslow

http://flickr.com/photos/thetaleoflight/3362048052/


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/jackhynes/519904699/

http://developer.yahoo.net/performance

http://flickr.com/photos/25602112@N07/2539754489/

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

http://flickr.com/photos/bounder/244867196/

http://flickr.com/photos/fabiolarebello/206950948/

http://www.flickr.com/photos/joe_gray/3292909762/







http://flickr.com/photos/jackhynes/519904699/

http://flickr.com/photos/25602112@N07/2539754489/

Technology

Websites On Speed