after yslow "a"
DESCRIPTION
YDN Tech talk given on 6/26/2008TRANSCRIPT
![Page 1: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/1.jpg)
Page 1
After YSlow “A”:
20 more ideas for improving the user experience
Nicole Sullivan
http://www.stubbornella.org
Stoyan Stefanov
http://www.phpied.com
http://developer.yahoo.com/performance
![Page 2: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/2.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/3.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/4.jpg)
Page 4
![Page 5: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/5.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/6.jpg)
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"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/7.jpg)
Page 7
After YSlow “A”:20 more best practices
![Page 8: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/8.jpg)
Page 8
After YSlow "A"?
![Page 9: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/9.jpg)
Page 9
After YSlow "A"?
![Page 10: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/10.jpg)
Page 10
tag: server
![Page 11: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/11.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/12.jpg)
Page 12
tag: content
![Page 13: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/13.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/14.jpg)
Page 14
Post-load components
• onload.js and onload.css• Progressive enhancement
• Case study: yahoo.com
![Page 15: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/15.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/16.jpg)
Page 16
Preload - Unconditional
• Example:
![Page 17: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/17.jpg)
Page 17
Preload - Conditional
• Example: search.yahoo.com
![Page 18: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/18.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/19.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/20.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/21.jpg)
Page 21
tag: javascript
![Page 22: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/22.jpg)
Page 22
Develop smart event handlers
![Page 23: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/23.jpg)
Page 23
tag: css
![Page 24: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/24.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/25.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/26.jpg)
Page 26
Avoid filters
Yahoo! Search saved 50-100ms for users of IE5&6
![Page 27: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/27.jpg)
Page 27
tag: images
![Page 28: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/28.jpg)
Hmm, images?
Q: Is this really important?A: Let’s survey the
global top 10 sites.
![Page 29: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/29.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/30.jpg)
Page 30
GIF-to-PNG
Average
20.42%savings
LOSSLESS!
![Page 31: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/31.jpg)
Page 31
Crush PNG
Average
16.05%savings
LOSSLESS!
![Page 32: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/32.jpg)
Page 32
Strip JPEG metadata
Average
11.85%savings
LOSSLESS!
![Page 33: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/33.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/34.jpg)
Page 34
Case study: Google charts API
11 22 33
![Page 35: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/35.jpg)
Page 35
Case study: Google charts API
11 22 33
Original (707 colors)
![Page 36: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/36.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/37.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/38.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/39.jpg)
Page 39
Optimize sprites
Horizontal may be smaller
![Page 40: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/40.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/41.jpg)
Page 41
tag: mobile
![Page 42: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/42.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/43.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/44.jpg)
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: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/45.jpg)
Page 45
Credits – thank you!
![Page 46: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/46.jpg)
Page 46
Take-home
• Focus on the front-end• Optimize images• Be relentlessly user focused
• Every feature has a cost• Start early!
![Page 47: After YSlow "A"](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7a4004a79591d4a8b49fe/html5/thumbnails/47.jpg)
Page 47
Thank you!
Nicole Sullivan
http://www.stubbornella.org
Stoyan Stefanov
http://www.phpied.com
http://developer.yahoo.com/performance