After YSlow "A"

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

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

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

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

List of 14 best practices (updated)

Make Fewer HTTP Requests

Use a Content Delivery Network

Add Expires header (or Cache-control)

Gzip Components

Put CSS at the Top

Move Scripts to the Bottom (inline too)

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS (inline too)

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

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

After YSlow “A”: 20 more best practices

After YSlow "A"?

tag: server

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

tag: content

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

Post-load components

onload.js and onload.css

Progressive enhancement

Case study: yahoo.com

Preload components

Preload items you'll need in the future:

Unconditional preload (google.com loads a sprite onload)

Conditional preload (search.yahoo.com after you type in the input box)

Anticipated preload – preload in advance before launching a redesign

Preload - Unconditional

Example:

Preload - Conditional

Example: search.yahoo.com

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.

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)

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

tag: javascript

Develop smart event handlers

tag: css

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!

Avoid AlphaImageLoader

Best Solution: Avoid completely, use gracefully degrading PNG8.

Fallback: use underscore hack so as not to penalize IE7+ users.

_filter

Avoid filters

Yahoo! Search saved 50-100ms for users of IE5&6

tag: images

Hmm, images?

Q: Is this really important?

A: Let’s survey the

global top 10 sites.

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%

GIF-to-PNG Average 20.42% savings LOSSLESS!

Crush PNG Average 16.05% savings LOSSLESS!

Strip JPEG metadata Average 11.85% savings LOSSLESS!

Optimize images

Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png

Crush all PNGs > pngcrush image.png –rem alla –reduce result.png

Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Case study: Google charts API 1 2 3

Case study: Google charts API 1 2 3 Original (707 colors)

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?)

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?!

Optimize CSS sprites

Combine similar colors

Keep color count low (<256) to fit in a PNG8

“ Be mobile-friendly” – don’t leave big gaps

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?

tag: mobile

Mobile Performance Research Reduce the size of each component to 25 Kb or less. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone

URLs – Exceptional Performance

YUI 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

URLs (contd.)

"When the Cookie Crumbles" Tenni Theurer, Steve Souders

http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

"Maximizing Parallel Downloads in the Carpool Lane", Tenni Theurer, Patty Chi

http://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/

Credits – thank you!

Take-home

Focus on the front-end

Optimize images

Be relentlessly user focused

Every feature has a cost

Start early!

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