Websites on Speed

Philip S Tellis

Yahoo! Inc

Yahoo!7 Open Session • May 25, 2009 • Sydney, NSW, Australia

$ whoami

flickr:code_martial/1543735477

• Philip Tellis
• geek / opensource developer
• yahoo
• @bluesmoon
• http://bluesmoon.info/

What's this talk all about?

flickr:justbecause/291874981

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

What's a website made of?

...

What's a website made of?

• Content (HTML)
• Images/Flash
• Style (CSS)
• Interaction (Javascript)
• A server farm below this
• Maybe a database, Web services & CDN

Where does the time go?

• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
• Rendering stuff
• User Interaction

How do we speed it up?

• DNS lookups & HTTP requests » Reduce lookups and connections
• Building pages » Return content as fast as possible
• Downloading stuff » Reduce the size of content
• Rendering stuff » Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• DNS lookups & HTTP requests » Reduce lookups and connections
• Building pages » Return content as fast as possible
• Downloading stuff » Reduce the size of content
• Rendering stuff » Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• Reduce lookups and connections
• Building pages » Return content as fast as possible
• Downloading stuff » Reduce the size of content
• Rendering stuff » Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• Reduce lookups and connections
• Return content as fast as possible
• Downloading stuff » Reduce the size of content
• Rendering stuff » Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• Reduce lookups and connections
• Return content as fast as possible
• Reduce the size of content
• Rendering stuff » Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• Reduce lookups and connections
• Return content as fast as possible
• Reduce the size of content
• Structure pages for performance
• User Interaction » Cheat

How do we speed it up?

• Reduce lookups and connections
• Return content as fast as possible
• Reduce the size of content
• Structure pages for performance
• Cheat

1Fix it - reduce lookups & connections

flickr:swanksalot/2453794337

1Fix it - reduce lookups & connections

flickr:swanksalot/2453794337

• Reduce the number of domains (2-4)
• 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 & connections

flickr:swanksalot/2453794337

• Reduce the number of domains (2-4)
• 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 & connections

flickr:swanksalot/2453794337

• Reduce the number of domains (2-4)
• 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 & connections

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 lookups & connections

• Reduce the number of domains (2-4)
• 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 & connections

• Reduce the number of domains (2-4)
• 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 & connections

• Reduce the number of domains (2-4)
• 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 & connections

   <Location /static>
      ExpiresActive On
      ExpiresDefault    "access plus 1 year"
   </Location>

1Fix it - reduce lookups & connections

• Reduce the number of domains (2-4)
• 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

2Fix it - be quick on the return

flickr:revdancatt/197037896

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

• Cache expensive back end calls, and use a front-end cache

2Fix it - be quick on the return

• 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

• 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

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

• 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

• 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

• 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

• 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

4Fix it - restructure pages

flickr:bluesmoon/867742899

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

• 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

• 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

• 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

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

• 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

• 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

• 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

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 DOM

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 DOM

• 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

• 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

• 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

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
• Turn off .htaccess

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
• Turn off .htaccess

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
• Turn off .htaccess

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
• Turn off .htaccess

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
• Turn off .htaccess

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
• Turn off .htaccess

YSlow

• Firebug plugin to analyse pages for performance gotchas
• http://developer.yahoo.com/yslow/
• Follow YSlow's advice to improve page performance
• Try Sergey Chernyshev's ShowSlow to automate YSlow usage

Tools

flickr:jeffwerner/329401643

• YSlow: developer.yahoo.com/yslow/
• SmushIt: smushit.com
• CSS Sprites: csssprites.com
• YUI Profiler: developer.yahoo.com/yui/profiler/
• ShowSlow: showslow.com
• Webpage Test: webpagetest.org

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

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, Steve Souders
• 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/
  • 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/jeffwerner/329401643/
  • http://flickr.com/photos/thetaleoflight/3362048052/
  • http://flickr.com/photos/jackhynes/519904699/
  • http://flickr.com/photos/25602112@N07/2539754489/

Thank you