Post on 15-Jan-2015
description
Page 1
After YSlow “A”:
20 more ideas for improving the user experience
Nicole Sullivan
nicolesl@yahoo-inc.com
http://www.stubbornella.org
Stoyan Stefanov
stoyan@yahoo-inc.com
http://www.phpied.com
http://developer.yahoo.com/performance
Page 2
The sluggish Web
• 500 ms slower = 20% drop in traffic (Google)• 400ms slower = 5-9% drop in full-page traffic (Yahoo!)
*• 100 ms slower = 1% drop in sales (Amazon)
* Users leaving before the page finishes loading
Page 3
Exceptional Performance at Yahoo!
Quantify and improve the performance of all Yahoo! products worldwide
• Center of expertise• Build tools, analyze data• Gather, research, and evangelize best practices -
internally and externally• YSlow
Page 4
Page 5
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 6
List of 14 best practices (updated)1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add Expires header (or Cache-control)4. Gzip Components5. Put CSS at the Top6. Move Scripts to the Bottom (inline too)7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript and CSS (inline too)11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX Cacheable
http://developer.yahoo.com/performance/rules.html
content
server
server
server
server
javascript
javascript
javascript
javascript
content
css
css
css
css
content
content
Page 7
After YSlow “A”:20 more best practices
Page 8
After YSlow "A"?
Page 9
After YSlow "A"?
Page 10
tag: server
Page 11
Flush the buffer early
• Let the browser start fetching components while your backend is busy– PHP function <?php flush(); ?>– Best for busy backends / light
frontends
• Case Study: Yahoo! Search
Components download in parallel with HTML
Page 12
tag: content
Page 13
Post-load components
Ask yourself: what's absolutely required in order to render the page initially?
• The rest can wait (drag and drop, animations, hidden content, images below the fold)
• JavaScript is ideal candidate for splitting
• YUI Image Loader• YUI Get Utility
Page 14
Post-load components
• onload.js and onload.css• Progressive enhancement
• Case study: yahoo.com
Page 15
Preload components
Preload items you'll need in the future:
1. Unconditional preload (google.com loads a sprite onload)
2. Conditional preload (search.yahoo.com after you type in the input box)
3. Anticipated preload – preload in advance before launching a redesign
Page 16
Preload - Unconditional
• Example:
Page 17
Preload - Conditional
• Example: search.yahoo.com
Page 18
Preload - Anticipated
“The redesign is cool, but it’s so slow!”
• Of course it’s slow: – 100% of page views are with an empty cache.
• New Feature or full redesign?– Preload components before launch; – users will already have a primed cache when you go
live.
Page 19
Reduce DOM elements
• World's fastest page? about:blank!• Risks:
– More bytes to download– Slower DOM access in JavaScript– Semantically incorrect markup (like nested
tables or abusing <div>s)
Page 20
Reduce DOM elements
• Recommendations:– Use semantic markup– Use YUI's reset.css, fonts.css, grids.css– Easy to test, just type in Firebug’s console:
• document.getElementsByTagName('*').length
• yahoo.com is a busy page and still under 700 HTML elements
Page 21
tag: javascript
Page 22
Develop smart event handlers
Page 23
tag: css
Page 24
Avoid filters – AlphaImageLoader• Why is the AlphaImageLoader used?
– IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
• Problems:– Blocks rendering, freezes the browser– Increased memory consumption – Per element, not per image!
Page 25
Avoid AlphaImageLoader
Best Solution: Avoid completely, use gracefully degrading PNG8.
Fallback: use underscore hack so as not to penalize IE7+ users._filter
Page 26
Avoid filters
Yahoo! Search saved 50-100ms for users of IE5&6
Page 27
tag: images
Hmm, images?
Q: Is this really important?A: Let’s survey the
global top 10 sites.
Page 29
What % of page weight is images?
Average
45.6%
1 Yahoo! 29%
2 Google 75%
3 YouTube 62%
4 Live.com 64%
5 MSN 41%
6 MySpace 48%
7 Wikipedia 39%
8 Facebook 35%
9 Blogger 27%
10 Yahoo! JP 36%
Page 30
GIF-to-PNG
Average
20.42%savings
LOSSLESS!
Page 31
Crush PNG
Average
16.05%savings
LOSSLESS!
Page 32
Strip JPEG metadata
Average
11.85%savings
LOSSLESS!
Page 33
Optimize images
1. Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png
2. Crush all PNGs > pngcrush image.png –rem alla –reduce result.png
3. Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg
Page 34
Case study: Google charts API
11 22 33
Page 35
Case study: Google charts API
11 22 33
Original (707 colors)
Page 36
Case study: Google charts API
Original (1408 colors)
Crushed (1408 colors)
PNG8 (256 colors)
25% saving 55% saving
(1000+ colors are lost but who can tell?)
Page 37
Optimize images
• All sites can optimize images
• Which (former) presidential candidate had over 200K of useless image information sent over the wire for a single page?!
Page 38
Optimize CSS sprites
• Combine similar colors • Keep color count low (<256) to fit in a PNG8• “Be mobile-friendly” – don’t leave big gaps
Page 39
Optimize sprites
Horizontal may be smaller
To sprite or not to sprite?
• 1. How many pages does your property have?• 2. Is your site modular? (hint: it should be!)• 3. How much time can your team spend on site
maintenance?
Page 41
tag: mobile
Page 42
Mobile Performance Research
Reduce the size of each component to 25 Kb or less.
http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone
Page 43
URLs – Exceptional PerformanceYUI blog
http://yuiblog.com/blog/category/performance/
YDN (Yahoo Developer Network)
http://developer.yahoo.com/performance/
YDN blog
http://developer.yahoo.net/blog/archives/performance/
Mailing list (Yahoo! Group)
http://tech.groups.yahoo.com/group/exceptional-performance/
Feedback
http://developer.yahoo.com/yslow/feedback.html
Page 44
URLs (contd.)
• "When the Cookie Crumbles" Tenni Theurer, Steve Soudershttp://yuiblog.com/blog/2007/03/01/performance-research-part-3/
• "Maximizing Parallel Downloads in the Carpool Lane", Tenni Theurer, Patty Chihttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/
• YUI Image Loader (http://developer.yahoo.com/yui/imageloader/)• YUI Get (http://developer.yahoo.com/yui/get/)• YUI Compressor (http://developer.yahoo.com/yui/compressor/
contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/)
• JSMin (http://www.crockford.com/javascript/jsmin.html)• "High-performance AJAX applications" Julien Lecompte
http://yuiblog.com/blog/2007/12/20/video-lecomte/• Yahoo! engineer Michael J. Radwin talk back in 2004
http://www.radwin.org/michael/talks/
Page 45
Credits – thank you!
Page 46
Take-home
• Focus on the front-end• Optimize images• Be relentlessly user focused
• Every feature has a cost• Start early!
Page 47
Thank you!
Nicole Sullivan
nicolesl@yahoo-inc.com
http://www.stubbornella.org
Stoyan Stefanov
stoyan@yahoo-inc.com
http://www.phpied.com
http://developer.yahoo.com/performance