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...
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Upcoming SlideShare
Loading in...5
×

Design Fast Websites

70,188

Published on

don't blame the rounded corners!

Yahoo! F2E Summit 2008

Published in: Technology, Design
9 Comments
140 Likes
Statistics
Notes
  • Hi. Your post is very good and my familly like your writing style. I think you can go to my blog and? and i dont how to RECIVE. Great 4 you! attwetyaa
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • where am i able to locate a copy of this?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • so nice...can u send me download link to mp_dineshkumar@yahoo.co.in
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • excellent presentation, thanks for the learning...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • It's a great presentation Thx Y! performance team
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
70,188
On Slideshare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
0
Comments
9
Likes
140
Embeds 0
No embeds

No notes for slide

Design Fast Websites

  1. 1. NICOLE SULLIVAN Design Fast Websites don’t blame the rounded corners!
  2. 2. Exceptional Performance at Yahoo!
  3. 3. Quantify and improve the performance of all Yahoo! products worldwide
  4. 4. Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde
  5. 5. Make your users happy • Users care if sites are fast. • I can’t give you the solution • I can help you understand the problem.
  6. 6. Why talk about performance?
  7. 7. 1: Because fast is better
  8. 8. 2: Because sites are bigger
  9. 9. Modern web sites & applications have changed architecturally.
  10. 10. From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.
  11. 11. In past 12 months, Top 1000 sites: From 250K to 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  12. 12. 3: Time is money
  13. 13. +100 ms
  14. 14. Amazon:1% drop in sales +100 ms
  15. 15. +400 ms
  16. 16. Yahoo!: 5-9% drop in full-page traffic +400 ms
  17. 17. +500 ms
  18. 18. Google: 20% fewer searches +500 ms
  19. 19. Users care about performance!
  20. 20. Performance Fruit (some low, some high)
  21. 21. 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.
  22. 22. 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.
  23. 23. 1 Create a component library of smart objects
  24. 24. Components are like legos Mix and match to create diverse and interesting pages.
  25. 25. 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.
  26. 26. Reusing elements makes them performance “freebies”
  27. 27. Legos first Design individual pages only once all the legos have been defined.
  28. 28. Avoid redundancy
  29. 29. Nearly identical modules Headings 3 and 5 are too similar.
  30. 30. 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!
  31. 31. 2 Use consistent semantic styles
  32. 32. A Heading should not become a Heading in another part of the page.
  33. 33. Consistent site-wide
  34. 34. Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  35. 35. How about an example? Personal finance
  36. 36. 3 Design modules to be transparent on the inside.
  37. 37. 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
  38. 38. Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/
  39. 39. Pitfalls Variable or gradient backgrounds.
  40. 40. 4 Optimize images and sprites
  41. 41. 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?
  42. 42. 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
  43. 43. Careful with Logos Very recognizable so small changes will be noticed more easily.
  44. 44. Try progressively enhanced PNG8
  45. 45. Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
  46. 46. Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!
  47. 47. 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'); }
  48. 48. Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.
  49. 49. IE6 Firefox Opera IE7+ Safari Good browsers get more And the dinosaurs get an acceptable fallback
  50. 50. Experimental Data Removing Alpha Image Loader 100ms Yahoo! search
  51. 51. 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.
  52. 52. demo http://smushit.com
  53. 53. 5 Avoid non-standard browser fonts.
  54. 54. 6 Use columns rather than rows.
  55. 55. 7 Choose your bling carefully. Consider your market and users.
  56. 56. 8 Be flexible. Extensible height and width.
  57. 57. • Grids control width • Content controls height
  58. 58. 9 Learn to love grids.
  59. 59. 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/
  60. 60. 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
  61. 61. Let’s keep talking... http://developer.yahoo.com/performance/ http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, everywhere...

×