Fronteers 20091105 (1)

65
fast by default http://stevesouders.com/docs/fronteers-20091105.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Transcript of Fronteers 20091105 (1)

Page 1: Fronteers 20091105 (1)

fast

by

defaulthttp://stevesouders.com/docs/fronteers-20091105.pptx

Disclaimer: This content does not necessarily reflect the opinions of my employer.

Page 2: Fronteers 20091105 (1)
Page 3: Fronteers 20091105 (1)
Page 4: Fronteers 20091105 (1)

introduction 4

Progressive Rendering 7

Progressive Enhancement 5

Make fewer HTTP requests 9

Use a CDN 7

Add an Expires header 8

Gzip components 9

Put stylesheets at the top 6

Put scripts at the bottom 7

Avoid CSS expressions 4

Make JS and CSS external 5

Reduce DNS lookups 9

Minify JS 4

Avoid redirects 9

Remove duplicate scripts 2

Configure ETags 8

Make AJAX cacheable 6

Splitting the initial payload 3

Loading scripts without blocking 9

Coupling asynchronous scripts 7

Positioning inline scripts 6

Sharding dominant domains 5

Flushing the document early 8

Using iframes sparingly 4

Simplifying CSS Selectors 9

Understanding Ajax performance 5

Creating responsive web apps 7

Writing efficient JavaScript 9

Scaling with Comet 8

Going beyond gzipping 7

Optimizing images 9

New Async Techniques 3

YSlow 2

Page Speed 2

Performance & the Bottom Line 5

Fast By Default 6

Stanford CS193H 4

Don't use @import 4

F5 & XHR 5

SpriteMe 3

Browserscope 4

HTTP Archive Format 2

@font-face Performance 2

SpeedGeeks 2

Velocity OLC 2

Firebug Net Panel 4

Takeaways 1

Thank You! 0

introduction 4

Progressive Rendering 7

Progressive Enhancement 5

Make fewer HTTP requests 9

Use a CDN 7

Add an Expires header 8

Gzip components 9

Put stylesheets at the top 6

Put scripts at the bottom 7

Avoid CSS expressions 4

Make JS and CSS external 5

Reduce DNS lookups 9

Minify JS 4

Avoid redirects 9

Remove duplicate scripts 2

Configure ETags 8

Make AJAX cacheable 6

Splitting the initial payload 3

Loading scripts without blocking 9

Coupling asynchronous scripts 7

Positioning inline scripts 6

Sharding dominant domains 5

Flushing the document early 8

Using iframes sparingly 4

introduction 4

Progressive Rendering 7

Progressive Enhancement 5

Make fewer HTTP requests 9

Use a CDN 7

Add an Expires header 8

Gzip components 9

Put stylesheets at the top 6

Put scripts at the bottom 7

Avoid CSS expressions 4

Make JS and CSS external 5

Reduce DNS lookups 9

Minify JS 4

Avoid redirects 9

Remove duplicate scripts 2

Configure ETags 8

Make AJAX cacheable 6

Splitting the initial payload 3

Loading scripts without blocking 9

Coupling asynchronous scripts 7

Positioning inline scripts 6

Sharding dominant domains 5

Flushing the document early 8

Using iframes sparingly 4

Simplifying CSS Selectors 9

Understanding Ajax performance 5

Creating responsive web apps 7

Writing efficient JavaScript 9

Scaling with Comet 8

Going beyond gzipping 7

Optimizing images 9

New Async Techniques 3

YSlow 2

Page Speed 2

Performance & the Bottom Line 5

Fast By Default 6

Stanford CS193H 4

Don't use @import 4

F5 & XHR 5

SpriteMe 3

Browserscope 4

HTTP Archive Format 2

@font-face Performance 2

SpeedGeeks 2

Velocity OLC 2

Firebug Net Panel 4

Takeaways 1

Thank You! 0

Simplifying CSS Selectors 9

Understanding Ajax performance 5

Creating responsive web apps 7

Writing efficient JavaScript 9

Scaling with Comet 8

Going beyond gzipping 7

Optimizing images 9

New Async Techniques 3

YSlow 2

Page Speed 2

Performance & the Bottom Line 5

Fast By Default 6

Stanford CS193H 4

Don't use @import 4

F5 & XHR 5

SpriteMe 3

Browserscope 4

HTTP Archive Format 2

@font-face Performance 2

SpeedGeeks 2

Velocity OLC 2

Firebug Net Panel 4

Takeaways 1

Thank You! 0

2561637960

Page 5: Fronteers 20091105 (1)

GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

SproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval

Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523

Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation

Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709

Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632

Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business

Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx

Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business

SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster

HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/

@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

Page 6: Fronteers 20091105 (1)
Page 7: Fronteers 20091105 (1)

17% 83%

iGoogle, primed cache

