Design Fast Websites

Slideshow Transcript

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