Transcript
Page 1: Go Faster, Webmasters

Mike Bailey

Melbourne Ruby Users GroupJuly, 2010

Page 2: Go Faster, Webmasters

Go Faster, Webmaster!

Page 3: Go Faster, Webmasters

Talks by techies from:

Google, Yahoo, Microsoft, Amazon, Twitter, Facebook, Firefox, Firebug, Chrome, Internet Explorer and more!

1200 attendees (sold out)

Mostly technical audience

Page 4: Go Faster, Webmasters

The Need for Speed

Page 5: Go Faster, Webmasters

The Need for Speed

"Average load time of a web page is 4.9 seconds"- Urs Hölzle, Google

Page 6: Go Faster, Webmasters

The Google Analytics exit rate for different page load times collected from Wikia data. Measured over 29 million pageviews

Page 7: Go Faster, Webmasters

The Need for Speed

"Average load time of a web page is 4.9 seconds"- Urs Hölzle, Google

Page 8: Go Faster, Webmasters

The Need for Speed

"Average load time of a web page is 4.9 seconds"- Urs Hölzle, Google

"The goal should be around 100 ms, the time it takes for a reader to turn the page in a book"

- http://oreil.ly/bvYNk3

Page 9: Go Faster, Webmasters

The Need for Speed

Google: +500 ms -20% traffic*Amazon: +100 ms -1% sales*

* http://bit.ly/9iRqAu

Page 10: Go Faster, Webmasters

We monitor backend performance

Page 11: Go Faster, Webmasters

but what about the front end?

Page 12: Go Faster, Webmasters

17%

83%

iGoogle, primed cache

the importance of frontend performance

9% 91%

iGoogle, empty cache

Steve Souders http://bit.ly/Zxh4m

Page 13: Go Faster, Webmasters

time spent on the frontendEmpty Cache Primed Cache

www.aol.com 97% 97%www.ebay.com 95% 81%www.facebook.com 95% 81%www.google.com/search 47% 0%search.live.com/results 67% 0%www.msn.com 98% 94%www.myspace.com 98% 98%en.wikipedia.org/wiki 94% 91%www.yahoo.com 97% 96%www.youtube.com 98% 97%

April 2008Steve Souders http://bit.ly/Zxh4m

Page 14: Go Faster, Webmasters

The Performance Golden Rule

80-90% of the end-user response time is spent on the frontend. Start there.

greater potential for improvement

simpler

proven to work

Steve Souders http://bit.ly/Zxh4m

Page 15: Go Faster, Webmasters

To Measure is to Know

Page 16: Go Faster, Webmasters

To Measure is to Know

Firefox - Firebug -> Net Window

Page 17: Go Faster, Webmasters

To Measure is to Know

Firefox - Firebug -> Net Window

Chrome, Safari -> Web Inspector

Page 18: Go Faster, Webmasters

To Measure is to Know

Firefox - Firebug -> Net Window

Chrome, Safari -> Web Inspector

IE -> HTTPWatch ($395-$44,395)

Page 19: Go Faster, Webmasters

To Measure is to Know

Page 20: Go Faster, Webmasters

To Measure is to Know

webpagetest.org

Page 21: Go Faster, Webmasters
Page 22: Go Faster, Webmasters

To Measure is to Know

webpagetest.org

Page 23: Go Faster, Webmasters

To Measure is to Know

webpagetest.org

Webmaster Tools -> Labs -> Site Performance

Page 24: Go Faster, Webmasters
Page 25: Go Faster, Webmasters

To Measure is to Know

webpagetest.org

Webmaster Tools -> Labs -> Site Performance

showslow.com

Page 26: Go Faster, Webmasters
Page 27: Go Faster, Webmasters

Commercial Monitoring Services

gomez.com

keynote.com

webmetrics.com

Page 28: Go Faster, Webmasters

How do we speed up our pages?

Page 29: Go Faster, Webmasters

How do we speed up our pages?

Page 30: Go Faster, Webmasters

How do we speed up our pages?

Page 31: Go Faster, Webmasters

14 RULES

1. MAKE FEWER HTTP REQUESTS2. USE A CDN3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS5. PUT STYLESHEETS AT THE TOP6. PUT SCRIPTS AT THE BOTTOM7. AVOID CSS EXPRESSIONS8. MAKE JS AND CSS EXTERNAL9. REDUCE DNS LOOKUPS

10. MINIFY JS11. AVOID REDIRECTS12. REMOVE DUPLICATE SCRIPTS13. CONFIGURE ETAGS14. MAKE AJAX CACHEABLE

Page 32: Go Faster, Webmasters

Analysis Tools

Page 33: Go Faster, Webmasters

Analysis Tools

YSlow

Page 34: Go Faster, Webmasters

Analysis Tools

YSlow

Page Speed

Page 35: Go Faster, Webmasters

14 Rule Redux

Make Fewer Requests- combine javascripts, stylesheets- use css sprites- reduce DNS lookups- avoid redirects- enable proxy and browser caching of assets

Make Smaller Requests- gzip components- optimize images- minify javascript

Page 36: Go Faster, Webmasters

Tools to Help

http://spriteme.org/

http://smush.it/

http://stevesouders.com/cuzillion/

Page 37: Go Faster, Webmasters

The Problem(s) with TCP

Page 38: Go Faster, Webmasters

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

Page 39: Go Faster, Webmasters

John Rauser http://oreil.ly/dkvpgM

Page 40: Go Faster, Webmasters

John Rauser http://oreil.ly/dkvpgM

Page 41: Go Faster, Webmasters

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

Page 42: Go Faster, Webmasters

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Page 43: Go Faster, Webmasters

John Rauser http://oreil.ly/dkvpgM

Page 44: Go Faster, Webmasters

John Rauser http://oreil.ly/dkvpgM

Page 45: Go Faster, Webmasters

John Rauser http://oreil.ly/dkvpgM

Page 46: Go Faster, Webmasters

Real World Data

http://mike.bailey.net.au/blog?p=38

Page 47: Go Faster, Webmasters

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Page 48: Go Faster, Webmasters

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Google have proposed improvements

Page 49: Go Faster, Webmasters

Quick wins

Page 50: Go Faster, Webmasters

Quick wins

Google AJAX Libraries API

Page 51: Go Faster, Webmasters

Quick wins

Google AJAX Libraries API

GA Async Tracking Code

Page 52: Go Faster, Webmasters

Want to learn more?

Videos from Velocity 2010 http://bit.ly/bL0Msz

Read Steve Souder's books,

"High Performance Web Sites" & "Even Faster Web Sites"


Top Related