csdn drdobbs tenni theurer yahoo
TRANSCRIPT
![Page 1: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/1.jpg)
High PerformanceWeb Sites
Tenni Theurer, Yahoo! Engineering Manager
http://developer.yahoo.com/performance
CSDN-Dr.Dobbs Software Development 2.0 Conference 2007
![Page 2: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/2.jpg)
perceived response time
what is the end user’s experience?
slow crawl boring snail stagnant
unexceptional yawn
unresponsive
impatient delay
moderate blah subdue
drag apathetic prolong slack
load sluggish sleepy late
unexciting reduced lag
complex heavy
unmemorable obscure
why wait
performance speed enjoyable urgent
instant accelerate perception snap
achievement better improve action pleasant pace quick promote
swift cool maximum drive prompt
advance fast hurry rush satisfying feel
exceptional brisk rapid exciting
![Page 3: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/3.jpg)
Exceptional Performance
quantify and improve the performance of all Yahoo! products worldwide
center of expertise
build tools, analyze data
gather, research, and evangelize best practices
![Page 4: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/4.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 5: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/5.jpg)
Today's Checklist
perspective on performance turned upside down
3+ actionable takeaways empowered to make everyone's
web experience better
![Page 6: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/6.jpg)
The Importance of Front-End Performance
Back-end =
5%
Front-end =
95%
Even here, front-end = 88%
![Page 7: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/7.jpg)
The Performance Golden Rule
80-90% of the end-user response time is spent on the front-end. Start there.
• Greater potential for improvement
• Simpler
• Proven to work
![Page 8: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/8.jpg)
Agenda
Performance Research
14 Rules
Case Studies
Evangelism
![Page 9: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/9.jpg)
Performance Research
![Page 10: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/10.jpg)
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
![Page 11: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/11.jpg)
Empty vs. Primed Cache
empty cache
2.4 seconds
primed cache
0.9 seconds
83% fewer bytes
90% fewer HTTP requests
![Page 12: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/12.jpg)
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 13: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/13.jpg)
Add a new image to your page<img src="image/blank.gif" height="1" width="1"/>
with the following response headers:
Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMT
}1 px
Browser Cache Experiment
![Page 14: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/14.jpg)
0.0%
10.0%
20.0%
30.0%
40.0%
50.0%
60.0%
70.0%
80.0%
90.0%
100.0%
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
day of experiment
perc
enta
ge
unique users with empty cache
page views with empty cache
Surprising Results
page views with
empty cache
40-60% ~20%
users withempty cache
![Page 15: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/15.jpg)
Experiment Takeaways
The empty cache user experience is more prevalent than you think!
Optimize for both primed cache and empty cache experience.
![Page 16: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/16.jpg)
http://yuiblog.com/blog/2007/03/01/performance-research-part-3
![Page 17: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/17.jpg)
Impact of Cookies on Response Time
80 ms delay dialup users
Cookie Size
Time Delta
0 bytes 78 ms 0 ms
500 bytes 79 ms +1 ms
1000 bytes 94 ms +16 ms
1500 bytes 109 ms +31 ms
2000 bytes 125 ms +47 ms
2500 bytes 141 ms +63 ms
3000 bytes 156 ms +78 ms
keep sizes low
![Page 18: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/18.jpg)
.yahoo.com cookie sizes
28.86%
51.80%
17.79%
1.55%
0%
100%
per
cen
tag
e o
f p
age
view
s over 1501 bytes
1001-1500 bytes
501-1000 bytes
1-500 bytes
![Page 19: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/19.jpg)
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 20: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/20.jpg)
Parallel Downloads
Two components in parallel per hostname
GIF GIF
GIF
GIF
GIF
GIF
HTTP/1.1
![Page 21: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/21.jpg)
Maximizing Parallel Downloads
response time (seconds)
aliases
![Page 22: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/22.jpg)
Maximizing Parallel Downloads
response time (seconds)
rule of thumb: use at least two but no more than four aliases
0.00
0.20
0.40
0.60
0.80
1.00
1.20
1.40
1 2 4 5 10
average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
![Page 23: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/23.jpg)
Summary
What the 80/20 Rule Tells Us about Reducing HTTP Requestshttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/
Browser Cache Usage – Exposed!http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
When the Cookie Crumbleshttp://yuiblog.com/blog/2007/01/04/performance-research-part-2/
Maximizing Parallel Downloads in the Carpool Lanehttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 24: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/24.jpg)
14 Rules
![Page 25: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/25.jpg)
14 Rules1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzip components5. Put stylesheets at the top6. Move scripts to the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable
![Page 26: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/26.jpg)
Rule 1: Make fewer HTTP requests
CSS sprites
combined scripts, combined stylesheets
image maps
inline images
![Page 27: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/27.jpg)
CSS Sprites – Preferred
size of combined image is less
not supported in Opera 6
http://alistapart.com/articles/sprites
<span style="
background-image: url('sprites.gif');
background-position: -260px -90px;">
</span>
![Page 28: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/28.jpg)
Combined Scripts, Combined Stylesheets
Scripts Stylesheets
amazon.com 3 1
aol.com 18 1
cnn.com 11 2
ebay.com 7 2
froogle.google.com 1 1
msn.com 9 1
myspace.com 2 2
wikipedia.org 3 1
yahoo.com 4 1
youtube.com 7 3
Average 6.5 1.5
![Page 29: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/29.jpg)
Combined Scripts,Combined Stylesheets
combining six scripts into one eliminates five HTTP requests
challenges: – develop as separate modules– number of possible combinations vs.
loading more than needed– maximize browser cache
one solution:– dynamically combine and cache
![Page 30: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/30.jpg)
Rule 2: Use a CDN
distribute your static content before distributing your dynamic content
amazon.com Akamai
aol.com Akamai
cnn.com
ebay.com Akamai, Mirror Image
google.com
msn.com SAVVIS
myspace.com Akamai, Limelight
wikipedia.org
yahoo.com Akamai
youtube.com
![Page 31: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/31.jpg)
Rule 3: Add an Expires header not just for images
Images
Stylesheets
Scripts
%Median
Age
amazon.com 0/62 0/1 0/3 0% 114 days
aol.com 23/43 1/1 6/18 48% 217 days
cnn.com 0/138 0/2 2/11 1% 227 days
ebay.com 16/20 0/2 0/7 55% 140 days
froogle.google.com
1/23 0/1 0/1 4% 454 days
msn.com 32/35 1/1 3/9 80% 34 days
myspace.com 0/18 0/2 0/2 0% 1 day
wikipedia.org 6/8 1/1 2/3 75% 1 day
yahoo.com 23/23 1/1 4/4 100% n/a
youtube.com 0/32 0/3 0/7 0% 26 days
![Page 32: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/32.jpg)
Rule 4: Gzip components
you can affect users' download times
90%+ of browsers support compression
![Page 33: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/33.jpg)
Gzip: not just for HTMLHTML Scripts Stylesheet
s
amazon.com x
aol.com x some some
cnn.com
ebay.com x
froogle.google.com
x x x
msn.com x deflate deflate
myspace.com x x x
wikipedia.org x x x
yahoo.com x x x
youtube.com x some somegzip scripts, stylesheets, XML, JSON (not images, PDF)
![Page 34: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/34.jpg)
Gzip Edge Cases
<1% of browsers have problems with gzip– IE 5.5: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q313712
– IE 6.0: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q31249
– Netscape 3.x, 4.x http://www.schroepl.net/projekte/mod_gzip/browser.htm
consider adding Cache-Control: Private
remove ETags (Rule 13)
hard to diagnose; problem getting smaller
![Page 35: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/35.jpg)
Rule 5: Put stylesheets at the top
stylesheets block rendering in IEhttp://stevesouders.com/examples/css-bottom.php
solution: put stylesheets in HEAD (per spec)
avoids Flash of Unstyled Content
use LINK (not @import)
![Page 36: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/36.jpg)
Slowest is Fastest
CSS at the bottom:resources load faster, but nothing renders
CSS at the top:resources take longer, but render progressively
@import at the top:same problems as bottom
right choice
![Page 37: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/37.jpg)
Rule 6: Move scripts to the bottom
scripts block parallel downloads across all hostnames
scripts block rendering of everything below them in the page
IE and FFhttp://stevesouders.com/examples/js-middle.php
![Page 38: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/38.jpg)
Rule 6: Move scripts to the bottom
script defer attribute is not a solution– blocks rendering and downloads in FF– slight blocking in IE
solution: move them as low in the page as possible
![Page 39: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/39.jpg)
Rule 7: Avoid CSS expressions
used to set CSS properties dynamically in IEwidth: expression( document.body.clientWidth < 600 ? “600px” : “auto” );
problem: expressions execute many times– mouse move, key press, resize, scroll, etc.
http://stevesouders.com/examples/expression-counter.php
![Page 40: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/40.jpg)
Rule 8: Make JS and CSS external
inline: HTML document is bigger
external: more HTTP requests, but cached
variables– page views per user (per session)– empty vs. primed cache stats– component re-use
external is typically better– home pages may be an exception
![Page 41: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/41.jpg)
Post-Onload Download
inline in front page
download external files after onloadwindow.onload = downloadComponents;function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; document.body.appendChild(elem); ...}
speeds up secondary pages
![Page 42: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/42.jpg)
Dynamic Inlining
start with post-onload download
set cookie after components downloaded
server-side: – if cookie, use external– else, do inline with post-onload
download
cookie expiration date is key
speeds up all pages
![Page 43: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/43.jpg)
Rule 9: Reduce DNS lookups
typically 20-120 ms
block parallel downloads
OS and browser both have DNS caches
![Page 44: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/44.jpg)
minify inline scripts, too
Rule 10: Minify JavaScriptMinify
External?Minify Inline?
www.amazon.com
no no
www.aol.com no no
www.cnn.com no no
www.ebay.com yes no
froogle.google.com
yes yes
www.msn.com yes yes
www.myspace.com
no no
www.wikipedia.org
no no
www.yahoo.com yes yes
www.youtube.com
no no
![Page 45: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/45.jpg)
Minify vs. Obfuscate
Original
JSMin Savings
Dojo Savings
www.amazon.com
204K 31K (15%) 48K (24%)
www.aol.com 44K 4K (10%) 4K (10%)
www.cnn.com 98K 19K (20%) 24K (25%)
www.myspace.com
88K 23K (27%) 24K (28%)
www.wikipedia.org
42K 14K (34%) 16K (38%)
www.youtube.com
34K 8K (22%) 10K (29%)
Average 85K 17K (21%) 21K (25%)
minify – it's safer
http://crockford.com/javascript/jsmin
http://dojotoolkit.org/docs/shrinksafe
not much difference
![Page 46: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/46.jpg)
Rule 11: Avoid redirects
3xx status codes – mostly 301 and 302HTTP/1.1 301 Moved PermanentlyLocation: http://stevesouders.com/newuri
add Expires headers to cache redirects
worst form of blocking
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
![Page 47: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/47.jpg)
Redirects
Redirects
www.amazon.com no
www.aol.com yes – secondary page
www.cnn.com yes – initial page
www.ebay.com yes – secondary page
froogle.google.com no
www.msn.com yes – initial page
www.myspace.com yes – secondary page
www.wikipedia.org yes – secondary page
www.yahoo.com yes – secondary page
www.youtube.com no
![Page 48: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/48.jpg)
Rule 12: Remove duplicate scripts
hurts performance– extra HTTP requests (IE only)– extra executions
atypical?– 2 of 10 top sites contain duplicate
scripts
team size, # of scripts
![Page 49: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/49.jpg)
Rule 13: Configure ETags
unique identifier returned in responseETag: "c8897e-aee-4165acf0"Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
used in conditional GET requestsIf-None-Match: "c8897e-aee-4165acf0"If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
if ETag doesn't match, can't send 304
![Page 50: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/50.jpg)
The Problem with ETags
ETag format– Apache: inode-size-timestamp– IIS: Filetimestamp:ChangeNumber
ETag for a single entity differs across servers, by default
Sites with >1 server return too few 304s– ((n-1)/n)% wasted downloads
Remove them– Apache: FileETag none– IIS: http://support.microsoft.com/kb/922703/
![Page 51: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/51.jpg)
Rule 14: Make AJAX cacheable
XHR, JSON, iframe, dynamic scripts can still be cached (and minified, and gzipped)
a personalized response should still be cacheable for that person
![Page 52: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/52.jpg)
AJAX Example: Yahoo! Mail Beta
address book XML request→ GET /yab/[...]&r=0.5289571053069156 HTTP/1.1 Host: us.xxx.mail.yahoo.com← HTTP/1.1 200 OK Date: Thu, 12 Apr 2007 19:39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar 2007 01:17:17 GMT Content-Type: text/xml; charset=utf-8 Content-Encoding: gzip
address book changes infrequently– cache it; add last-modified-time in URL
![Page 53: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/53.jpg)
Case Studies
![Page 54: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/54.jpg)
Case Study:
move JS to onloadremove bottom tabsavoid redirectsimage spriteshost JS on CDNcombine JS files
1/ 25/ 06 3/ 25/ 07
40-50%40-50%
![Page 55: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/55.jpg)
Preloading
1
5
42 bbebecbeckbeckhbeckhabeckham
Download Search components:
ysch_srp_20070319.js
yschx_20070320a.css
flat2_search.gif
dropdown.gif
bulb1.gif
ar_next.gif
addmy.gif
3
![Page 56: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/56.jpg)
What about performance and Web 2.0 apps?
client-side CPU is more of an issue
user expectations are higher
these rules still apply, new rules will come out
start off on the right foot
![Page 57: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/57.jpg)
Case Study:
User Workflow
mail.yahoo.com
view inbox folder
read messages (x3)
compose message
confirm send
total time:
Time
2.40 s
4.98 s
6.39 s
2.21 s
2.10 s
18.08 s
Time
12.48 s
1.52 s
1.53 s
0.34 s
0s
15.87 s
Delta
+420%
-70%
-76%
-85%
-100%
-12%
Mail Classic
Mail Classic
![Page 58: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/58.jpg)
Evangelism
BookHigh Performance Web Sites
ConferencesYahoo! F2E SummitWeb 2.0 ExpoRich Web ExperienceCSDN-Dr. Dobbs
BlogsYUI Blog: http://yuiblog.com/blog/category/performanceYDN Blog: http://developer.yahoo.com/performance/
Open Source YSlow
OSConAjax ExperienceBlogherFuture of Web Apps
![Page 59: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/59.jpg)
http://developer.yahoo.com/yslow/
![Page 60: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/60.jpg)
Ten Top U.S Web Sites
Page Weight
Response Time
YSlow Grade
www.amazon.com 405K 15.9 sec D
www.aol.com 182K 11.5 sec F
www.cnn.com 502K 22.4 sec F
www.ebay.com 275K 9.6 sec C
froogle.google.com 18K 1.7 sec A
www.msn.com 221K 9.3 sec F
www.myspace.com 205K 7.8 sec D
www.wikipedia.org 106K 6.2 sec C
www.yahoo.com 178K 5.9 sec A
www.youtube.com 139K 9.6 sec D
![Page 61: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/61.jpg)
Conclusion
![Page 62: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/62.jpg)
Takeaways
focus on the front-end
harvest the low-hanging fruit
you do control user response times
small investment up front keeps on giving
LOFNO – be an advocate for your users
![Page 63: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/63.jpg)
Today's Checklist
perspective on performance turned upside down
3+ actionable takeaways empowered to make everyone's
web experience better
![Page 64: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/64.jpg)
Tenni Theurer [email protected]
![Page 65: Csdn Drdobbs Tenni Theurer Yahoo](https://reader036.vdocuments.site/reader036/viewer/2022062312/554a517ab4c905572f8b48da/html5/thumbnails/65.jpg)
CC Images Used"Need for Speed" by Amnemon:
http://www.flickr.com/photos/marinacvinhal/379111290/"Max speed 15kmh" by xxxtoff:
http://www.flickr.com/photos/xxxtoff/219781763/"maybe" by Tal Bright:
http://www.flickr.com/photos/bright/118197469/"takeout" by dotpolka:
http://www.flickr.com/photos/dotpolka/249129144/"how do they do that" by Fort Photo:
http://www.flickr.com/photos/fortphoto/388825145/"Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers:
http://www.flickr.com/photos/two-wrongs/205467442/"Zipper Pocket" by jogales:
http://www.flickr.com/photos/jogales/11519576/"new briefcase" by dcJohn:
http://www.flickr.com/photos/dcjohn/85504455/"Told you it was me!" by Pug!:
http://flickr.com/photos/pugspace/1277023154/"Robert's Legion" by dancharvey:
http://www.flickr.com/photos/dancharvey/2647529/"thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/