High Performance Web Sites - 2008
-
Upload
nate-koechley -
Category
Technology
-
view
17.160 -
download
1
description
Transcript of High Performance Web Sites - 2008
![Page 1: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/1.jpg)
High Performance Web Sites
Tips for faster pages
Nate [email protected]
nate.koechley.com/blog developer.yahoo.com/yui
![Page 2: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/2.jpg)
Y! Performance Research Engineering Team
• Tenni Theurer, Nicole Sullivan, Philip Tellis, Stoyan Stefanov, Swapni Shinde, Wayne Shea, Anand Kishore (Intern)
![Page 3: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/3.jpg)
Why talk about performance?
![Page 4: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/4.jpg)
1: Because fast is better
![Page 5: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/5.jpg)
5
![Page 6: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/6.jpg)
![Page 7: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/7.jpg)
![Page 8: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/8.jpg)
8
![Page 9: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/9.jpg)
9
![Page 10: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/10.jpg)
10
![Page 11: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/11.jpg)
11
![Page 12: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/12.jpg)
2: Because sites are bigger
![Page 13: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/13.jpg)
Modern web sites & applications have changed
architecturally.
![Page 14: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/14.jpg)
From 2003 to 2008:97K to 312K.
25.7 to 49.9 objects.
![Page 15: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/15.jpg)
In past 12 months, Top 1000 sites:From 250K to 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page
![Page 16: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/16.jpg)
What is performance?
![Page 17: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/17.jpg)
Two Flavors:Response Time
&System Efficiency
![Page 18: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/18.jpg)
Our focus is the response time of web
products
![Page 19: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/19.jpg)
Foundational Research:
![Page 20: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/20.jpg)
Perception
#1
![Page 21: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/21.jpg)
perceived response time
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
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
![Page 22: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/22.jpg)
perceived response time
what is the end user’s experience?
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
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
![Page 23: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/23.jpg)
It’s in the eye of the beholder
• Perception and usability are important performance metrics.
• More relevant than actual unload-to-onload time.
• Definition of "user onload" is undefined or varies from one web page to the next.
![Page 24: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/24.jpg)
#2“80% of consequences come from
20% of causes”
—Vilfredo Pareto
![Page 25: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/25.jpg)
The Importance of Front-End Performance
![Page 26: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/26.jpg)
The Importance of Front-End Performance
Back-end
= 5%
![Page 27: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/27.jpg)
The Importance of Front-End Performance
Front-end
= 95%
![Page 28: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/28.jpg)
The Importance of Front-End Performance
Even here, front-end = 88%
![Page 29: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/29.jpg)
![Page 30: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/30.jpg)
Back-end vs. Front-endEmpty Cache Full Cache
amazon.com 82% 86%
aol.com 94% 86%
cnn.com 81% 92%
ebay.com 98% 92%
google.com 86% 64%
msn.com 97% 95%
myspace.com 96% 86%
wikipedia.org 80% 88%
yahoo.com 95% 88%
youtube.com 97% 95%
![Page 31: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/31.jpg)
Until now our optimization efforts have targeted the tip of the iceberg.
![Page 32: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/32.jpg)
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
![Page 33: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/33.jpg)
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
![Page 34: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/34.jpg)
Cache
#3
![Page 35: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/35.jpg)
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Empty vs. Full Cache
![Page 36: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/36.jpg)
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Empty vs. Full Cache
with an empty cache 0 0.5 1 1.5 2 2.5 3
imagestylesheet
scriptscript
dns lookupimageimageimageimageimage
dns lookupscript
imageimageimageimageimageimageimageimagescript
imageimageimageimageimageimageimageimagescript
dns lookupimageimage
htmldns lookup
![Page 37: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/37.jpg)
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Empty vs. Full Cache
with an empty cache 0 0.5 1 1.5 2 2.5 3
imagestylesheet
scriptscript
dns lookupimageimageimageimageimage
dns lookupscript
imageimageimageimageimageimageimageimagescript
imageimageimageimageimageimageimageimagescript
dns lookupimageimage
htmldns lookup
![Page 38: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/38.jpg)
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Empty vs. Full Cache
![Page 39: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/39.jpg)
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
Empty vs. Full Cache
![Page 40: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/40.jpg)
Empty vs. Full Cache
1user requests
www.yahoo.com
2user requests
other web pages
3user re-requests www.yahoo.com
![Page 41: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/41.jpg)
Empty vs. Full Cache
![Page 42: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/42.jpg)
Empty vs. Full Cache
empty = 2.4 seconds
full = 0.9 second
full = 83% fewer bytes.
full = 90% fewer HTTP requests.
![Page 43: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/43.jpg)
(sadly, the cache doesn’t work as well as we wish it did.)
#3b
![Page 44: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/44.jpg)
How much does caching benefit our users?
![Page 45: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/45.jpg)
How much does caching benefit our users?
Q1: What % of unique users view a page with an empty cache?
![Page 46: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/46.jpg)
How much does caching benefit our users?
Q1: What % of unique users view a page with an empty cache?
Q2: What % of page views are with an empty cache?
![Page 47: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/47.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 48: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/48.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 49: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/49.jpg)
Browser Cache Experiment
Two possible response codes:
200 – The browser does not have the image in its cache.
304 – The browser has the image in its cache, but needs to verify the last modified date.
![Page 50: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/50.jpg)
Browser Cache ExperimentQ1: What % of unique users view with an empty cache?
# unique users with at least one 200 response
total # unique users
Q2: What % of page views are with an empty cache?
total # of 200 responses# of 200 + # of 304 responses
}1 px
![Page 51: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/51.jpg)
0.25
0.50
0.75
1.00
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
uu w/ empty cachepv w/ empty cache
Surprising Results
![Page 52: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/52.jpg)
0.25
0.50
0.75
1.00
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
uu w/ empty cachepv w/ empty cache
Surprising Results
![Page 53: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/53.jpg)
40-60% UUs w/ empty cache
20% PVs w/ empty cache
![Page 54: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/54.jpg)
Experiment Takeaways
1. The empty cache user experience is more prevalent than you think!
2. Therefore, optimize for both full cache and empty cache experience.
![Page 55: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/55.jpg)
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 56: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/56.jpg)
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 57: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/57.jpg)
Cookies
#4
![Page 58: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/58.jpg)
1user requests
www.yahoo.com
Set Scope Correctly
HTTP response header sent by the web server:HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com
![Page 59: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/59.jpg)
1user requests
www.yahoo.com
Because broad scope adds up2
user requests finance.yahoo.com
HTTP request header sent by the browser:GET / HTTP/1.1Host: finance.yahoo.comUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz;
![Page 60: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/60.jpg)
Impact on Response TimeCookie 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
![Page 61: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/61.jpg)
Cookie Sizes across the Web
Total Cookie SizeAmazon 60 bytesGoogle 72 bytesYahoo 122 bytesCNN 184 bytesYouTube 218 bytesMSN 268 byteseBay 331 bytesMySpace 500 bytes
![Page 62: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/62.jpg)
Experiment Takeaways
• eliminate unnecessary cookies
• keep cookie sizes low
• set cookies at the appropriate domain (or sub-domain) level
• set Expires date appropriately
![Page 63: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/63.jpg)
http://yuiblog.com/blog/2007/03/01/performance-research-part-3
![Page 64: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/64.jpg)
http://yuiblog.com/blog/2007/03/01/performance-research-part-3
![Page 65: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/65.jpg)
Parallel Downloads
Two components in parallel per hostname
GIF GIF
GIF
GIF
GIF
GIF
per HTTP/1.1
![Page 66: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/66.jpg)
Parallel Downloads
![Page 67: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/67.jpg)
Parallel Downloads
Two in parallel
Four in parallel
Eight in parallel
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.425 0.850 1.275 1.700
![Page 68: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/68.jpg)
Parallel Downloads
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.375 0.750 1.125 1.500
Two in parallel
Four in parallel
Eight in parallel
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.425 0.850 1.275 1.700
![Page 69: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/69.jpg)
Parallel Downloads
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.375 0.750 1.125 1.500
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.375 0.750 1.125 1.500
Two in parallel
Four in parallel
Eight in parallel
htmlcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponentcomponent
0 0.425 0.850 1.275 1.700
![Page 70: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/70.jpg)
Maximizing Parallel Downloads
response time (seconds)
aliases
![Page 71: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/71.jpg)
Maximizing Parallel Downloads
response time (seconds)
aliases
0
0.2
0.4
0.6
0.8
1.0
1.2
1.4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
![Page 72: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/72.jpg)
Maximizing Parallel Downloads
response time (seconds)
aliases
0
0.2
0.4
0.6
0.8
1.0
1.2
1.4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
![Page 73: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/73.jpg)
Maximizing Parallel Downloads
response time (seconds)
rule of thumb: use at least 2 but no more than 4 aliases
0
0.2
0.4
0.6
0.8
1.0
1.2
1.4
1 2 4 5 10
36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) average
![Page 74: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/74.jpg)
Experiment Takeaways
• beware the effects of CPU thrashing
• DNS lookup times vary across ISPs and geographic locations
• domain names may not be cached
![Page 75: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/75.jpg)
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 76: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/76.jpg)
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 77: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/77.jpg)
Summary
What the 80/20 Rule Tells Us about Reducing HTTP Requests
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Browser Cache Usage – Exposed! http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
When the Cookie Crumbles http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
Maximizing Parallel Downloads in the Carpool Lane
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
![Page 78: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/78.jpg)
Performance Fruit(some low, some high)
![Page 79: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/79.jpg)
Rule: Make fewer HTTP requests.
• CSS sprites
• Combined / concatenated JS and CSS files
• image maps
• inline (data) images
![Page 80: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/80.jpg)
CSS Sprites
size of combined image is lesshttp://alistapart.com/articles/sprites
<span style="
background-image: url('sprites.gif');
background-position: -260px -90px;">
</span>
![Page 81: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/81.jpg)
Combined Scripts, Combined Stylesheets
Scripts Stylesheets
amazon.com 3 1aol.com 18 1cnn.com 11 2ebay.com 7 2froogle.google.com 1 1msn.com 9 1myspace.com 2 2wikipedia.org 3 1yahoo.com 4 1youtube.com 7 3
Average 6.5 1.5
![Page 82: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/82.jpg)
(This could well be)
The End.
![Page 83: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/83.jpg)
Rule: Use a CDN
distribute your static content before distributing your dynamic content
amazon.com Akamaiaol.com Akamaicnn.comebay.com Akamai, Mirror Imagegoogle.commsn.com SAVVISmyspace.com Akamai, Limelightwikipedia.orgyahoo.com Akamaiyoutube.com
![Page 84: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/84.jpg)
Rule: Add an Expires header (not just for images)
Images Stylesheets Scripts % Median Age
amazon.com 0/62 0/1 0/3 0% 114 daysaol.com 23/43 1/1 6/18 48% 217 dayscnn.com 0/138 0/2 2/11 1% 227 daysebay.com 16/20 0/2 0/7 55% 140 daysfroogle.google.com 1/23 0/1 0/1 4% 454 daysmsn.com 32/35 1/1 3/9 80% 34 daysmyspace.com 0/18 0/2 0/2 0% 1 daywikipedia.org 6/8 1/1 2/3 75% 1 dayyahoo.com 23/23 1/1 4/4 100% n/ayoutube.com 0/32 0/3 0/7 0% 26 days
![Page 85: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/85.jpg)
Rule: Gzip components
![Page 86: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/86.jpg)
Rule: Gzip components
• you can affect users' download times
• 90%+ of browsers support compression
![Page 87: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/87.jpg)
Gzip: not just for HTMLHTML Scripts Stylesheets
amazon.com xaol.com x some somecnn.comebay.com xfroogle.google.com x x xmsn.com x deflate deflatemyspace.com x x xwikipedia.org x x xyahoo.com x x xyoutube.com x some some
gzip scripts, stylesheets, XML, JSON (not images, PDF)
![Page 88: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/88.jpg)
![Page 89: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/89.jpg)
YUI’s Free Hosting:
• Aggregated files
• With Expires headers
• On a CDN
• Gzipped
![Page 90: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/90.jpg)
Rule: Put CSS at the top
• stylesheets block rendering in IE
• solution: put stylesheets in HEAD (per spec)
• avoids Flash of Unstyled Content
use <link> (not @import)
![Page 91: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/91.jpg)
Slowest is actually the
Fastest
![Page 92: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/92.jpg)
Rule: Choose <link> over @import
• When you use @import you override the browsers’ native performance assistance.
![Page 93: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/93.jpg)
Rule: Move scripts to the bottom
• scripts block rendering of everything below them in the page
• scripts block parallel downloads across all hostnames
![Page 94: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/94.jpg)
What about defer?
script defer attribute is not a solution
• blocks rendering and downloads in FF
• slight blocking in IE
![Page 95: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/95.jpg)
Rule: Avoid CSS expressions
Can be used to set CSS properties dynamically in IEwidth: expression( document.body.clientWidth < 600 ? “600px” : “auto” );
But problematic because expressions execute many times– mouse move, key press, resize, scroll, etc.
![Page 96: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/96.jpg)
Rule: Make JS & CSS external
Inline: bigger HTML but no HTTP request
External: cachable but extra HTTP
Variables:– page views per user (per session)– empty vs. full cache stats– component re-use
External is typically better– home pages may be an exception due to cache
behavior of browser’s startpage.
![Page 97: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/97.jpg)
Rule: Reduce DNS lookups
typically 20-120 ms
block parallel downloads
OS and browser both have DNS caches
Best practice:
Max 2-4 hosts
Use keep-alive
![Page 98: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/98.jpg)
Rule: Minify JavaScriptMinify
External?Minify Inline?
www.amazon.com no nowww.aol.com no nowww.cnn.com no nowww.ebay.com yes nofroogle.google.com yes yeswww.msn.com yes yeswww.myspace.com no nowww.wikipedia.org no nowww.yahoo.com yes yeswww.youtube.com no no
don’t forget to minify inline scripts, too
![Page 99: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/99.jpg)
Which Compressor?
• YUI Compressor is highly regarded
• web search “CompressorRater”
![Page 100: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/100.jpg)
Rule: Avoid redirects
3xx status codes – mostly 301 and 302HTTP/1.1 301 Moved PermanentlyLocation: http://yahoo.com/newuri
add Expires headers so redirect headers are cached
Redirects are worst form of blocking
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
![Page 101: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/101.jpg)
Rule: Make AJAX cacheable and small
• XHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzipped
• a personalized response should still be cacheable by that person
![Page 102: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/102.jpg)
Rule: Use GET for AJAX Requests
• POST is a two-step process.
• GET can send in one packet. Use if possible.
• Max payload is 2K in IE.
![Page 103: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/103.jpg)
Rule: Post-load Components
• Delay all non-crucial elements.
• YUI Image Loader offers precise control.
• YUI Get makes on-the-fly JS & CSS easy.
• Used on www.yahoo.com homepage.
![Page 104: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/104.jpg)
Rule: Preload Components
• Unconditional preload - all following onload
• Ex: google.com’s sprite
• Conditional preload - based on user action
• Ex: search.yahoo.com’s Search Assist
• Anticipated preload - give redesigns a boost
![Page 105: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/105.jpg)
Rule: Minimize iFrames
• Costly even if blank
• Blocks page onload
• Questionable semantic value
![Page 106: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/106.jpg)
Rule: Smart Event Handles
• Event Delegation to reduce total number
• onAvailable (etc) for earlier access
• YUI Event has onAvailable, onContentReady, & onDomReady
![Page 107: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/107.jpg)
Rule: Optimize CSS Sprites
• Horizontal alignment is usually smaller than vertical.
• Combine similar colors in a sprite to minimize color count.
• Only 256 colors can fit in a PNG8.
• Be mobile-friendly. Avoid big gaps between images. Minimal impact on k-size, but takes more memory to decompress.
![Page 108: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/108.jpg)
Rule: favicon.ico
• Always provide a favicon.ico so the request doesn’t 404
• And the request carries cookies
• Mitigate by setting an expires header,
• (but NOT forever since you can’t rename the file.)
• Keep under 1K
![Page 109: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/109.jpg)
Rule: iPhone-Friendly Tip
• iPhone will not cache assets larger than 25K
• That’s 25K uncompressed.
• http://yuiblog.com/blog/2008/02/06/iphone-cacheability/
![Page 110: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/110.jpg)
Tools for your own analysis
![Page 111: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/111.jpg)
IBM Page Detailer
Packet sniffer. Windows only (IE, FF, any .exe). Free trial, $300 license
http://alphaworks.ibm.com/tech/pagedetailer
![Page 112: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/112.jpg)
LiveHTTPHeadersView HTTP headers. Firefox
extension. Free.
![Page 113: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/113.jpg)
Firebug
• web development evolved
• inspect and edit HTML, tweak and visualize CSS, debug and profile JavaScript
• monitor network activity (caveat: caching)
• Free Firefox extension
![Page 114: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/114.jpg)
http://getfirebug.com/
![Page 115: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/115.jpg)
YSlow
• Extension for Firebug extension
• Performance report card
• HTTP/HTML summary
• List of components in the page
• Tools including JSLint
![Page 116: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/116.jpg)
![Page 117: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/117.jpg)
Conclusion
![Page 118: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/118.jpg)
Takeaways
• focus on the front-end
• harvest the low-hanging fruit
• reduce HTTP requests
• enable caching
• you do control user response times
• LOFNO – be an advocate for your users
![Page 119: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/119.jpg)
For more information:
![Page 120: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/120.jpg)
High Performance Web Sites
Essential Knowledge for Front-End Engineers
by Steve Souders, with research from Yahoo!’s
Performance Engineering team.
![Page 121: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/121.jpg)
Exceptional Performance on
YDNhttp://developer.yahoo.com/
performance
![Page 122: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/122.jpg)
Articles on YUIBlog
http://yuiblog.com/blog/category/performance
![Page 123: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/123.jpg)
Let’s keep talking...
[email protected] http://nate.koechley.com/blog “natekoechley”
Thanks again to Yahoo!’s Exceptional Performance Engineering Team
![Page 124: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/124.jpg)
Linksbook: http://www.oreilly.com/catalog/9780596514211/ examples: http://stevesouders.com/examples/ image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6 CSS sprites: http://alistapart.com/articles/sprites inline images: http://tools.ietf.org/html/rfc2397 jsmin: http://crockford.com/javascript/jsmin dojo compressor: http://dojotoolkit.org/docs/shrinksafe HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer Fasterfox: http://fasterfox.mozdev.org/LiveHTTPHeaders: http://livehttpheaders.mozdev.org/Firebug: http://getfirebug.com/ YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ http://yuiblog.com/blog/2007/04/11/performance-research-part-4/YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
![Page 125: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/125.jpg)
CC Images Used“Zipper Pocket” by jogales: http://www.flickr.com/photos/jogales/11519576/
“Need for Speed” by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/
“I wonder what flavour it is?” by blather: http://www.flickr.com/photos/deadlyphoto/411770353/
“takeout boxes from Grand Shanghai” by massdistraction: http://www.flickr.com/photos/sharynmorrow/11263821/
“takeout” by dotpolka : http://www.flickr.com/photos/dotpolka/249129144/
“ice cream cone melting/rome” by Megandavid : http://www.flickr.com/photos/megandavid/189332042/
“nikon em bokeh” by dsevilla: http://www.flickr.com/photos/dsevilla/249202834/
“maybe” by Tal Bright: http://www.flickr.com/photos/bright/118197469/
“how do they do that” by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/
“Gorgeous iceberg 7 [Le Toit du Monde]” by Adventure Addict http://www.flickr.com/photos/adventureaddict/35290307/
“molasses-spice cookies” ilmungo: http://www.flickr.com/photos/ilmungo/65345233/
“Driving is fun” by Ben McLeod: http://www.flickr.com/photos/benmcleod/59948935/
“Dozen eggs” by aeA: http://www.flickr.com/photos/raeallen/96238870/
“Max speed 15kmh” by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/
“Stairway to heaven” ognita: http://www.flickr.com/photos/ognita/503915547/
“flaps up” by http://www.flickr.com/photos/jurvetson/74274113/
“Fast Cat” by http://www.flickr.com/photos/raylopez/708023176/
![Page 126: High Performance Web Sites - 2008](https://reader036.fdocuments.in/reader036/viewer/2022081400/554a518cb4c905572f8b48e5/html5/thumbnails/126.jpg)
[email protected] http://nate.koechley.com/blog
natekoechley = twitter, delicious, flickr, tripit, last.fm, linkedin, fireeagle, friendfeed, ... everywhere.
Thanks again to Yahoo!’s Exceptional Performance Engineering Team