The document discusses the importance of website speed and performance. It notes that slower sites can result in lower conversion rates, more bounces, and reduced revenue. It recommends tools for measuring performance like WebPagetest and YSlow. The document outlines best practices like reducing HTTP requests through image sprites and CSS/JS combining. It suggests design techniques like using a grid system and optimizing images. The goal is to reduce page weight and browser work to achieve load times under 100ms for the best user experience.

1. Designing Faster Websites
Design Camp Boston 2010
Jonathan Klein / jklein@csnstores.com
@jonathanklein

2. What We Will Discuss
• Why do we want faster sites?
• What does “Load Time” mean?
• Tools for Measuring Performance
• Performance Best Practices
• Design Techniques to Improve Performance
• Specific “Take Home” Optimizations
• How Fast is Fast Enough?

3. Why Do We Want Faster Sites?
A Faster Website Will Make Your Users Happy

5. Google
Injected a 400ms delay
0.44% fewer searches per user
0.76% after six weeks
After the delay was removed, 0.21% fewer searches

6. Amazon
100ms delay resulted in a 1% drop in revenue

7. Microsoft
1 second delay on bing.com/live.com
2.8% drop in revenue per user
2 second delay  4.3% drop

9. Shopzilla
Complete site redesign
Reduced load time by 5 seconds
7-12% increase in revenue
50% reduction in hardware use
http://en.oreilly.com/velocity2009/public/schedule/detail/7709

10. The Value of Performance
• Many, many more examples
– http://www.phpied.com/the-performance-business-pitch/
• A faster site will increase conversion and
reduce bounce rate/exit rate
• It will reduce hardware costs
• It will improve SEO
– http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-
ranking.html

11. In other words…
A faster website will make you more money

12. What does Load Time Mean?
• Two Main Pieces
– Server side generation time (cook time, crunch
time, bake time, etc.)
– Client side render time
• 80-90% of load time takes place on the client
– This is where we want to focus our efforts (in most
cases)
– Optimize something that’s 2% of load time….

13. Tools for Measuring Performance
• WebPagetest (www.webpagetest.org)
• Firebug
• YSlow
• PageSpeed
• DynaTrace Ajax Edition
• Google Webmaster Tools
• Yottaa.com

15. Performance Best Practices
Steve Souders – “High Performance Websites”
14 Rules

16. Rule #1
Make Fewer HTTP Requests

19. CSS Image Sprites
Combine Images:

20. More Rules
• Order style sheets and scripts appropriately
– Rule #5: Put stylesheets at the top
– Rule #6: Put scripts at the bottom

21. Combine CSS/JS and Make External
• Rule #8 – Make JavaScript and CSS external
– Browser caches it
– You can easily minify/gzip the content
• Ideally only 1 CSS file and 1 JS file per page

22. What About Design?
Be Economical
Build a Widget Library and Reuse

23. Reduce, Reuse, Recycle
You Don’t Want This:

24. Consistency
“If two design elements are too similar to be
included on the same page, they are too
similar to be included on the same site”
- Nicole Sullivan

25. Optimize Images And Sprites
• For graphics use PNG8 (256 color limitation)
• JPEGS can typically be saved at 75% quality
– Some people say 50%

26. Pick the Correct File Type
51 KB
1.88 KB

27. Smush Your Images – smushit.com

28. 5 Image Optimizations
1. Limit the overall number of colors and
combine similar ones
2. Avoid whitespace
3. Reduce anti-aliased pixels
4. Avoid diagonal gradients
5. Change gradient color every 2-3 pixels
http://video.yahoo.com/watch/4156174/11192533

29. Use a CSS Grids System (YUI)
• Easily build complex page layouts
• Flexible, reusable, works in all browsers
• Save time, bytes
http://developer.yahoo.com/yui/grids/

30. Use Data URIs/MHTML When Possible
• Eliminates HTTP requests
• Encode image data directly in your CSS
background:url(data:image/png;base64,<data>);
• http://www.nczonline.net/blog/2010/07/06/data-uris-
make-css-sprites-obsolete/

31. JavaScript
• “Render First, JS Second” – Steve Souders
• Avoid using blocking JavaScript when possible
• Use a library (YUI, JQuery)

32. Three Buckets for Frontend
Performance
1. Reduce the number of requests the browser
has to make
2. Reduce overall page weight (KB on the wire)
3. Make the browser do less work (executing
code, applying CSS, painting, etc.).

33. How Fast is Fast Enough?
• Do market research, compare your site with
competitors
• Make sure you are the fastest, then get faster
• Painting the Golden Gate Bridge

34. Let’s Talk About Google
Obsessed with Improving Performance

35. Got HTTP Requests?
“A small image costs $1.00, a large image costs
$1.01”
-Marissa Mayer (Google)

36. So What Would They Say?
“We want you to be able to flick from one page
to another as quickly as you can flick a page on
a book. So we’re really aiming very, very high
here...at something like 100 milliseconds.”
- Urs Hölzle, Senior VP Operations, Google

37. So What Would They Say?
“We want you to be able to flick from one page
to another as quickly as you can flick a page on
a book. So we’re really aiming very, very high
here...at something like 100 milliseconds.”
- Urs Hölzle, Senior VP Operations, Google

38. Putting Their Money Where Their
Mouth Is
• Google Chrome
• Google DNS
• Google Instant
• PageSpeed Addon
• mod_pagespeed
• WebP
• The list goes on…

39. Conclusion
“Speed is the most important feature. If your
application is slow, people won’t use it. I see this
more with mainstream users than I do with power
users...If something is slow, they’re just gone.”
- Fred Wilson (10 Golden Principles of Web Apps)

40. Conclusion
“Speed is the most important feature. If your
application is slow, people won’t use it. I see this
more with mainstream users than I do with power
users...If something is slow, they’re just gone.”
- Fred Wilson (10 Golden Principles of Web Apps)

41. Thanks!
www.csnstores.com/careers
www.meetup.com/Web-Performance-Boston
www.slideshare.net/jnklein