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