![Page 1: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/1.jpg)
High Performance Web Sites14 rules for faster pages
Steve SoudersChief Performance Yahoo!
![Page 2: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/2.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 3: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/3.jpg)
The Importance of Frontend Performance
Backend =
5%Frontend =
95%
Even primed cache, frontend = 88%
![Page 4: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/4.jpg)
Time Spent on the Frontend
95%97%youtube.com88%95%yahoo.com88%80%wikipedia.org86%96%myspace.com95%97%msn.com64%86%google.com92%98%ebay.com92%81%cnn.com86%94%aol.com86%82%amazon.com
Primed CacheEmpty Cache
![Page 5: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/5.jpg)
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
![Page 6: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/6.jpg)
Performance Research
![Page 7: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/7.jpg)
Browser Cache Experiment
Add an image to the page:Expires: Thu, 15 Apr 2004 20:00:00 GMT
Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT
# users with at least one 200 response
total # unique users
Percentage of users with an empty cache?
Percentage of page views with an empty
cache?
# of 200 responsestotal # responses
![Page 8: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/8.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
Browser Cache Expt Results
page views withempty cache
40-60% ~20%
users withempty cache
![Page 9: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/9.jpg)
Experiment Takeaways
The empty cache user experience is more prevalent than you think!
Optimize for both primed cache and empty cache experience.
![Page 10: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/10.jpg)
14 Rules
![Page 11: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/11.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 12: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/12.jpg)
Rule 1: Make fewer HTTP requests
CSS sprites
combined scripts, combined stylesheets
image maps
inline images
![Page 13: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/13.jpg)
CSS Sprites
size of combined image is less
http://alistapart.com/articles/sprites
<span style="background-image: url('sprites.gif');background-position: -260px -90px;">
</span>
![Page 14: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/14.jpg)
Rule 2: Use a CDN
distribute your static content before distributing your dynamic content
youtube.com
Akamaiyahoo.com
wikipedia.org
Akamai, Limelightmyspace.com
SAVVISmsn.com
google.com
Akamai, Mirror Imageebay.com
cnn.com
Akamaiaol.com
Akamaiamazon.com
![Page 15: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/15.jpg)
Rule 3: Add an Expires header not just for images
26 days0%0/70/30/32youtube.com
100%
75%
0%
80%
4%
55%
1%
48%
0%
% with Expires
n/a4/41/123/23yahoo.com
1 day2/31/16/8wikipedia.org
1 day0/20/20/18myspace.com
34 days3/91/132/35msn.com
454 days0/10/11/23froogle.google.com
140 days0/70/216/20ebay.com
227 days2/110/20/138cnn.com
217 days6/181/123/43aol.com
114 days0/30/10/62amazon.com
Median AgeScriptsStylesheetsImages
![Page 16: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/16.jpg)
Rule 4: Gzip components
you can affect users' download times
90%+ of browsers support compression
![Page 17: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/17.jpg)
Gzip: not just for HTML
somesomexyoutube.com
xxxyahoo.com
xxxwikipedia.org
xxxmyspace.com
deflatedeflatexmsn.com
xxxfroogle.google.com
xebay.com
cnn.com
somesomexaol.com
xamazon.com
StylesheetsScriptsHTML
gzip scripts, stylesheets, XML, JSON (not images, PDF)
![Page 18: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/18.jpg)
Rule 5: Put stylesheets 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 19: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/19.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
script defer attribute is not a solution– blocks rendering and downloads in FF– slight blocking in IE
![Page 20: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/20.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.
alternatives:– one-time expressions– event handlers
![Page 21: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/21.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
extra credit: post-onload download, dynamic inlining
![Page 22: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/22.jpg)
Rule 9: Reduce DNS lookups
typically 20-120 ms
block parallel downloads
OS and browser both have DNS caches
![Page 23: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/23.jpg)
minify inline scripts, too
Rule 10: Minify JavaScript
no
yes
no
no
yes
yes
yes
no
no
no
Minify External?
nowww.youtube.com
yeswww.yahoo.com
nowww.wikipedia.org
nowww.myspace.com
yeswww.msn.com
yesfroogle.google.com
nowww.ebay.com
nowww.cnn.com
nowww.aol.com
nowww.amazon.com
Minify Inline?
![Page 24: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/24.jpg)
Minify vs. ObfuscateDojo SavingsJSMin SavingsOriginal
21K (25%)17K (21%)85KAverage
10K (29%)8K (22%)34Kwww.youtube.com
16K (38%)14K (34%)42Kwww.wikipedia.org
24K (28%)23K (27%)88Kwww.myspace.com
24K (25%)19K (20%)98Kwww.cnn.com
4K (10%)4K (10%)44Kwww.aol.com
48K (24%)31K (15%)204Kwww.amazon.com
minify – it's safer
http://crockford.com/javascript/jsmin
http://dojotoolkit.org/docs/shrinksafe
not much difference
![Page 25: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/25.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
![Page 26: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/26.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 27: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/27.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 304ETag format
– Apache: inode-size-timestamp– IIS: Filetimestamp:ChangeNumber
Remove them– Apache: FileETag none– IIS: http://support.microsoft.com/kb/922703/
![Page 28: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/28.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 29: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/29.jpg)
Case Studies
![Page 30: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/30.jpg)
Case Study:
move JS to onloadremove bottom tabsavoid redirectsimages spriteshost JS on CDNcombine JS files
1/25/06 3/25/07
40-50%40-50%
![Page 31: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/31.jpg)
Evangelism
BookHigh Performance Web Sites
ConferencesYahoo! F2E SummitWeb 2.0 ExpoRich Web Experience
BlogsYUI Blog: http://yuiblog.com/blog/category/performance
YDN Blog: http://developer.yahoo.com/performance/
Open Source YSlow
OSConAjax ExperienceBlogherFuture of Web Apps
![Page 32: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/32.jpg)
YSlow
performance lint tool
grades web pages for each rule
Firefox add-on integrated with Firebug
released this week on YDN!
open source license
![Page 33: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/33.jpg)
![Page 34: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/34.jpg)
Ten Top U.S Web Sites
139K
178K
106K
205K
221K
18K
275K
502K
182K
405K
Page Weight
9.6 sec
5.9 sec
6.2 sec
7.8 sec
9.3 sec
1.7 sec
9.6 sec
22.4 sec
11.5 sec
15.9 sec
Response Time
Dwww.youtube.com
Awww.yahoo.com
Cwww.wikipedia.org
Dwww.myspace.com
Fwww.msn.com
Afroogle.google.com
Cwww.ebay.com
Fwww.cnn.com
Fwww.aol.com
Dwww.amazon.com
YSlow Grade
![Page 35: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/35.jpg)
Strong Correlation
total page weightresponse time
inverse YSlow grade
correlation(resp time, page weight) = 0.94correlation(inverse YSlow, resp time) = 0.76
correlation(inverse YSlow, page weight) = 0.59
![Page 36: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/36.jpg)
Live Analysis
![Page 37: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/37.jpg)
Ajax Effects
the rules still apply
more Ajax rules are in the works
JS execution is a bigger factor
user expectations are higher
need to start off on the right foot
YSlow will be extended to track XHR, JSON
![Page 38: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/38.jpg)
Takeaways
focus on the frontend
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 39: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/39.jpg)
Steve [email protected]
![Page 40: High Performance Web Sites - TechTargetajaxexperience.techtarget.com/images/Presentations/... · 2007-08-01 · High Performance Web Sites 14 rules for faster pages Steve Souders](https://reader033.vdocuments.net/reader033/viewer/2022041911/5e6793f865677e12136c866b/html5/thumbnails/40.jpg)
CC Images Used"Need for Speed" by Amnemona:
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/"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/"Robert's Legion" by dancharvey:
http://www.flickr.com/photos/dancharvey/2647529/"thank you" by nj dodge:
http://flickr.com/photos/nj_dodge/187190601/"new briefcase" by dcJohn:
http://www.flickr.com/photos/dcjohn/85504455/