the importance of frontend performance

9% 91%

iGoogle, empty cache

Page 8: Fronteers 20091105 (1)

14 RULES

1. MAKE FEWER HTTP REQUESTS

2. USE A CDN

3. ADD AN EXPIRES HEADER

4. GZIP COMPONENTS

5. PUT STYLESHEETS AT THE TOP

6. PUT SCRIPTS AT THE BOTTOM

7. AVOID CSS EXPRESSIONS

8. MAKE JS AND CSS EXTERNAL

9. REDUCE DNS LOOKUPS

10.MINIFY JS

11.AVOID REDIRECTS

12.REMOVE DUPLICATE SCRIPTS

13.CONFIGURE ETAGS

14.MAKE AJAX CACHEABLE

Page 9: Fronteers 20091105 (1)

Even Faster Web SitesSplitting the initial payload

Loading scripts without blocking

Coupling asynchronous scripts

Positioning inline scripts

Sharding dominant domains

Flushing the document early

Using iframes sparingly

Simplifying CSS Selectors

Understanding Ajax performance..........Doug Crockford

Creating responsive web apps............Ben Galbraith, Dion Almaer

Writing efficient JavaScript.............Nicholas Zakas

Scaling with Comet.....................Dylan Schiemann

Going beyond gzipping...............Tony Gentilcore

Optimizing images...................Stoyan Stefanov, Nicole Sullivan

Page 10: Fronteers 20091105 (1)

What makes sites feel slow

?

Page 11: Fronteers 20091105 (1)

AOL

Page 12: Fronteers 20091105 (1)

Twitter

Page 13: Fronteers 20091105 (1)

Best Buy

Page 14: Fronteers 20091105 (1)

CNN

Page 15: Fronteers 20091105 (1)

(lack of)

Progressive Rendering

Page 17: Fronteers 20091105 (1)

WebPagetest.org

VA, UK, NZ

IE7, IE8

Dial, DSL, FIOS

empty, empty & primed

quad core

Pat Meenan (AOL)

Page 19: Fronteers 20091105 (1)

Shopping

Page 20: Fronteers 20091105 (1)

Sports

Page 21: Fronteers 20091105 (1)

Progressive Enhancement

deliver HTML

defer JS

avoid DOM

decorate later

Page 22: Fronteers 20091105 (1)

Progressive Enhancement

Progressive Rendering

Page 23: Fronteers 20091105 (1)

AOLeBayFacebookMySpaceWikipediaYahoo!

Why focus on JavaScript?

YouTube

Page 24: Fronteers 20091105 (1)

scripts block

<script src="A.js"> blocks parallel downloads and rendering

7 secs: IE 8, FF 3.5, Chr 3, Saf 4

9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

Page 25: Fronteers 20091105 (1)

JavaScript

Functions Executed before onload

www.aol.com 115K 30%

www.ebay.com 183K 44%

www.facebook.com 1088K 9%

www.google.com/search

15K 45%

search.live.com/results

17K 24%

www.msn.com 131K 31%

www.myspace.com 297K 18%

en.wikipedia.org/wiki 114K 32%

www.yahoo.com 321K 13%

www.youtube.com 240K 18%

26% avg252K avg

initial payload and execution

Page 26: Fronteers 20091105 (1)

splitting the initial payload

split your JavaScript between what's needed to render the page and

everything else

defer "everything else"

split manually (Page Speed), automatically (Microsoft Doloto)

load scripts without blocking – how?

Page 27: Fronteers 20091105 (1)

MSNScripts and other resources downloaded in parallel! How? Secret sauce?!

var p=

g.getElementsByTagName("HEAD")[0];

var c=g.createElement("script");

c.type="text/javascript";

c.onreadystatechange=n;

c.onerror=c.onload=k;

c.src=e;

p.appendChild(c)

MSN.com: parallel scripts

Page 28: Fronteers 20091105 (1)

Loading Scripts Without Blocking

XHR Eval

XHR Injection

Script in Iframe

Script DOM Element

Script Defer

document.write Script Tag

Page 29: Fronteers 20091105 (1)

XHR Eval

script & page must be same domain

massage script?

var xhrObj = getXHRObject();

xhrObj.onreadystatechange =

function() {

if ( xhrObj.readyState != 4 ) return;

eval(xhrObj.responseText);

};

xhrObj.open('GET', 'A.js', true);

xhrObj.send('');

Page 30: Fronteers 20091105 (1)

Script DOM Elementvar se = document.createElement('script');

se.src = 'http://anydomain.com/A.js';

document.getElementsByTagName('head')

[0].appendChild(se);

script & page domains can differ

no need to massage JavaScript

may not preserve execution order

Page 31: Fronteers 20091105 (1)

GMail Mobile<script type="text/javascript">

/*

var ...

*/

</script>

