“Don’t make me wait”
or
Building High-Performance
Web Apps
Stoyan Stefanov, Yahoo! Voices That Matter San Francisco, June 29, 2009 http://slideshare.net/stoyan/
About me • Yahoo! Search • Yahoo! Exceptional Performance • YSlow 2.0 architect • http://smush.it • Books, articles • http://phpied.com
Importance of performance
1sec = -2.8% revenue
Importance of performance
Gets worse with time
After-effect
Importance of performance
• Yahoo!: 400 ms slower = 5-9% drop in full-page traffic
Importance of performance
Slower pages get less traffic
Importance of performance
From 4-6 seconds to 1.5 seconds
Importance of performance
• Psychology, physiology • Effects of waiting • “Time is money” • Make people happy
Importance of performance
• SEO • Speed is a ranking factor
Ashton Kutcher’s Twitter
First visit, empty cache
10% 90%
Repeat visit, full cache
38% 62%
Front-end performance
• Where 80% time is spent • Easier • Works
The Waterfall
1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early
The Waterfall
1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early
Fewer components
• HTTP requests are expensive • Combine components
The Golden Rule:
Reduce the number of HTTP requests
Fewer components
• Before:
<script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script>
Fewer components
• After:
<script src="all.js" type="text/javascript">
</script>
Fewer components
• Saved 3 HTTP requests
Fewer components
• repeat for CSS:
<link href="all.css" rel="stylesheet" type="text/css"
/>
Fewer components
• CSS sprites for background images
background-position: -22px -0px;width: 12px;height: 10px;
Fewer components
CSS sprites • Before: 15 requests, 6.8 K • After: 1 request, 1.4 K
Fewer components
• CSS sprites are a pain but there are tools
http://csssprites.com/
Less stuff – duh!
• No 404s • No duplicates • No near-duplicates
Near duplicates
• 30x30 vs. 49x49
• Rounded corners, shadows
The Waterfall
1. Less stuff ✔ 2. Smaller stuff 3. Out of the way 4. Start early
The Waterfall
1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early
Gzip
• Server compression
Gzip
• What to gzip?
HTML, XHTML, XML, W00TChaMaCallitML, CSS, JS, JSON, HTC,
plain text… all but binary
fonts too
Gzip
• How to gzip?
AddOutputFilterByType DEFLATE text/html text/…
http://www.sitepoint.com/article/web-site-optimization-steps
Minify
• YUI Compressor • Minifies both JS and CSS
http://developer.yahoo.com/yui/compressor/http://tools.w3clubs.com/cssmin/
Gzip or minification?
• 62,885 bytes - jQuery
• 31,822 - minified • 19,758 - original gzipped
• 10,818 - minified and gzipped
http://www.julienlecomte.net/blog/2007/08/13/
FTW
Gzip + minification
• Filesize reduction: - 85% for JavaScript - 80% for CSS • Almost a crime if you don’t
Optimizing image file sizes
Now lossless
Rule #1: No GIFs
$ optipng *.gif
PNG-8
• Palette image (like GIF) • 256 colors (like GIF) • Smaller than GIF • Alpha transparency
Rarely PNG-24
• Truecolor
OptiPNG
PNGOut
PNGCrushPNGRewrite
DeflOpt
PNGOptimizer
AdvPNG
PNGSlim
JPEG
• The format for photos • Run through JPEGTran
Study of the images on the top
1000 sites Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?
Top 1000 – GIF vs. PNG?
GIF 73%
Animated GIF 3%
PNG 24%
Top 1000 – GIF vs. PNG vs. JPG?
GIF 40%
Animated GIF 1% PNG
13%
JPEG 46%
Top 1000 – GIF to PNG
$ optipng *.gif$ pngoptimizercl –file:"*.png”(1 min/1000 files)
23.79% savings
http://www.youtube.com/watch?v=bPdkWJe9XH0
Top 1000 – Optimizing PNG
$ pngoptimizercl –file:"*.png"
16.90% savings
Top 1000 – Optimizing JPG
$ jpegtran –copy none -optimize
13.08% savings
Images – progressive JPEG
• for images ~10K+
Images
• It’s only human to forget • Best to have a process so
you don’t have to remember
Web Fonts
• Don’t go overboard!• Subset • Gzip!
http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot
The Waterfall
1. Less stuff ✔ 2. Smaller stuff ✔ 3. Out of the way 4. Start early
The Waterfall
1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early
Free-falling waterfalls
• Serve components from not more than 2-4 domains
• Fewer redirects
JavaScript rocks!
• But also blocks
html
js
png
png
JavaScript at the bottom
html
js
png
png
Non-blocking JavaScript
• Asynchronous JavaScript
var js = document.createElement('script'); js.src = 'myscript.js'; var h = document.getElementsByTagName('head')[0]; h.appendChild(js);
html
js
png
png
The Waterfall
1. Less stuff ✔ 2. Smaller stuff ✔ 3. Out of the way ✔ 4. Start early
The Waterfall
1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early
flush() early
html
png
js
css
html
png
js
css
✔
flush() <html><head> <script src="my.js"
type="text/javascript"></script> <link href="my.css"
type="text/css" rel="stylesheet" /></head>
<body> ....
<?php flush() ?>
Progressive rendering Chunk #1
Chunk #2
Chunk #3
Progressive + source order 1
2 3
4
The Waterfall
1. Less stuff ✔ 2. Smaller stuff ✔ 3. Out of the way ✔ 4. Start early ✔
Waterfall view
Firebug Net Panel
Web Inspector
Fiddler, HTTPWatch, WebPageTest.com
YSlow
• Firebug extension
• Why (is my page) slow?
http://developer.yahoo.com/yslow/
YUICompressor Desktop
What not to say…
• “Everyone is on high-speed these days” • “It’s all in the cache”
Speed matters
• It affects the user happiness • It affects the bottom line • It affects search engine rankings
Front-end
• That’s where the time is spent • Good news: - we control it - cheap
Thank you!
Stoyan Stefanov @stoyanstefanov http://www.phpied.com