design camp boston - designing faster websites
DESCRIPTION
This is the presentation I gave at Design Camp Boston on November 6th, 2010.TRANSCRIPT
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?
Why Do We Want Faster Sites?
A Faster Website Will Make Your Users Happy
Injected a 400ms delay0.44% fewer searches per user
0.76% after six weeks
After the delay was removed, 0.21% fewer searches
Amazon
100ms delay resulted in a 1% drop in revenue
Microsoft
1 second delay on bing.com/live.com2.8% drop in revenue per user
2 second delay 4.3% drop
Shopzilla
Complete site redesignReduced load time by 5 seconds
7-12% increase in revenue50% reduction in hardware use
http://en.oreilly.com/velocity2009/public/schedule/detail/7709
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-rankin
g.html
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.)– 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….
Tools for Measuring Performance
• WebPagetest (www.webpagetest.org)• Firebug• YSlow• PageSpeed• DynaTrace Ajax Edition• Google Webmaster Tools• Yottaa.com
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 the bottom
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
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 on the same site”
- Nicole Sullivan
Optimize Images And Sprites
• For graphics use PNG8 (256 color limitation)
• JPEGS can typically be saved at 75% quality– Some people say 50%
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 whitespace3. Reduce anti-aliased pixels4. Avoid diagonal gradients5. Change gradient color every 2-3 pixels
http://video.yahoo.com/watch/4156174/11192533
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/
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/
JavaScript
• “Render First, JS Second” – Steve Souders
• Avoid using blocking JavaScript when possible
• Use a library (YUI, JQuery)
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.).
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
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 book. So we’re really aiming very, very high here...at something like 100 milliseconds.”
- Urs Hölzle, Senior VP Operations, 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 book. So we’re really aiming very, very high here...at something like 100 milliseconds.”
- Urs Hölzle, Senior VP Operations, Google
Putting Their Money Where Their Mouth Is
• Google Chrome• Google DNS• Google Instant• PageSpeed Addon• mod_pagespeed• WebP• The list goes on…
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)
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)
Thanks!
www.csnstores.com/careerswww.meetup.com/Web-Performance-Boston
www.slideshare.net/jnklein