Your SlideShare is downloading. ×
Design Camp Boston - Designing Faster Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Design Camp Boston - Designing Faster Websites

1,225
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,225
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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