get script DOM element's text

remove comments

eval() when invoked

inline or iframe

awesome for prefetching JS that might (not) be needed

Page 32: Fronteers 20091105 (1)

SproutCorevar module1 = "...";

var module2 = "...";

eval() modules as needed

2nd

fastest downloading

2nd

fastest loading symbols

best alternative

Page 33: Fronteers 20091105 (1)
Page 34: Fronteers 20091105 (1)
Page 35: Fronteers 20091105 (1)

Bothcombine scripts

combine stylesheets

add an Expires header

gzip responses

put stylesheets at the top

put scripts at the bottom

avoid CSS expressions

make JS and CSS external

reduce DNS lookups

minify JS and CSS

avoid redirects

remove duplicate scripts

make Ajax cacheable

reduce cookie size

use cookie-free domains

don't scale images

YSlowuse CSS sprites

use a CDN

configure ETags

use GET for Ajax requests

reduce # of DOM elements

no 404s

avoid image filters

optimize faviconPage Speeddefer loading JS

remove unused CSS

use efficient CSS selectors

optimize images

optimize order of CSS & JS

shard domains

leverage proxy caching

Page 36: Fronteers 20091105 (1)
Page 37: Fronteers 20091105 (1)
Page 38: Fronteers 20091105 (1)
Page 39: Fronteers 20091105 (1)

Google

+ 0.4 sec

searches 0.6%

Page 40: Fronteers 20091105 (1)

Yahoo!

+ 0.4 sec

traffic 5-9%

Page 41: Fronteers 20091105 (1)

Bing

+2 sec

revenue 4.3%

Page 42: Fronteers 20091105 (1)

Shopzilla

-5 sec

revenue

12%

hw 50%

Page 43: Fronteers 20091105 (1)

Netflix

outbound bandwidth

43%

Page 44: Fronteers 20091105 (1)
Page 45: Fronteers 20091105 (1)

fast performance =

better user experience

more traffic

more revenue

reduced costs

Page 46: Fronteers 20091105 (1)

so...

why don't more people do it?

Page 47: Fronteers 20091105 (1)

it's

too

hard!

Page 48: Fronteers 20091105 (1)
Page 49: Fronteers 20091105 (1)

"the hard is what makes it great""if it wasn't hard everyone would

do it"

Page 50: Fronteers 20091105 (1)

this year's theme:

Fast by Default

Page 51: Fronteers 20091105 (1)

Aptimize WAX

concatenate scripts

concatenate stylesheets

sprites, data: URIs

far future Expires

minify JS and CSS

automatically in real time

Page 52: Fronteers 20091105 (1)

WAX on:

http://sharepoint.microsoft.com

# requests empty: 96 35

# requests primed: 50 9

scripts 7, stylesheets 12, images 25

pages faster: 46-64% empty, 15-53% primed

Page 53: Fronteers 20091105 (1)

Strangeloop Networks

"typical ecommerce site"

pages per visit: 11 16

time on site: 24 30 mins

conversions: 16%

order value: 5.5%

Page 54: Fronteers 20091105 (1)

Rails

far future Expires

concatenate scripts

domain sharding

configure ETags

in pipeline: async scripts, spriting, minification,

flushing

Page 55: Fronteers 20091105 (1)

SproutCore

concatenate scripts

concatenate stylesheets

versioning (future Expires)

stylesheets at the top

scripts at the bottom

minify JS & CSS

remove dupe scripts

Page 56: Fronteers 20091105 (1)

news

Page 57: Fronteers 20091105 (1)

finds BG images

groups into sprites

generates sprite

recomputes BG pos

injects into page

http://spriteme.org/

Page 58: Fronteers 20091105 (1)

Browserscope

Page 59: Fronteers 20091105 (1)

HTTP Archive Format

(HAR)

Page 60: Fronteers 20091105 (1)

@font-face

blocks rendering in IE if below SCRIPT tag

declare above all SCRIPTs

Page 61: Fronteers 20091105 (1)

Velocity OnLine Conference

Dec 8, 9am-12:30pm PT

Hooman Beheshti (StrangeLoop)

Charles Jolley (SproutCore)

Matt Cutts (Google)

Artur Bergman (Wikia)

Damien Katz (CouchDB)

Page 62: Fronteers 20091105 (1)

focus on the frontend

run YSlow

and Page Speed!

progressive enhancement progressive rendering

takeaways

Page 63: Fronteers 20091105 (1)

SPEED is the next competitive advantage

use it

...before someone else does

Page 64: Fronteers 20091105 (1)

Steve Souders

[email protected]

http://stevesouders.com/docs/fronteers-20091105.pptx

Page 65: Fronteers 20091105 (1)

GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

SproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval

Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523

Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation

Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709

Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632

Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business

Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx

Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business

SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster

HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/

@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/