In Search of Speed
-
Upload
sergey-chernyshev -
Category
Technology
-
view
1.464 -
download
4
description
Transcript of In Search of Speed
![Page 1: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/1.jpg)
in
search
of
speed
http://stevesouders.com/docs/speedgeeks-20091026.pptx &.zip
Disclaimer: This content does not necessarily reflect the opinions of my employer.
![Page 2: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/2.jpg)
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 3: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/3.jpg)
![Page 4: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/4.jpg)
17% 83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
![Page 5: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/5.jpg)
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 6: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/6.jpg)
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 7: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/7.jpg)
+ 0.4 sec
searches 0.6%
![Page 8: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/8.jpg)
Yahoo!
+ 0.4 sec
traffic 5-9%
![Page 9: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/9.jpg)
Bing
+2 sec
revenue 4.3%
![Page 10: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/10.jpg)
Shopzilla
-5 sec
revenue
X%
hw Y%
![Page 11: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/11.jpg)
Netflix
outbound bandwidth
43%
![Page 12: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/12.jpg)
![Page 13: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/13.jpg)
fast performance =
better user experience
more traffic
more revenue
reduced costs
![Page 14: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/14.jpg)
so...
why don't more people do it?
![Page 15: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/15.jpg)
it's
too
hard!
![Page 16: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/16.jpg)
![Page 17: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/17.jpg)
the hard is what makes it greatif it wasn't hard everyone would
do it
![Page 18: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/18.jpg)
this year's theme:
Fast by Default
![Page 19: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/19.jpg)
Aptimize WAX
concatenate scripts
concatenate stylesheets
sprites, data: URIs
far future Expires
minify JS and CSS
automatically in real time
![Page 20: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/20.jpg)
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 21: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/21.jpg)
Strangeloop Networks
"typical ecommerce site"
pages per visit: 11 16
time on site: 24 30 mins
conversions: 16%
order value: 5.5%
![Page 22: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/22.jpg)
Rails
far future Expires
concatenate scripts
domain sharding
configure ETags
pipeline: async scripts, spriting, minification,
flushing
![Page 23: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/23.jpg)
SproutCore
concatenate scripts
concatenate stylesheets
versioning (future Expires)
stylesheets at the top
scripts at the bottom
minify JS & CSS
remove dupe scripts
![Page 24: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/24.jpg)
Why do some sites feel slow
?
![Page 25: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/25.jpg)
AOL
![Page 26: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/26.jpg)
![Page 27: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/27.jpg)
Best Buy
![Page 28: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/28.jpg)
CNN
![Page 29: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/29.jpg)
(lack of)
Progressive Rendering
![Page 30: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/30.jpg)
Search
![Page 31: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/31.jpg)
WebPagetest.org
VA, UK, NZ
IE7, IE8
Dial, DSL, FIOS
empty, empty & primed
quad core
Pat Meenan (AOL)
![Page 33: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/33.jpg)
Shopping
![Page 34: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/34.jpg)
Sports
![Page 35: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/35.jpg)
Progressive Enhancement
deliver HTML
defer JS
avoid DOM
decorate later
![Page 36: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/36.jpg)
Progressive Enhancement
Progressive Rendering
![Page 37: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/37.jpg)
recent news
![Page 38: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/38.jpg)
finds BG images
groups into sprites
generates sprite
recomputes BG pos
injects into page
http://spriteme.org/
![Page 39: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/39.jpg)
Browserscope
![Page 40: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/40.jpg)
HTTP Archive Format
(HAR)
![Page 41: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/41.jpg)
@font-face
blocks rendering in IE if below SCRIPT tag
declare above all SCRIPTs
![Page 42: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/42.jpg)
focus on the frontend
run YSlow
and Page Speed!
progressive enhancement progressive rendering
takeaways
![Page 43: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/43.jpg)
SPEED is the next competitive advantage
use it
...before someone else does
![Page 45: In Search of Speed](https://reader035.fdocuments.in/reader035/viewer/2022070313/554a5349b4c90531228b4c16/html5/thumbnails/45.jpg)
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/