NICOLE SULLIVAN
Design Fast Websites
don’t blame the rounded corners!

Exceptional Performance
at Yahoo!

Quantify and improve the
performance of all Yahoo!
products worldwide

Y! Performance Research
Engineering Team
Nicole Sullivan, Anande Kishore (intern),
Stoyan Stefanov, Philip Tellis, Swapnil Shinde

Make your users happy
• Users care if sites are fast.
• I can’t give you the solution
• I can help you understand the problem.

Why talk about
performance?

1: Because fast is better

2: Because sites are bigger

Modern web sites &
applications have changed
architecturally.

From 2003 to 2008:
97K to 312K.
25.7 to 49.9 objects.

In past 12 months, Top 1000 sites:
From 250K to 310.4K.
WebSiteOptimization.com/speed/tweak/average-web-page

3: Time is money

+100 ms

Amazon:1% drop in sales
+100 ms

+400 ms

Yahoo!: 5-9% drop in
full-page traffic
+400 ms

+500 ms

Google: 20% fewer
searches
+500 ms

Users care about
performance!

Performance Fruit
(some low, some high)

Web Dev Philosophy
• Work out of respect for the design.
• Designers make our code as beautiful and
clever on the outside as it is on the inside.
• Respect the original design vision.
consistent design = clean code = fast site.

9 Best Practices
1. Create a component 5. Avoid non-standard
library of smart objects browser fonts.
2. Use consistent semantic 6. Use columns rather than
styles rows.
3. Design modules to be 7. Choose your bling
transparent on the carefully.
inside.
8. Be flexible.
4. Optimize images and
sprites. 9. Learn to love grids.

1
Create a component
library
of smart objects

Components
are like legos
Mix and match to create diverse
and interesting pages.

Site-wide legos:
• Headings
• Lists (e.g. action list, external link list,
product list, or feature list)
• Module headers and footers
• Grids
• Buttons
• Anything else that should be consistent
site-wide.

Reusing elements
makes them
performance “freebies”

Legos first
Design individual pages only once all the legos have
been defined.

Avoid redundancy

Nearly identical
modules
Headings 3 and 5 are too similar.

Rule of thumb:
If two modules look too similar to include on
the same page, they are too similar to include
together in a site, choose one!

2
Use consistent
semantic styles

A Heading should not become a Heading
in another part of the page.

Consistent site-wide

Consistency
Writing more rules to overwrite
the crazy rules from before.
e.g. Heading should behave
predictably in any module.

How about an
example?
Personal finance

3
Design modules to be
transparent
on the inside.

Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
1:n

Making it look
fab
Requires careful choice of pixels.
Bonus: Consider PNG8 for
progressive enhancement
http://alistapart.com/articles/mountaintop/

Pitfalls
Variable or gradient
backgrounds.

4
Optimize images and
sprites

Optimize sprites
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?

9 Image Optimizations
1. Combine like colors 6. Reduce anti-aliased pixels -
via size and alignment
2. Avoid whitespace
7. Avoid diagonal gradients
3. Horizontal better than
vertical 8. Avoid alpha transparency
4. Limit colors 9. Change gradient color
every 2-3 pixels
5. Optimize individual
images, then sprite

Careful with Logos
Very recognizable so small changes will be noticed
more easily.

Try progressively
enhanced PNG8

Avoid filters
Why is the AlphaImageLoader used?
IE6 and earlier don’t natively support alpha
transparency. This filter forces that support.

Problem with filters
• Blocks rendering, freezes the browser
• Increased memory consumption
• Per element, not per image!

Solution: Avoid
AlphaImageLoader
1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7
2. Fallback: use underscore hack so the filter is applied only to IE < 7
#elem {
background: url(some.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='some.png', sizingMethod='crop');
}

Progressively
enhanced PNG8
Build a binary transparency image.
In Fireworks, add a few alpha
transparent pixels.

IE6
Firefox
Opera
IE7+
Safari
Good browsers get more
And the dinosaurs get an acceptable fallback

Experimental Data
Removing Alpha Image Loader
100ms
Yahoo! search

Crush images
Step 1: Quality, Designer chooses quality (e.g. via save
for the web)
Step 2: Non-lossy compression to squeak the last
bytes out of the image.

demo
http://smushit.com

5
Avoid non-standard
browser fonts.

6
Use columns
rather than rows.

7 Choose your bling
carefully.
Consider your market and users.

8
Be flexible.
Extensible height and width.

• Grids control width
• Content controls height

9
Learn to love grids.

Flickr Photo Credits:
• idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/
• lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/
• Gimli_36: http://www.flickr.com/photos/navillot/1878124531/
• NathanFromDeVryEET: http://www.flickr.com/photos/
thatguyfromcchs08/2300190277/
• Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/
set-72057594060779001/

Thanks!
Nate Koechley - YUI. High Performance
Websites:
✴ http://www.slideshare.net/natekoechley/high-performance-web-sites-2008
Yahoo! Exceptional Performance Team:
✴ http://developer.yahoo.com/performance/
A list apart:
✴ http://alistapart.com/articles/mountaintop/
Tom Chi - Yahoo! Search

Let’s keep talking...
http://developer.yahoo.com/performance/
http://stubbornella.org
nicole@stubbornella.org
“stubbornella” on the web... twitter, dopplr,
everywhere...