Websites On Speed

Web Sites on Speed

About me

About me • Tom Hughes-Croucher

About me • Tom Hughes-Croucher • @sh1mmer

About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist

About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in

About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in • Wrote Web Standards (W3C, BSI, etc)

About me • Tom Hughes-Croucher • @sh1mmer • Yahoo! Technical Evangelist • Evangelism = stuff I believe in • Wrote Web Standards (W3C, BSI, etc) • Currently doing performance research

Overview

Overview • What makes a web site slow?

Overview • What makes a web site slow? • What can we do to make it faster?

Overview • What makes a web site slow? • What can we do to make it faster? • What tools can help?

Why are web sites slow? http://www.ﬂickr.com/photos/topaz-mcnumpty/3544574591/sizes/l/

What is a website made of?

What is a website made of? • Content (HTML)

What is a website made of? • Content (HTML) • Images / Flash

What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS)

What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript)

What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm

What is a website made of? • Content (HTML) • Images / Flash • Styles (CSS) • Interaction (JavaScript) • Server farm • Maybe a database, Web services, CDN

PHP is only a part 9% 91%

Where does the time go?

Where does the time go? • DNS lookups & HTTP requests

Where does the time go? • DNS lookups & HTTP requests • Building pages

Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff

Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff

Where does the time go? • DNS lookups & HTTP requests • Building pages • Downloading stuff • Rendering stuff • User Interaction

It’s about perception!

How do we speed it up?

How do we speed it up? • DNS lookups & HTTP requests

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff ➡ Structure pages for performance

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests connections • Building pages ➡ Return content as fast as possible • Downloading stuff ➡ Reduce the size of content • Rendering stuff ➡ Structure pages for performance • User Interaction

How do we speed it up? • DNS lookups & HTTP ➡ Reduce lookups and requests 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

Fixing stuff http://www.ﬂickr.com/photos/sharynmorrow/29351619/

1. Reduce DNS Lookups & connections

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4)

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=...

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript ﬁles into a single ﬁle for each type

Simple 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"); }

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript ﬁles into a single ﬁle for each type

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript ﬁles into a single ﬁle for each type • Combine decorative images into sprites

30px 30px 0px

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript ﬁles into a single ﬁle for each type • Combine decorative images into sprites

1. Reduce DNS Lookups & connections • Reduce the number of domains (2-4) • Avoid redirects • 301, 302, location.href=... • Combine CSS and Javascript ﬁles into a single ﬁle for each type • Combine decorative images into sprites • Cache aggressively

1. Reduce DNS Lookups & connections <Location /static> ExpiresActive On ExpiresDefault "access plus 1 year" </Location>

2. Return Quickly

2. Return Quickly • Get the ﬁrst chunk of bytes out as soon as possible

2. Return Quickly • Get the ﬁrst chunk of bytes out as soon as possible • Flush often

2. Return Quickly

2. Return Quickly • Get the ﬁrst chunk of bytes out as soon as possible • Flush often

2. Return Quickly • Get the ﬁrst chunk of bytes out as soon as possible • Flush often • Don't bother your server with static content

2. Return Quickly • Get the ﬁrst 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

2. Return Quickly Cache expensive back end calls, and use a front-end cache

2. Return Quickly

2. Return Quickly • Get the ﬁrst 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

2. Return Quickly • Get the ﬁrst 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

3. Slim down

3. Slim down • gzip content over the wire

3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it)

3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript ﬁles

3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript ﬁles • Reduce cookie size

3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript ﬁles • Reduce cookie size • Use a CDN

3. Slim down • gzip content over the wire • Minify CSS and Javascript (use YUI Compressor) & Optimise images (use smush.it) • Avoid duplicate CSS and Javascript ﬁles • Reduce cookie size • Use a CDN • Post-load components

4. Restructure pages

4. Restructure pages • Put CSS at the top to avoid having to redraw the page later

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

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

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

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

5. Cheat the DOM

5. Cheat the DOM • Attach events on a container rather than on each element

5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment

5. Cheat the DOM • Attach events on a container rather than on each element • Delay event attachment • Cache DOM elements and work on invisible elements

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

5. 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 speciﬁc, semantically correct HTML tags

Use the right tags <div> <div> <input class="entry" name="larry"> <input class="entry" name="curly"> </div> <div> <input class="entry" name="moe"> </div> </div>

Use the right tags <ul> <li> <input class="entry" name="larry"> <input class="entry" name="curly"> </li> <li> <input class="entry" name="moe"> </li> </ul>

5. Cheat the DOM

5. 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 speciﬁc, semantically correct HTML tags

5. 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 speciﬁc, semantically correct HTML tags • Use local copies of global variables

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

More tips

More tips • Preload expected content

More tips

More tips • Preload expected content

More tips • Preload expected content • Progressively enhance your pages

It’s about perception!

More tips

More tips • Preload expected content • Progressively enhance your pages

More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions

More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions • Avoid 404s and reduce IFRAMEs

More tips

More tips • Preload expected content • Progressively enhance your pages • Use <link> instead of @import and avoid CSS expressions • Avoid 404s and reduce IFRAMEs

More tips • Preload expected content • Progressively enhance your pages • 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

YSlow • Firebug plugin to analyse pages for performance gotchas • http://developer.yahoo.com/yslow/

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

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 http://www.ﬂickr.com/photos/bre/552152780/sizes/l/

Tools • YSlow: developer.yahoo.com/yslow/ • SmushIt: smushit.com • CSS Sprites: pt.spritegen.website-performance.org • YUI Proﬁler: developer.yahoo.com/yui/proﬁler/ • ShowSlow: showslow.com • Webpage Test: webpagetest.org • Page Speed: code.google.com/speed/page-speed

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

Questions Tom Hughes-Croucher croucher@yahoo-inc.com @sh1mmer & @ydn on Twitter http://speakerrate.com/sh1mmer Rate me!

http://blog.popowa.com	99
http://developer.yahoo.net	67
http://speakerrate.com	10
http://www.slideshare.net	4
http://rainydi.wordpress.com	2
http://192.168.0.2	2
http://feeds.developer.yahoo.net	1
http://www.magikokouti.gr	1
resource://brief-content	1
http://www.useseo.com	1
http://cache.yahoofs.jp	1
http://feeds.feedburner.com	1

Websites On Speed

by Tom Hughes-Croucher on Nov 28, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 190

Statistics

Websites On Speed — Presentation Transcript