Designing Faster Websites
Design Camp Boston 2010
Jonathan Klein / jklein@csnstores.com
@jonathanklein
What We Will Discuss
• Why do we want faster sites?
• What does “Load Time” mean?
• Tools for Measuring Performance
• Perf...
Why Do We Want Faster Sites?
A Faster Website Will Make Your Users Happy
Google
Injected a 400ms delay
0.44% fewer searches per user
0.76% after six weeks
After the delay was removed, 0.21% fewer...
Amazon
100ms delay resulted in a 1% drop in revenue
Microsoft
1 second delay on bing.com/live.com
2.8% drop in revenue per user
2 second delay  4.3% drop
Shopzilla
Complete site redesign
Reduced load time by 5 seconds
7-12% increase in revenue
50% reduction in hardware use
ht...
The Value of Performance
• Many, many more examples
– http://www.phpied.com/the-performance-business-pitch/
• A faster sit...
In other words…
A faster website will make you more money
What does Load Time Mean?
• Two Main Pieces
– Server side generation time (cook time, crunch
time, bake time, etc.)
– Clie...
Tools for Measuring Performance
• WebPagetest (www.webpagetest.org)
• Firebug
• YSlow
• PageSpeed
• DynaTrace Ajax Edition...
Performance Best Practices
Steve Souders – “High Performance Websites”
14 Rules
Rule #1
Make Fewer HTTP Requests
CSS Image Sprites
Combine Images:
More Rules
• Order style sheets and scripts appropriately
– Rule #5: Put stylesheets at the top
– Rule #6: Put scripts at ...
Combine CSS/JS and Make External
• Rule #8 – Make JavaScript and CSS external
– Browser caches it
– You can easily minify/...
What About Design?
Be Economical
Build a Widget Library and Reuse
Reduce, Reuse, Recycle
You Don’t Want This:
Consistency
“If two design elements are too similar to be
included on the same page, they are too
similar to be included o...
Optimize Images And Sprites
• For graphics use PNG8 (256 color limitation)
• JPEGS can typically be saved at 75% quality
–...
Pick the Correct File Type
51 KB
1.88 KB
Smush Your Images – smushit.com
5 Image Optimizations
1. Limit the overall number of colors and
combine similar ones
2. Avoid whitespace
3. Reduce anti-al...
Use a CSS Grids System (YUI)
• Easily build complex page layouts
• Flexible, reusable, works in all browsers
• Save time, ...
Use Data URIs/MHTML When Possible
• Eliminates HTTP requests
• Encode image data directly in your CSS
background:url(data:...
JavaScript
• “Render First, JS Second” – Steve Souders
• Avoid using blocking JavaScript when possible
• Use a library (YU...
Three Buckets for Frontend
Performance
1. Reduce the number of requests the browser
has to make
2. Reduce overall page wei...
How Fast is Fast Enough?
• Do market research, compare your site with
competitors
• Make sure you are the fastest, then ge...
Let’s Talk About Google
Obsessed with Improving Performance
Got HTTP Requests?
“A small image costs $1.00, a large image costs
$1.01”
-Marissa Mayer (Google)
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 ...
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 ...
Putting Their Money Where Their
Mouth Is
• Google Chrome
• Google DNS
• Google Instant
• PageSpeed Addon
• mod_pagespeed
•...
Conclusion
“Speed is the most important feature. If your
application is slow, people won’t use it. I see this
more with ma...
Conclusion
“Speed is the most important feature. If your
application is slow, people won’t use it. I see this
more with ma...
Thanks!
www.csnstores.com/careers
www.meetup.com/Web-Performance-Boston
www.slideshare.net/jnklein
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster Websites
Upcoming SlideShare
Loading in …5
×

Design Camp Boston - Designing Faster Websites

1,736 views

Published on

This is the presentation I gave at Design Camp Boston on November 6th, 2010.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Design Camp Boston - Designing Faster Websites

  1. 1. Designing Faster Websites Design Camp Boston 2010 Jonathan Klein / jklein@csnstores.com @jonathanklein
  2. 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. 3. Why Do We Want Faster Sites? A Faster Website Will Make Your Users Happy
  4. 4. 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
  5. 5. Amazon 100ms delay resulted in a 1% drop in revenue
  6. 6. Microsoft 1 second delay on bing.com/live.com 2.8% drop in revenue per user 2 second delay  4.3% drop
  7. 7. 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
  8. 8. 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
  9. 9. In other words… A faster website will make you more money
  10. 10. 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….
  11. 11. Tools for Measuring Performance • WebPagetest (www.webpagetest.org) • Firebug • YSlow • PageSpeed • DynaTrace Ajax Edition • Google Webmaster Tools • Yottaa.com
  12. 12. Performance Best Practices Steve Souders – “High Performance Websites” 14 Rules
  13. 13. Rule #1 Make Fewer HTTP Requests
  14. 14. CSS Image Sprites Combine Images:
  15. 15. More Rules • Order style sheets and scripts appropriately – Rule #5: Put stylesheets at the top – Rule #6: Put scripts at the bottom
  16. 16. 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
  17. 17. What About Design? Be Economical Build a Widget Library and Reuse
  18. 18. Reduce, Reuse, Recycle You Don’t Want This:
  19. 19. 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
  20. 20. Optimize Images And Sprites • For graphics use PNG8 (256 color limitation) • JPEGS can typically be saved at 75% quality – Some people say 50%
  21. 21. Pick the Correct File Type 51 KB 1.88 KB
  22. 22. Smush Your Images – smushit.com
  23. 23. 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
  24. 24. 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/
  25. 25. 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/
  26. 26. JavaScript • “Render First, JS Second” – Steve Souders • Avoid using blocking JavaScript when possible • Use a library (YUI, JQuery)
  27. 27. 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.).
  28. 28. 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
  29. 29. Let’s Talk About Google Obsessed with Improving Performance
  30. 30. Got HTTP Requests? “A small image costs $1.00, a large image costs $1.01” -Marissa Mayer (Google)
  31. 31. 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
  32. 32. 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
  33. 33. Putting Their Money Where Their Mouth Is • Google Chrome • Google DNS • Google Instant • PageSpeed Addon • mod_pagespeed • WebP • The list goes on…
  34. 34. 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)
  35. 35. 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)
  36. 36. Thanks! www.csnstores.com/careers www.meetup.com/Web-Performance-Boston www.slideshare.net/jnklein

×