go faster, webmaster

52
Mike Bailey Melbourne Ruby Users Group July, 2010

Upload: mike-bailey

Post on 17-Jun-2015

1.309 views

Category:

Technology


3 download

DESCRIPTION

Google, Amazon and Wikia have reported an increase in abandonment and decrease in conversions as page load time increases. The average webpage takes 4.9 seconds to load. Most of the wait is on the frontend. The tools and best practices to reduce page load time are freely available. There is a strong business case to use them. Fresh back from O'Reilly Velocity 2010, this is a presentation I gave to the Melbourne Ruby User Group.

TRANSCRIPT

Page 1: Go Faster, Webmaster

Mike Bailey

Melbourne Ruby Users GroupJuly, 2010

Page 2: Go Faster, Webmaster

Go Faster, Webmaster!

Page 3: Go Faster, Webmaster

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, Webmaster

The Need for Speed

Page 5: Go Faster, Webmaster

The Need for Speed

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

Page 6: Go Faster, Webmaster

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

Page 7: Go Faster, Webmaster

The Need for Speed

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

Page 8: Go Faster, Webmaster

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, Webmaster

The Need for Speed

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

* http://bit.ly/9iRqAu

Page 10: Go Faster, Webmaster

We monitor backend performance

Page 11: Go Faster, Webmaster

but what about the front end?

Page 12: Go Faster, Webmaster

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, Webmaster

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, Webmaster

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, Webmaster

To Measure is to Know

Page 16: Go Faster, Webmaster

To Measure is to Know

Firefox - Firebug -> Net Window

Page 17: Go Faster, Webmaster

To Measure is to Know

Firefox - Firebug -> Net Window

Chrome, Safari -> Web Inspector

Page 18: Go Faster, Webmaster

To Measure is to Know

Firefox - Firebug -> Net Window

Chrome, Safari -> Web Inspector

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

Page 19: Go Faster, Webmaster

To Measure is to Know

Page 20: Go Faster, Webmaster

To Measure is to Know

webpagetest.org

Page 21: Go Faster, Webmaster
Page 22: Go Faster, Webmaster

To Measure is to Know

webpagetest.org

Page 23: Go Faster, Webmaster

To Measure is to Know

webpagetest.org

Webmaster Tools -> Labs -> Site Performance

Page 24: Go Faster, Webmaster
Page 25: Go Faster, Webmaster

To Measure is to Know

webpagetest.org

Webmaster Tools -> Labs -> Site Performance

showslow.com

Page 26: Go Faster, Webmaster
Page 27: Go Faster, Webmaster

Commercial Monitoring Services

gomez.com

keynote.com

webmetrics.com

Page 28: Go Faster, Webmaster

How do we speed up our pages?

Page 29: Go Faster, Webmaster

How do we speed up our pages?

Page 30: Go Faster, Webmaster

How do we speed up our pages?

Page 31: Go Faster, Webmaster

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, Webmaster

Analysis Tools

Page 33: Go Faster, Webmaster

Analysis Tools

YSlow

Page 34: Go Faster, Webmaster

Analysis Tools

YSlow

Page Speed

Page 35: Go Faster, Webmaster

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, Webmaster

Tools to Help

http://spriteme.org/

http://smush.it/

http://stevesouders.com/cuzillion/

Page 37: Go Faster, Webmaster

The Problem(s) with TCP

Page 38: Go Faster, Webmaster

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

Page 39: Go Faster, Webmaster

John Rauser http://oreil.ly/dkvpgM

Page 40: Go Faster, Webmaster

John Rauser http://oreil.ly/dkvpgM

Page 41: Go Faster, Webmaster

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

Page 42: Go Faster, Webmaster

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Page 43: Go Faster, Webmaster

John Rauser http://oreil.ly/dkvpgM

Page 44: Go Faster, Webmaster

John Rauser http://oreil.ly/dkvpgM

Page 45: Go Faster, Webmaster

John Rauser http://oreil.ly/dkvpgM

Page 46: Go Faster, Webmaster

Real World Data

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

Page 47: Go Faster, Webmaster

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Page 48: Go Faster, Webmaster

The Problem(s) with TCP

RFC 2581 TCP Congestion Control

RFC 813 Delayed ACK

Google have proposed improvements

Page 49: Go Faster, Webmaster

Quick wins

Page 50: Go Faster, Webmaster

Quick wins

Google AJAX Libraries API

Page 51: Go Faster, Webmaster

Quick wins

Google AJAX Libraries API

GA Async Tracking Code

Page 52: Go Faster, Webmaster

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"