Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (11)
Destaque
Destaque (17)
Semelhante a Websites On Speed
Semelhante a Websites On Speed (20)
Último
Último (20)
Websites On Speed
- 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