Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Make your users happy

• Users care if sites are fast.
• I can’t give you the solution
• I can help you understand the pro...
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 outsi...
9 Best Practices
1. Create a component         5. Avoid non-standard
   library of smart objects      browser fonts.

2. U...
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 head...
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 ...
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 a...
How about an
  example?
  Personal finance
3
    Design modules to be
         transparent
           on the inside.
Contour blocks       Background blocks       Content Objects -
                                         headings, paragrap...
Making it look
                 fab
        Requires careful choice of pixels.



               Bonus: Consider PNG8 for
...
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. H...
9 Image Optimizations
1. Combine like colors      6. Reduce anti-aliased pixels -
                               via size ...
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...
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. Fal...
Progressively
enhanced PNG8
Build a binary transparency image.
  In Fireworks, add a few alpha
        transparent pixels.
IE6




                                          Firefox
                                          Opera
                ...
Experimental Data
  Removing Alpha Image Loader



                            100ms
                            Yahoo! se...
Crush images

Step 1: Quality, Designer chooses quality (e.g. via save
for the web)
Step 2: Non-lossy compression to squea...
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: ...
Thanks!
Nate Koechley - YUI. High Performance
Websites:
✴   http://www.slideshare.net/natekoechley/high-performance-web-si...
Let’s keep talking...
 http://developer.yahoo.com/performance/
           http://stubbornella.org
          nicole@stubbor...
1 Create a component library
1 Create a component library
1 Create a component library
1 Create a component library
1 Create a component library
1 Create a component library
1 Create a component library
1 Create a component library
Upcoming SlideShare
Loading in …5
×

of

Design Fast Websites Slide 1 Design Fast Websites Slide 2 Design Fast Websites Slide 3 Design Fast Websites Slide 4 Design Fast Websites Slide 5 Design Fast Websites Slide 6 Design Fast Websites Slide 7 Design Fast Websites Slide 8 Design Fast Websites Slide 9 Design Fast Websites Slide 10 Design Fast Websites Slide 11 Design Fast Websites Slide 12 Design Fast Websites Slide 13 Design Fast Websites Slide 14 Design Fast Websites Slide 15 Design Fast Websites Slide 16 Design Fast Websites Slide 17 Design Fast Websites Slide 18 Design Fast Websites Slide 19 Design Fast Websites Slide 20 Design Fast Websites Slide 21 Design Fast Websites Slide 22 Design Fast Websites Slide 23 Design Fast Websites Slide 24 Design Fast Websites Slide 25 Design Fast Websites Slide 26 Design Fast Websites Slide 27 Design Fast Websites Slide 28 Design Fast Websites Slide 29 Design Fast Websites Slide 30 Design Fast Websites Slide 31 Design Fast Websites Slide 32 Design Fast Websites Slide 33 Design Fast Websites Slide 34 Design Fast Websites Slide 35 Design Fast Websites Slide 36 Design Fast Websites Slide 37 Design Fast Websites Slide 38 Design Fast Websites Slide 39 Design Fast Websites Slide 40 Design Fast Websites Slide 41 Design Fast Websites Slide 42 Design Fast Websites Slide 43 Design Fast Websites Slide 44 Design Fast Websites Slide 45 Design Fast Websites Slide 46 Design Fast Websites Slide 47 Design Fast Websites Slide 48 Design Fast Websites Slide 49 Design Fast Websites Slide 50 Design Fast Websites Slide 51 Design Fast Websites Slide 52 Design Fast Websites Slide 53 Design Fast Websites Slide 54 Design Fast Websites Slide 55 Design Fast Websites Slide 56 Design Fast Websites Slide 57 Design Fast Websites Slide 58 Design Fast Websites Slide 59 Design Fast Websites Slide 60 Design Fast Websites Slide 61 Design Fast Websites Slide 62 Design Fast Websites Slide 63 Design Fast Websites Slide 64 Design Fast Websites Slide 65 Design Fast Websites Slide 66 Design Fast Websites Slide 67 Design Fast Websites Slide 68 Design Fast Websites Slide 69
Upcoming SlideShare
The Designer Startup
Next

140 Likes

Share

1 Create a component library Design Fast Websites

1
Create a component
library
of smart objects

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • ErinWebb13

    Nov. 23, 2021
  • alanho

    Mar. 16, 2018
  • ErwinsonMesa

    Aug. 12, 2015
  • chjin

    Oct. 15, 2014
  • chande1

    Jan. 7, 2014
  • rerebelo

    Oct. 27, 2013
  • rossboardman

    Sep. 29, 2013
  • tiffyzsmile

    Sep. 22, 2013
  • phatchareephanthong

    Jul. 1, 2013
  • vamshid79

    Jun. 22, 2013
  • artisan_pro

    May. 20, 2013
  • suningzhang

    Apr. 24, 2013
  • linuxbook

    Apr. 11, 2013
  • qdelance

    Apr. 10, 2013
  • heejeongp

    Feb. 4, 2013
  • Cristina_Blanaru

    Dec. 3, 2012
  • oriolfb

    Nov. 6, 2012
  • sushiboy

    Jun. 21, 2012
  • slideterbaik

    May. 2, 2012
  • OmPrakahPrasad

    Apr. 21, 2012

1 Create a component library of smart objects

Views

Total views

109,363

On Slideshare

0

From embeds

0

Number of embeds

3,712

Actions

Downloads

0

Shares

0

Comments

0

Likes

140

×