go faster, webmasters
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
Mike Bailey
Melbourne Ruby Users GroupJuly, 2010
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
The Need for Speed
The Need for Speed
"Average load time of a web page is 4.9 seconds"- Urs Hölzle, Google
The Google Analytics exit rate for different page load times collected from Wikia data. Measured over 29 million pageviews
The Need for Speed
"Average load time of a web page is 4.9 seconds"- Urs Hölzle, Google
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
The Need for Speed
Google: +500 ms -20% traffic*Amazon: +100 ms -1% sales*
* http://bit.ly/9iRqAu
We monitor backend performance
but what about the front end?
17%
83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
Steve Souders http://bit.ly/Zxh4m
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
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
To Measure is to Know
To Measure is to Know
Firefox - Firebug -> Net Window
To Measure is to Know
Firefox - Firebug -> Net Window
Chrome, Safari -> Web Inspector
To Measure is to Know
Firefox - Firebug -> Net Window
Chrome, Safari -> Web Inspector
IE -> HTTPWatch ($395-$44,395)
To Measure is to Know
To Measure is to Know
webpagetest.org
To Measure is to Know
webpagetest.org
To Measure is to Know
webpagetest.org
Webmaster Tools -> Labs -> Site Performance
To Measure is to Know
webpagetest.org
Webmaster Tools -> Labs -> Site Performance
showslow.com
Commercial Monitoring Services
gomez.com
keynote.com
webmetrics.com
How do we speed up our pages?
How do we speed up our pages?
How do we speed up our pages?
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
Analysis Tools
Analysis Tools
YSlow
Analysis Tools
YSlow
Page Speed
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
Tools to Help
http://spriteme.org/
http://smush.it/
http://stevesouders.com/cuzillion/
The Problem(s) with TCP
The Problem(s) with TCP
RFC 2581 TCP Congestion Control
John Rauser http://oreil.ly/dkvpgM
John Rauser http://oreil.ly/dkvpgM
The Problem(s) with TCP
RFC 2581 TCP Congestion Control
The Problem(s) with TCP
RFC 2581 TCP Congestion Control
RFC 813 Delayed ACK
John Rauser http://oreil.ly/dkvpgM
John Rauser http://oreil.ly/dkvpgM
John Rauser http://oreil.ly/dkvpgM
Real World Data
http://mike.bailey.net.au/blog?p=38
The Problem(s) with TCP
RFC 2581 TCP Congestion Control
RFC 813 Delayed ACK
The Problem(s) with TCP
RFC 2581 TCP Congestion Control
RFC 813 Delayed ACK
Google have proposed improvements
Quick wins
Quick wins
Google AJAX Libraries API
Quick wins
Google AJAX Libraries API
GA Async Tracking Code
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"